Dynamic shape morphing on mouse hover

Greetings. I am new to Babylonjs and am currently surveying technologies to try and achieve the following:

I would like to be able to dynamically morph an extruded shape on mouse event. I have this design that is essentially a bunch of primitive like shapes- sort of like rectangles. These are all stacked to create basically a striped pattern. I would like to be able to hover over this design and have the closest seam open up much like an eye or an unzipped portion of two surfaces. See image below:

So if you moved your cursor to the left or right, the open section would follow. I wanted to see if this was possible before trying to figure out workarounds.

I guess Im asking if after I create this extruded design (I imagine it has to be built in a specific way, maybe with many vertices along the shape edge or a mesh), does Babylon have the ability to essentially apply force at the seam to open it up dynamically, as in not having to provide a shape to morph into?

Thanks!

Hi OneTimeUser, nice to meet you :slightly_smiling_face:

You could use mesh.updateMeshPositions to do this, see:

https://doc.babylonjs.com/how_to/how_to_dynamically_morph_a_mesh#other-shapes-updatemeshpositions

Demo:

https://playground.babylonjs.com/#VWISMC#1

2 Likes

Oh, thanks for that! Really appreciate it. I was originally going to try THREE.js for this but was convinced from research that the price of dynamically changing shapes/meshes was very costly and that I should instead morph into a different shape rather than change the existing one. Does this mentality apply here too?

Also, that demo. You’re a dream come true :wink:

2 Likes

I’ve been studying your example and I see that you have set the segments along the z-axis and extruded a square shape to make the stripes.
For my application, I would like to complicate that shape a bit (see pic). In keeping with the way you have done things, in order to make this shape, I’d have to alter path [] to curve like that in the beginning and then keep straight for the rest of the segment loop?

56

Hi,

Did you get get the curved lines working? I tried a bit, but with the curves the vertices can’t just be pushed up/down, and pushing them in the direction of the normals still pushes surfaces apart… If we can get it to work, it would be interesting to try making it more performant (like a vertex shader or using vertices more efficiently)

Yeah I assumed I would run into that problem once I got the curves in there and that up/down vertices would look weird. Still trying to work on it. I’ll keep you posted. Can I see what you have attempted thus far?

I’ll add mine once I’ve made some inroads. Jumping back on later today.

This one shows the vertex normals (red) and the line normals (green):

https://playground.babylonjs.com/#S64KW2

It pushes the vertices in the direction of the path normals, but with a higher number of segments, the normals get too dissimilar in a curve:

https://playground.babylonjs.com/#S64KW2#1

Maybe the vertices should be pushed in a more broadly sampled normal?

image

Edit: I just realized the above is just a few straight lines with a points added in between. This is an actual curve:

https://playground.babylonjs.com/#S64KW2#2

1 Like