Updating Vertices
How To Update Vertices
Vertex Data
The data contained in each of a mesh's vertices can be obtained from the vertex buffer. This data includes the position of and normal at the vertex as well as color and/or uv values. You can also obtain the indices for each vertex.
var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);var colors = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);var uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);var indices = mesh.getIndices();
Each set of data is an array of numbers as detailed in Creating Custom Meshes.
For example positions will be an array such as [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3] and the
indices array such as [0, 1, 2, 3, 4, 5] giving the following table.
index | position |
---|---|
index 0 | position (-5, 2, -3) |
index 1 | position (-7, -2, -3) |
index 2 | position (-3, -2, -3) |
index 3 | position (5, 2, 3) |
index 4 | position (7, -2, 3) |
index 5 | position (3, -2, 3) |
Updating the Data
Make sure that the mesh has been set as updatable on creation. Then this is just a matter of altering any of the data in the positions, normals, colors and uvs arrays to suit the project followed updating the vertex data
mesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);mesh.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals);mesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colors);mesh.updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs);
Note: When creating your own custom mesh to make it updatable you need to add a second parameter with value true when applying the mesh to the vertex data.
When a mesh is created, the normal for each face is created smoothly to match the intended shape such as a sphere. To flatten the normals to make the mesh flatly shaded convertToFlatShadedMesh can be used.
sphere.convertToFlatShadedMesh()
vertexData.applyToMesh(customMesh, true);
Adding to the Data
What happens if you want to add to vertexData after creating a mesh? For example many of the set and parametric meshes are created without the ColorKind array so it is not possible to use
mesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
since mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind) will return null.
In this case after creating a color for each vertex in a color array use
mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
as an example
var colors = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);if(!colors) {colors = [];var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);for(var p = 0; p < positions.length / 3; p++) {colors.push(Math.random(), Math.random(), Math.random(), 1);}}mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
Examples
Scaling Positions: Scaling Positions Playing Around with Positions: Playing With Positions Adding Color to Vertices: Adding Colors To Vertices