I’d like to create some 3D animations to morph shapes between each others (like turning cube into a stair case, or, more complicated, a head into a car). Some people recommended here to use blender, but I’d prefer to do it all from threejs. Is it possible? If not, is it possible to do it for 2D shapes at least? I know some libraries that can morph for instance SVG shapes between each others like Kute.js, but I’m not sure what’s the best way to do it in threejs.
It is possible, but most likely you will need some extra preparation of the shapes to make them compatible – for example, the same number of vertices and normals, a good mapping between corresponding vertices, etc. External software, like Blender, could help with this preparation. Doing everything by yourself in code might be feasible for some specific shapes, but not for the general case of any two shapes.
Here are two simple demos (disclaimer: comments and texts are not in English) with morphing entirely defined in JS:
3 Likes
Hum, that’s a first step, thanks, I’ll try to understand what you do! I’d be curious to see how hard it is to generalize it for arbitrary shapes… if blender can do it I guess it’s theoretically possible ^^’ Also, I don’t know if it’s easier to turn them into a shape based on marching cube/voxels, and morph the marching cube/voxels shape directly based on a kind of minimum displacement operation… is might be less efficient, but maybe easier to reason about as the topology is less of an issue and it might provide smoother animations… but I’m not sure which interpolation function to choose to interpolate the two density functions. Maybe we can compute the center of mass between the two shapes, virtually align them for the computations, and then gradually blur them like in the Gooey effect + increase sharpness with a coefficient moving gradually to put more weight on the final shape. I’m even curious to see what this can give on 2D shapes ^^
As a proof of concept, I tried to merge an arbitrary 2D picture into another using a gooey effect-like mechanism. The result is not that bad (ok I’m sure svg animations are certainly more direct (in my case the shape my grow before shrinking depending on the used parameters) and more customizable, but at least we don’t need to think about any topology here), and it can certainly be improved by playing with the parameters:
For those of you curious to understand how I made it, I used blender as a quick tool to see in real time the render obtained after applying a few transitions, and I basically applied a bunch of blur, mix the two pictures, and play with the contrast curve:
Now, I’m curious to see if the marching cube algorithm can be used to turn this idea to 3D… (at least there are some support for the marching cube algo in three.js) I’ll need to dig a bit into the marching cube algorithm I guess ^^
This approach might however make texture morphing more challenging… I’m curious to see if we can merge the texture as well if the object’s color does not have a fixed shape… maybe by trying to see what point is closer on the two shapes, getting the color of that point and taking the barycenter between both colors… but that might be computationally intensive.
EDIT I found a tutorial that does something similar (but they use a different algorithm for the interpolation) here Blender Tutorial: Morph Anything Into Anything - YouTube
1 Like
Rev152 for Morphing between cube and sphere…
https://jrlazz.eu5.org/anim/morphX.html
and for tile and sphere…
https://jrlazz.eu5.org/anim/morph2X.html
Thanks for https://unpkg.com/ 
It would be neat to have a library that can take arbitrary geometries and perform a setup where it will automatically create derivative geometries with matching number of vertices and decide how to morph between them.