How to make an animation on a "vertice"

[elkyu]

Hi,

 

I am a novice on Babylon.

 

I explain my problem, I created a plane with some vertices with Blender and then I export it in Babylon.

What give us this, a grid of vertices (vertices ?  i'm not sure if it is called vertices, vertex,  intersections, dots, or other name) :
 

 

I want to create an animation which make the vertice move. (An animation on a vertice, not on the all mesh)

 

I can get an array including all the position of each vertices (x, y, z) 

: 

[0.8603,0,0.8436,1,0,0.75,1,0,1,-0.0401,0,0.8269,0,0,1,-0.25,0,1,-0.25,0,-0.25,0,0,-0.25,-0.0702,0,-0.1036,0.6698,0,-0.2934,1,0,-0.25,1,0,0,0.3603,0,-0.1564,0.5,0,-0.25,0.5969,0,0.0835,0.4031,0,-0.6832,0.5,0,-0.5,0.3068,0,-0.5568,1,0,-0.75,1,0,-0.5,0.6598,0,-0.6905,-0.613,0,-0.1865,-0.5468,0,-0.3636,-0.5,0,0,-0.6531,0,-0.6665,-0.6103,0,-0.8402,-0.5,0,-0.5,-0.1003,0,-0.6731,-0.0501,0,-0.4198,-0.25,0,-0.5,-0.5,0,0.75,-0.5,0,1,-0.75,0,1,-0.4165,0,0.3035,-0.5501,0,0.5802,-0.75,0,0.5,-0.1404,0,0.1798,0,0,0.5,-0.25,0,0.5,0.4031,0,0.8168,0.5,0,1,0.25,0,1,0.5,0,0.25,0.5,0,0.5,0.2934,0,0.4131,0.8736,0,0.3904,1,0,0.25,1,0,0.5,0.6497,0,0.5769,0.75,0,0.0936,0.1531,0,0.3168,0.25,0,0,0.25,0,0.75,-0.3703,0,0.3035,-0.2066,0,-0.0869,-1,0,0.25,-0.8202,0,0.1464,-1,0,0,-0.75,0,0.0936,-1,0,0.75,-0.6932,0,0.6932,-0.2901,0,-0.6731,-0.5,0,-1,-0.25,0,-1,0,0,-1,-1,0,-0.75,-0.8603,0,-0.5902,-0.75,0,-1,-1,0,-0.25,0.75,0,-0.887,0.5,0,-1,0.75,0,-1,1,0,-1,0.1999,0,-0.7934,0.25,0,-1,-0.1932,0,0.6932,0.75,0,1,-1,0,0.5,-1,0,1,-1,0,-0.5,-1,0,-1]

 

I know it is possible to extract the 3 coordinates of each vertice to create a vector3 for exemple. 

But I don't know how to make the animation. The animations seem working only on Mesh, but not on vectors, vertice or others.

 

I have the idea to create 2 planes. The first with the initials coordinates of the vertices. The second plane with modified coordinates.

And then, create an interpolation between the both plane, but I don't know how to do that.

 

 

Can you help me ?

 

Thanks 

[JCPalmer]

Do you know about Blender shape keys?  They can as much or as little of the mesh as you wish.

 

The Tower of Babel source code exporter handles shape keys.  You actually do animation on the BJS side using the morph extension.  I know there is no documentation for it, but morph is doing the exact interpolation you want.

[elkyu]

No, i don't know anything about Blender, a friend make the mesh plane for me ..

[elkyu]

Someone give me a solution but i have a little problem:

 

The idea : 

Create an updatable mesh from a Blender import. Then use the updateMeshPositions function (use case of the function here :  http://babylondoc.azurewebsites.net/page.php?p=25096  ) 

 

But ! Even if this "tutorial" is a part of Babylon's Documentation, updateMeshPositions doesn't exists anywhere in the documentation, in the code neither. An error message appear telling "is not a function".

 

Why ? this function doesn't exists ? doesn't exists anymore ?

[jerome]

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Mesh/babylon.mesh.ts#L468

 

it's a part of BJS 2.1, not BJS 2.0

 

the 2.1 API doc is not yet released in the doc site

[Wingnut]

Hi Elkyu, welcome to the forum.  Right click this link and choose "save link as"... and save it as babylon.js  .  That will get you a fresh version of the framework... from the BJS playground.

Visit here:  http://playground.babylonjs.com/#1GPYSW

That's the playground... showing you that its version of BJS has the .updateMeshPositions func.  (It is a fairly new function)  (see line 24)

-----------

BUT,  .updateMeshPositions is a bit of a specialty function... mostly used for ribbons, tubes, and other J-mesh. (strangely deformed, retarded and unloved mesh which have wandered away from Jerome's mad scientist lab)  hehe

Elkyu, the easiest method to change a mesh's positions data (in my opinion)... is like this...

http://playground.babylonjs.com/#SSZDB

Notice ground.getVerticesData() and ground.updateVerticesData(), and the last parameter in line 17 MUST be set true.  We are updating the hell out of the ground, so it certainly needs to be set updatable. 

Elkyu, I'll let you study that playground scene for a little while, and you can do modifications and hit RUN over and over, and hit SAVE sometimes (you are ALWAYS safe from overwriting or any other damage ... at the playground)

In this demo, I am only animating the vertex heights (Y-axes).  There have been folks in the forum who have made grounds wave like flags (sin/cos) and do all sorts of fun things.  Notice I said GROUNDS and NOT PLANES.  Planes only have 4 points, so animating only 4 points is BORING!  (unless you are trying to make a dancing plane).

When you use createGround (use ground grids)... you get lots of vertices spread-out across the mesh, and the number of vertex points is easily settable.  We used a createGround with 4 subdivs in the first demo, so we have 25 points... each needing x, y, and z values.

How about a 16 sub-division ground plane grid (much higher rez)... with random colors?  http://playground.babylonjs.com/#SSZDB#2  Wow, huh?

Colors need 4 values for each point... red, green, blue, and alpha.

Blender-made mesh/planes?  Nah.  We don't need them at all, do we?     But feel free to use them, of course.  We can find and manipulate the VertexBufferData of those, too.

I hope these demos help.  Got more questions?  Don't hesitate to ask them.  Again, welcome, good to have you with us.  Tell us about your projects, if you wish. (thx)

[jerome]

Actually updateMeshPosition() does exactly what you just coded Wingy

You just pass it a function as parameter which modifies the positions values.

[Wingnut]

Uhn, thanks Jerome!  Handy!   Don't be making things easier around here... we'll just get confused. 

[jerome]

[elkyu]

Indeed, it's better with the good version of Babylon..

So, now, another problem, the updateMeshPosition function update well the positions into the array, but, nothing happen, the dots stay placed with their initial coordinates, so no visible animation neither.

 

I have this : (For the moment, I just change the coordinates of two points) 

        //Import Blender        BABYLON.SceneLoader.ImportMesh("", "", "irregular_grid.babylon", scene, function (gridMeshes) {                       if(gridMeshes[0].isVerticesDataPresent(BABYLON.VertexBuffer.PositionKind)) {                var verticesData = gridMeshes[0].getVerticesData(BABYLON.VertexBuffer.PositionKind);                var positionFunction = function(verticesData){                    for (var i = 0; i < verticesData.length; i++) {                        if (verticesData[i] == 0.8603 && verticesData[i + 1] == 0 && verticesData[i + 2] == 0.8436) {                            verticesData[i] = 0.7055;                            verticesData[i + 1] = 0;                            verticesData[i + 2] = 0.7000;                        }                        if(verticesData[i] == 1 && verticesData[i+1] == 0 && verticesData[i+2]== 0.75){                            verticesData[i] = 0.8;                            verticesData[i + 1] = 0;                            verticesData[i + 2] = 0.65;                        }                    }                };                gridMeshes[0].updateMeshPositions(positionFunction, true);         

[jerome]

#1 : if you use updateMeshPosition(), you don't need to get the vertices data before (it will do for you)... just change vector3 (positions) coordinates in your positionFunction function. In other terms, just care about coordinates, not vertexData objects, etc :

var positionFunction = function(positions) {  for (var i = 0; i < positions.length; i ++) {    positions[i] = your_brand_new_value;  }};mesh.updateMeshPosition(positionFunction);

# 2 : your mesh must be created as updatable else it won't work.

In this case, you will have to recreate the vertex buffer each frame with bakeTransformIntoVertices()  (please search in the forum for its usage and PG example)

[elkyu]

Hi ! I'm back

 

So, It's working. I use UpdateMeshPosition(), and my mesh is not "updatable" with the Blender import so I recreate the vertex buffer for each frame with bakeTransformIntoVertices() like you said.

 

Thank you !

 

I have an another problem completely different so i will create an other Topic soon I think.

[jerome]

de rien

 

good work