
## 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 and normal at the vertex,
as well as color and/or uv values. You can also obtain the indices for each vertex.

```javascript
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](/features/featuresDeepDive/mesh/creation/custom/custom). 

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
-----|----
0| (-5, 2, -3)
1| (-7, -2, -3)
2| (-3, -2, -3)
3| (5, 2, 3)
4| (7, -2, 3)
5| (3, -2, 3)

## Updating the Data

Make sure that the mesh has been set as updatable on creation. Then it is simply a matter of altering any of the data in the positions, normals, colors, and uvs arrays to suit the project, followed by updating the vertex data.

```javascript
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 the 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 and make the mesh flat-shaded, `convertToFlatShadedMesh` can be used.
```javascript
sphere.convertToFlatShadedMesh()
```
<Playground id="#H05E9H" title="Updating Vertex Data" description="Simple example of updating vertex data."/>

```javascript
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

```javascript
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

```javascript
mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors);
```
for example:

 ```javascript
var colors = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);
if(!colors) {
    colors = [];

    var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);

    for(let 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: <Playground id="#VE6GP#4" title="Scaling Positions" description="Simple example of updating vertex data with scaled positions."/>
Playing Around with Positions: <Playground id="#VE6GP#2" title="Playing With Positions" description="Simple example of updating vertex data and playing with positions."/>
Adding Color to Vertices: <Playground id="#ZRZIIZ#2" title="Adding Colors To Vertices" description="Simple example of adding colors to vertices."/>


## Vertex Normals

Each triangular facet of a mesh comprises three vertices. Besides a position, each vertex has another important Vector3 called a normal. These vertex normals are used by the [shader code](/features/featuresDeepDive/materials/shaders/introToShaders) to calculate how the mesh is lit. Unlike a mathematical normal, they do not need to be set at right angles, and for curved shapes such as a sphere they may not be. In the case of a sphere, they are set as the mathematical normals of the sphere surface rather than of the flat facets of the mesh that create the sphere.

At first, the vertex normals are calculated as the mathematical normals for the facet. It then depends on whether you want to view the facets as flat surfaces or as part of a curve. For flat surfaces, the vertex normals remain as the mathematical normals. To enhance the curve when viewed under light, where triangular facets share vertices with the same positions, each shared vertex normal is recalculated to be the average of the mathematical normals of the shared facets.


These effects are explored below.

In the following two playgrounds see how the changing directions within the normals array affect how it is lit:

<Playground id="#VKBJN#18" title="Vertex Normals Varying In Unison" description="Simple example of vertex normals varying in unison."/>

<Playground id="#VKBJN#19" title="Showing Normals Varying" description="Simple example of showing vertex normal variation."/>

## Normals and Minimum Vertices

![Wireframe](/img/how_to/Mesh/box1.webp)

The box above has 8 vertices. If we want to keep the indices to the minimum they will be 0, 1, 2, 3, 4, 5, 6, 7.

Facets 0, 3, 7 and 3, 7, 6 and 0, 3, 2 all have vertex 3 in common and vertex 3 can only have one
entry in the normals array associated with it.

How does Babylon.js calculate the `normal` for vertex 3?

The diagram below shows that the average of the three mathematical normals at each vertex is used:

![Normals](/img/how_to/Mesh/box4.webp)

Besides minimising the number of vertices needed there are other advantages as will be seen when creating a sphere.

Keeping the indices to a minimum the normals at each corner are an average of the mathematical normals of the three faces that meet at that corner. So 8 corners and 8 unique vertex normals.

## Table of Unique Indices, Positions and Normals for Box with Minimum Vertices

| index | position         | normal                                                              |
| ----- | ---------------- | ------------------------------------------------------------------- |
| 0     | ( -1 , 1 , -1 )  | ( -0.5773502691896258 , 0.5773502691896258 , -0.5773502691896258 )  |
| 1     | ( 1 , 1 , -1 )   | ( 0.8164965809277261 , 0.4082482904638631 , -0.4082482904638631 )   |
| 2     | ( 1 , -1 , -1 )  | ( 0.4082482904638631 , -0.4082482904638631 , -0.8164965809277261 )  |
| 3     | ( -1 , -1 , -1 ) | ( -0.4082482904638631 , -0.8164965809277261 , -0.4082482904638631 ) |
| 4     | ( -1 , 1 , 1 )   | ( -0.4082482904638631 , 0.4082482904638631 , 0.8164965809277261 )   |
| 5     | ( 1 , 1 , 1 )    | ( 0.4082482904638631 , 0.8164965809277261 , 0.4082482904638631 )    |
| 6     | ( 1 , -1 , 1 )   | ( 0.5773502691896258 , -0.5773502691896258 , 0.5773502691896258 )   |
| 7     | ( -1 , -1 , 1 )  | ( -0.8164965809277261 , -0.4082482904638631 , 0.4082482904638631 )  |

## Normals and Flat Shaded Meshes.

There are times, such as needing each face of a box to be covered in a [different material](/features/featuresDeepDive/mesh/facetData),
when it is better to have the box constructed from separate faces, each of which is constructed from two facets, with no two faces
sharing vertex indices. They will, of course, share vertex positions.

![Seperate Faces](/img/how_to/Mesh/box3.webp)

In Babylon.js this can be achieved using the `convertToFlatShadedMesh` function. The results are shown below:

![Flat Shaded Normals](/img/how_to/Mesh/box5.webp)

For a flat-shaded mesh, each of the triangular facets making up a face of the box has mathematical normals as its vertex normals. For simplicity of illustration, we will consider only the six faces making up the box rather than the full range of triangular facets used in the mesh construction. Each face has 4 corners, and each corner has a unique normal at right angles to the face. There are 6 faces on a box, and so 24 unique corner normals.

## Table of Faces, Corners, Positions and Normals for Flat Shaded Box

| Face  | corner | position         | normal           |
| ----- | ------ | ---------------- | ---------------- |
| Front | 0      | ( -1 , 1 , -1 )  | ( 0 , 0 , -1 )   |
| Front | 1      | ( 1 , -1 , -1 )  | ( 0 , 0 , -1 )   |
| Front | 2      | ( 1 , 1 , -1 )   | ( 0 , 0 , -1 )   |
| Front | 3      | ( -1 , 1 , -1 )  | ( 0 , 0 , -1 )   |
| Back  | 4      | ( -1 , 1 , 1 )   | ( 0 , 0 , 1 )    |
| Back  | 5      | ( 1 , -1 , 1 )   | ( 0 , 0 , 1 )    |
| Back  | 6      | ( -1 , -1 , 1 )  | ( 0 , 0 , 1 )    |
| Back  | 7      | ( -1 , 1 , 1 )   | ( 0 , 0 , 1 )    |
| Right | 8      | ( 1 , 1 , -1 )   | ( 1 , -0 , 0 )   |
| Right | 9      | ( 1 , -1 , 1 )   | ( 1 , -0 , 0 )   |
| Right | 10     | ( 1 , 1 , 1 )    | ( 1 , -0 , 0 )   |
| Right | 11     | ( 1 , 1 , -1 )   | ( 1 , 0 , 0 )    |
| Left  | 12     | ( -1 , 1 , -1 )  | ( -1 , 0 , 0 )   |
| Left  | 13     | ( -1 , -1 , 1 )  | ( -1 , 0 , 0 )   |
| Left  | 14     | ( -1 , -1 , -1 ) | ( -1 , 0 , 0 )   |
| Left  | 15     | ( -1 , 1 , -1 )  | ( -1 , -0 , -0 ) |
| Top   | 16     | ( -1 , 1 , -1 )  | ( 0 , 1 , 0 )    |
| Top   | 17     | ( 1 , 1 , 1 )    | ( 0 , 1 , 0 )    |
| Top   | 18     | ( -1 , 1 , 1 )   | ( 0 , 1 , 0 )    |
| Top   | 19     | ( 1 , 1 , -1 )   | ( 0 , 1 , -0 )   |
| Base  | 20     | ( -1 , -1 , -1 ) | ( 0 , -1 , -0 )  |
| Base  | 21     | ( 1 , -1 , 1 )   | ( 0 , -1 , -0 )  |
| Base  | 22     | ( 1 , -1 , -1 )  | ( 0 , -1 , -0 )  |
| Base  | 23     | ( -1 , -1 , 1 )  | ( 0 , -1 , 0 )   |

## Playground Showing Box Normals

<Playground id="#1H7L5C#113" title="Box Normals" description="Simple example of box normals."/>

## Advantage of Shared Normals

Sharing normals means that the shader produces a rounder looking sphere since the vertex normals are the mathematical normals of the sphere surface.

Applying the function `converToFlatShadedMesh` shows the individual faces making up the sphere. For a flat shaded sphere the normals of each facet are the mathematical normals of the facet.

<Playground id="#1H7L5C#38" title="Comparing Shading of Spheres" description="Simple example comparing shading of spheres."/>



## How to Create a Mesh from Scratch

Each and every shape in Babylon.js is built from a mesh of triangles or facets as shown below:

![Custom Mesh](/img/features/scene/custom1.webp)

Every facet is made up of three vertices, each of which is assigned data that affects not only the position of the facet but also
its color, texture, and how it is lit. The complex process of applying a shader to turn this data into a viewable mesh
is all carried out by Babylon.js.

## Positions and Indices

Creating a mesh with two facets, one with vertices at `(-5, 2, -3), (-7, -2, -3), (-3, -2, -3)` and the other with vertices at `(5, 2, 3), (7, -2, 3), (3, -2, 3)`, requires each vertex to have a unique index. Indices should start at `0` and increase consecutively.

| index | position     |
| ----- | ------------ |
| 0     | (-5, 2, -3)  |
| 1     | (-7, -2, -3) |
| 2     | (-3, -2, -3) |
| 3     | (5, 2, 3)    |
| 4     | (7, -2, 3)   |
| 5     | (3, -2, 3)   |

Note that order does not matter when assigning indices.

The positions data is stored in an array of numbers. The vertex with index 0 is placed with `x` coordinate in `array[0]`, `y` at `array[1]` and `z` at `array[2]`.
In general, the vertex with index `i` has `x` coordinate at `array[3i]`, `y` at `array[3i + 1]` and `z` at `array[3i +2]`.

Indices forming a facet are placed together in triples, as in the above example with `(0, 1, 2)` and `(3, 4, 5)`.
The indices data is also stored in an array of numbers with each triple being kept together.

In the above example the positions array is `[-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3]` and
the indices array is `[0, 1, 2, 3, 4, 5]`.

```javascript
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);
```

<Playground id="#VKBJN#2" title="Custom Mesh With Positions And Indices" description="Simple example of a custom mesh with positions and indices."/>

## Normals

Usually a normal to a plane is a vector that is at right angles to a plane and for this example this is true.
Babylon.js will calculate normals for a facet, and for free-standing facets not sharing any vertices with another facet,
the normals will be mathematical normals. For more on how normals affect lighting see [Normals](/features/featuresDeepDive/mesh/creation/custom/vertexNormals).

### Calculating

Normals are calculated on the vertexData object using the `ComputeNormal` method which takes arrays for positions, indices and normals as parameters.

Additions to code:

```javascript
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];

