Jump to content

How to make an animation on a "vertice"


Recommended Posts

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) 
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 ?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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...


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)

Link to comment
Share on other sites

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);         
Link to comment
Share on other sites

#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)

Link to comment
Share on other sites

Hi ! I'm back :P


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. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...