Animating a triangle

[Eelis]

Suppose I want to make a triangle and animate its three corner positions, to make it move/deform. What is the best way to do that? Thanks

[GameMonetize]

Hello,

 

you can use getVerticesData and updateVerticesData functions. Here is a cool example using a ribbon: http://www.babylonjs-playground.com/#16NCF0#7

[Eelis]

27 minutes ago, Deltakosh said:

you can use getVerticesData and updateVerticesData functions. Here is a cool example using a ribbon: http://www.babylonjs-playground.com/#16NCF0#7

Thanks Deltakosh!

I see that that demo uses registerBeforeRender and constantly updates the mesh. Do I understand correctly that this implies constant reuploading of vertex data to the GPU, and that this solution might not scale well to lots of triangles?

Ideally, I would like to upload 6 Vector3s per triangle to the GPU: 3 for the initial position of the triangle, and 3 for the final position. Then, I would like to be able to animate the triangle at linearly interpolated positions, /without/ constantly reuploading vertex data.

Is that doable?

[GameMonetize]

it is and you understand correctly

You can mark your mesh as updatable to get a special vertex buffer which is faster regarding updates

 

THe best option in your case would be to use a vertex shader though

[Eelis]

Great, thanks for the suggestions! I will try them out.

[jerome]

Another lead is to use the SPS and to design each triangle as different particles. http://doc.babylonjs.com/overviews/Solid_Particle_System

Have a look please at the function updateParticleVertex() : http://doc.babylonjs.com/overviews/Solid_Particle_System#update-each-particle-shape

You particle model could be a disc tessellated at 3 : http://doc.babylonjs.com/overviews/Mesh_CreateXXX_Methods_With_Options_Parameter#disc

This will trigger only one draw call to the GPU

[Eelis]

Thanks again guys, the updateVerticesData approach worked out well for me. (I use it here: http://eel.is/GrappleMap/composer/index.html?332,191,213,418,419,483,573,495 )

Cheers!

[jerome]

nice scene !