//Empty array to contain calculated values or normals added
var normals = [];

//Calculations of normals added
BABYLON.VertexData.ComputeNormals(positions, indices, normals);

var vertexData = new BABYLON.VertexData();

vertexData.positions = positions;
vertexData.indices = indices;
vertexData.normals = normals; //Assignment of normal to vertexData added

vertexData.applyToMesh(customMesh);
```

_Note:_ To make your custom mesh updatable you need add a second parameter with value `true` when applying the mesh to the vertex data.

```javascript
vertexData.applyToMesh(customMesh, true);
```

This gives the array `normals = [ 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 1]`.

Normals are stored in an array of numbers such that index `i` refers to the vector `(normals[3i], normals[3i + 1], normals[3i + 2])`
and so:

| index | normal     |
| ----- | ---------- |
| 0     | (0, 0, -1) |
| 1     | (0, 0, -1) |
| 2     | (0, 0, -1) |
| 3     | (0, 0, 1)  |
| 4     | (0, 0, 1)  |
| 5     | (0, 0, 1)  |

### Direction

Clearly the normals for each facet are pointing in opposite directions. They all point away from the origin.

![Normal Direction](/img/how_to/Mesh/normals1.webp)

Looking from the origin towards facet 3, 4, 5 then the order in the indices array 3, 4, 5 around the facet is clockwise.

Looking from the origin towards facet 0, 1, 2 then the order in the indices array 0, 1, 2 around the facet is also clockwise.

<Playground id="#VKBJN#6" title="Custom Mesh With Normals" description="Simple example of a custom mesh with normals."/>

Reversing the order of one or both sets of facet indices in the playground will show how the normals change direction.

### Lighting

The closest facet to the camera is now colored white, and the farthest from the camera is black.
This is because the addition of the normals affects the use of light on the facet.

The light in the scene is travelling in the direction of the positive z axis.

```javascript
var light = new BABYLON.DirectionalLight("direct", new BABYLON.Vector3(0, 0, 1), scene);
```

White light travelling in the opposite direction to that of the normal is reflected back and the facet is seen as white, while white light travelling in the same direction as the normal is absorbed and the facet is seen as black.

### Visibility

Removing the wireframe effect then:

1. Camera looking in positive z direction

![Positive Z Direction](/img/how_to/Mesh/normals3.webp)

Black facet cannot be seen.

2. Camera looking in negative z direction

![Negative Z Direction](/img/how_to/Mesh/normals4.webp)

White facet not seen.

Why is this? There are two faces to each facet; the face that the normal is pointing away from is the front face, the other is the backface.
By default, Babylon.js does not render the back face.

Because of this, many meshes that draw solids will not have a visible back face for their facets.

To draw the back face of a mesh turn `backFaceCulling` to `false` for the material being applied to the mesh.

```javascript
mat.backFaceCulling = false;
```

![Both Facets](/img/how_to/Mesh/normals5.webp)

Comment line 41 out in the following to see back face culling happening.

<Playground id="#VKBJN#7" title="Custom Mesh With Both Facets" description="Simple example of a custom mesh with both facets."/>

## Color

The simplest way to assign a color to the custom mesh is by applying a standard material to the mesh and letting Babylon.js do all the work. However,
color can be set for a facet within the vertex data. For information on how the arrangement of facets used in constructing a mesh can affect how colors are displayed see [Applying Materials to Facets](/features/featuresDeepDive/materials/using/texturePerBoxFace).

Colors for each vertex are placed in an array as groups of four in the order red, green, blue and alpha for transparency. For the facet 0, 1, 2 to be colored red and the facet 3, 4, 5 to be colored green, each vertex
on each facet is given the same color.

| index | color        |
| ----- | ------------ |
| 0     | (1, 0, 0, 1) |
| 1     | (1, 0, 0, 1) |
| 2     | (1, 0, 0, 1) |
| 3     | (0, 1, 0, 1) |
| 4     | (0, 1, 0, 1) |
| 5     | (0, 1, 0, 1) |

and the array is `[1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1]`.

Adding to the code:

```javascript
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 colors = [1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 1]; //color array added

