How to update the vertices of a mesh?

Questions
1

I created a mesh using BABYLON.PolygonMeshBuilder and I want to update its vertices in the scene.registerBeforeRender(function ()) method. Here is the code:

    var poly = [];
    this.lenghtBox = 10;

    if (this.isMobile) {
        this.lenghtBox = 20;
    }
    this.wid = this.lenghtBox * 4;
    this.hei = this.lenghtBox * 2;

    var z = -30;
    poly.push(new BABYLON.Vector3(this.lenghtBox * 2, 0, z));
    poly.push(new BABYLON.Vector3(-this.lenghtBox * 2, 0, z));
    poly.push(new BABYLON.Vector3(-this.lenghtBox * 2, this.lenghtBox * 2, z));
    poly.push(new BABYLON.Vector3(this.lenghtBox * 2, this.lenghtBox * 2, z));
    var tag = new BABYLON.PolygonMeshBuilder("test", poly, this.scene).build(true);

scene.registerBeforeRender(function () {
   var positions =tag.getVerticesData(BABYLON.VertexBuffer.PositionKind);
   var UpdatePos = [];

       var wor = [];
               //Get world position from window coordinate.
                wor.push(cam.GetWorldPoint(new BABYLON.Vector3(10, 20, 0))); 
                wor.push(cam.GetWorldPoint(new BABYLON.Vector3(10, 40, 0)));
                wor.push(cam.GetWorldPoint(new BABYLON.Vector3(40, 40, 0)));
                wor.push(cam.GetWorldPoint(new BABYLON.Vector3(40, 20, 0)));

                for (var i = 0; i < win.length; i++) {
                    UpdatePos.push(win[i].x);
                    UpdatePos.push(win[i].y);
                    UpdatePos.push(10);
                }

         tag.setVerticesData(BABYLON.VertexBuffer.PositionKind, UpdatePos);
});

I check the mesh vertices with getVerticesData and the return positions reflected the changes but the problem is the mesh (tag) didnā€™t update to the new position in the screen.

2

When I modify a Mesh I use:

this.sphere.bakeCurrentTransformIntoVertices();

https://doc.babylonjs.com/resources/baking_transformations

1 Like
3

Hey Chengā€¦ I made a little ā€œstarterā€ playgroundā€¦ https://www.babylonjs-playground.com/#1TGOMH#9

It is mostly your code, except where noted.

I dunno what cam.GetWorldPoint() is supposed to do, but I just made a little do-nothing function at line 41. Modify at-will, and re-save/re-run, whatever.

Also, you use a data structure named win in lines 62-64ā€¦ but I donā€™t know what win is. If you could create a ā€˜winā€™ in that playground FOR US, then maybe we could activate this playground fully.

Then we can see what is problem with tag.setVerticesData() maybe.

Help us get this test-playground working, if you please. Make edits, tests, more saves, then paste us URLā€™s to the interesting save-versionsā€¦ and weā€™ll talk more.

It is SO SO much easier for helpers to helpā€¦ when we have a playground demo that shows the problem. Thanks for your help with our testing playground.

PS: Notice line 38. Perhaps vertices of polygon meshā€¦ are not set ā€˜updatableā€™ by default. Maybe we need to tell them to be-so. hmm. :slight_smile: Not sure.

4

Update:

https://www.babylonjs-playground.com/#1TGOMH#10

After activating showNormals tool on previous playground, I realized I still had overlapping vertices. So I made some more adjustments in lines 28-31ā€¦ to get a ā€œplaneā€ created. Then I gave it a material and a colorā€¦ for fun. :slight_smile:

Chengā€¦ perhaps some issues in lines 28-31ā€¦ made it APPEAR that the vertices were not updating. Not sure. Now we have a good-looking polygonMesh to play-with and test-upon, anyway. Nicely colored with good lighting normals on each corner.

5

Hi @Wingnut @Darcey , it is complicated, actually what I want to achieve is to create a few rectangles in fixed size at the top left position of the client area (A contour legends) . GetWorldPoint is a method that take in window coordinate and return you a world coordinate, so by passing four corner of the rectangle in window coordinate it will return you the 4 corners of points in world coordinate. I know we maybe able to update the mesh position by mesh.bakeCurrentTransformIntoVertices(), or mesh.position or mesh.scaling but in this case I want to update the mesh vertices directly by replacing vertices with the values I calculate myself.

6

Wouldnā€™t that be somewhere along the lines of:
https://doc.babylonjs.com/how_to/custom

var customMesh = new BABYLON.Mesh("custom", scene);

var positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3];
var indices = [0, 1, 2, 3, 4, 5];

var vertexData = new BABYLON.VertexData();

vertexData.positions = positions;
vertexData.indices = indices;    

vertexData.applyToMesh(customMesh);

Link at bottom of page:
https://doc.babylonjs.com/how_to/updating_vertices

https://www.babylonjs-playground.com/#VE6GP#2

7

Hi darcey. If you look at line 89 (yet disabled, but maybe soon enabled), Cheng is setting positions-kind data thereā€¦ but not on a blank/custom mesh. Cheng is doing it on a pre-made updatable polygon call tag. ONLY positions. No need to do indices or normals, because Cheng will be using the original indices and normals that are already installed on tag.

SetVerticesData() is like a diet version of applyToMesh(). :slight_smile:

Good links/refs, though. It shows Cheng that there is another way besides polyonMeshBuilderā€¦ to create tag.

8

Exactly like what you have explain! Maybe I should give a try on BABYLON.VertexData.