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.

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