var normals = [];

var vertexData = new BABYLON.VertexData();
BABYLON.VertexData.ComputeNormals(positions, indices, normals);

vertexData.positions = positions;
vertexData.indices = indices;
vertexData.colors = colors; //Assignment of colors to vertexData
vertexData.normals = normals; //Assignment of normal to vertexData added

vertexData.applyToMesh(customMesh);
```

In the playground below see what happens when you make the vertices on the red facet different colors.

<Playground id="#VKBJN#8" title="Custom Mesh With Vertex Colors" description="Simple example of a custom mesh with vertex colors."/>

### Notes on the Playground

Since a material is no longer being used, `backFaceCulling` cannot be set, so the camera will have to be rotated for the far facet to be seen. The far facet will remain black despite whatever color is applied, as all light is still being absorbed by this facet.

When the scene starts the camera is very nearly full face on to the facet and pointing in the direction the light is travelling. With the camera in this position most of the white light is reflected back into the camera as a highlight and the facet is seen as almost white.

As the camera is rotated around, the facet will change from appearing white to red as the highlight effect dissipates.

For a more controlled lighting effect, use a [material](/features/featuresDeepDive/materials/using/materials_introduction) as well as, or instead of, setting vertex colors.

Adding a light with direction the reverse of the current one will light both sides.

<Playground id="#VKBJN#104" title="Custom Mesh With Both Sides Lit" description="Simple example of a custom mesh with both sides lit."/>

<Playground id="#VKBJN#105" title="Custom Mesh With Both Sides Color Variation" description="Simple example of a custom mesh with both sides color variation."/>

## Texture

The simplest method is to just use [materials](/features/featuresDeepDive/materials/using/materials_introduction) and let Babylon.js apply the given image as a texture.
However, if you wish to have more control over how a texture is applied to a facet, then you need to create and set the uv array.

Think of any image applied as a texture as having a pair of axes set at the bottom and left-hand side of the image: the u axis and the v axis, respectively.
(`u`, `v`, as `x` and `y`, are used for position axes.) The origin is the bottom-left corner of the image, with the top at v = 1 and the right-hand edge at u = 1, as
in the diagram below.

![Image with uv axes](/img/how_to/Mesh/uv1.webp)

For simplification the following only uses the facet 0, 1, 2.

Each vertex of the facet is assigned a uv coordinate pair from the image.

![Image with uv triangle](/img/how_to/Mesh/uv2.webp)

| index | color  |
| ----- | ------ |
| 0     | (0, 1) |
| 1     | (0, 0) |
| 2     | (1, 0) |

forming the uv array `[0, 1, 0, 0, 1, 0];`.

Using the following code:

```javascript
var customMesh = new BABYLON.Mesh("custom", scene);

var positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3];
var indices = [0, 1, 2];
var uvs = [0, 1, 0, 0, 1, 0];

var normals = [];
BABYLON.VertexData.ComputeNormals(positions, indices, normals);

var vertexData = new BABYLON.VertexData();

vertexData.positions = positions;
vertexData.indices = indices;
vertexData.normals = normals;
vertexData.uvs = uvs;

vertexData.applyToMesh(customMesh);
```

results in:

![Result on Facet](/img/how_to/Mesh/uv3.webp)

Note that the image is skewed, since the shape of the triangular facet and the shape on the image do not match.

Adding in these lines at the appropriate points:

```javascript
var colors = [1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1];

var vertexData.colors = colors;
```

gives:

![Result on Facet with red color added](/img/how_to/Mesh/uv4.webp)

In the playground below clicking on next will cycle you through a variety of values for the uv coordinates.

<Playground id="#VKBJN#4642" title="Varying UV Values" description="Simple example of varying UV values." image="/img/playgroundsAndNMEs/pg-VKBJN-4.webp"/>

_Notes about Playground above_: The camera has been disabled for the above playground. The uv values are shown, and the relative indices are shown on the texture image.
One day this playground might improve. You will get some idea of how to achieve reflections and rotations of textures on a facet. However for a mesh the [arrangement of facets](/features/featuresDeepDive/mesh/facetData) must be considered when trying to achieve a particular texture mapping on the mesh.

### Calculating UVs

Calculating the uvs for a custom mesh obviously depends on the shape of the mesh and which parts of the texture you want projected onto the mesh at which position. Here is an example with a relatively simple mesh that is basically a flat surface with a couple of protrusions.

<Playground id="#I092BE" title="Custom Mesh With UV Calculation" description="Simple example of a custom mesh with UV calculation."/>

The above playground takes the bottom left corner as matching the bottom left corner of the texture image and from the x, z position of each vertex calculates the uv value as the fractional distance of `(x, z)` from the bottom left corner.

In general, if the bottom left corner is at `(a, b)` and the bounding width and height of the mesh are w and h respectively then for each `(x, z)`:

`u = (x - a) / w and v = (z - b) / h`


index	position
0	(-5, 2, -3)
1	(-7, -2, -3)
2	(-3, -2, -3)
3	(5, 2, 3)
4	(7, -2, 3)
5	(3, -2, 3)

Updating Vertices

How To Update Vertices

Vertex Data

Updating the Data

Adding to the Data

Examples