
## Clone
This creates a deep copy of the original mesh and saves memory by sharing the geometry. Each clone can have its own material and transformation. Operations that manipulate the vertex data will be applied to all shared geometries. If you need to make independent changes to a clone's geometry, you must call a method like ```clone.makeGeometryUnique()```, which will disconnect the shared geometry and allow you to treat the clone as its own mesh/geometry.

```javascript
const box1 = BABYLON.MeshBuilder.CreateBox("box1", {height: 1, width: 0.75, depth: 0.25, updatable: true});
const box2 = box1.clone("box2");
box1.position.x = -1;
box2.position.x = 1;
```


Note that as of v5.0, cloning a mesh with a skeleton will assign that skeleton to the clone, i.e., the skeleton is shared. If your clone does not need a skeleton, simply set it to null.
```javascript
clone.skeleton = null;
```
Alternatively, if your clone needs a skeleton, simply clone the source mesh's skeleton.
```javascript
clone.skeleton = mesh.skeleton.clone();
```

## Examples
<Playground id="#QMFPPE" title="Cloning Example 1" description="Simple example showing shared geometry by scaling one geometry by 2." isMain={true} category="Mesh"/> Shows shared geometry by scaling one geometry by 2.  

``` ```
<Playground id="#QMFPPE#1" title="Cloning Example 2" description="Simple example showing transformation by scaling of 2 only changes one mesh."/> Shows transformation by scaling of 2 only changes one mesh.  

``` ```
<Playground id="#QMFPPE#2" title="Cloning Example 3" description="Simple example of clones with different materials."/> Different materials.  



## How to use Instances

Instances are an excellent way to use hardware-accelerated rendering to draw a huge number of identical meshes (let's imagine a forest or an army).

Instances are built from a mesh with the following code:

```javascript
// In this case we're loading our mesh from an external source.
BABYLON.ImportMeshAsync("https://www.babylonjs.com/assets/Tree/tree.babylon", scene).then(function (result) {
  var mesh = result.meshes[0];
  // Make the "root" mesh not visible. The instanced versions of it that we
  // create below will be visible.
  mesh.isVisible = false;
  for (let index = 0; index < 100; index++) {
    var newInstance = mesh.createInstance("i" + index);
    // Here you could change the properties of your individual instance,
    // for example to form a diagonal line of instances:
    //  newInstance.position.x = index;
    //  newInstance.position.z = index;
    // See below for more details on what can be changed.
  }
});
```

A mesh can have as many instances as you want.

Each instance has the same material as the root mesh. They can vary in the following properties:

- `position`
- `rotation`
- `rotationQuaternion`
- `setPivotMatrix`
- `scaling`

Note: related are **thin instances**, if you want even more performance but with less control over each instance. See the [dedicated page](/features/featuresDeepDive/mesh/copies/thinInstances) for further information.

## Use Instances with Node Material

The [Node Material](/features/featuresDeepDive/materials/node_material) is a powerful tool that allows you to create shaders without having to write [GLSL](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language). To use a Node Material on a mesh with instances, you need to add the Instances node to it so that the object is properly instanced:

![Use Instances with Node Material](/img/how_to/instances-node.webp)

The Instances node also gives information on the instance number of the object, which can be useful to, for example, color each instance differently.

<Playground id="#PB1NS6#6" title="Using Node Material with Instances" description="Use Instances node on the Node Material"/>

## Instancing a glTF Object

When you instantiate a glTF object, you need to make sure that the new instance will be under the same parent, or you need to remove the parent from the source object.

This is because every glTF file comes from a right-handed world. To get it into Babylon.js's left-handed world, we add an arbitrary parent with a negative scale on z.

So when instancing a glTF object you have to (either):

- Call `source.setParent(null)`
- Or call `newInstance.setParent(source.parent)`

## Custom Buffers

You also have the opportunity to specify per-instance values for any attribute. For instance (no pun intended), if you want to have a specific color per instance, you only need to provide a vertex buffer flagged as "instanceable" and fill it with a color for each instance:

```javascript
let instanceCount = 1000;
let colorData = new Float32Array(4 * instanceCount);

for (let index = 0; index < instanceCount; index++) {
  colorData[index * 4] = Math.random();
  colorData[index * 4 + 1] = Math.random();
  colorData[index * 4 + 2] = Math.random();
  colorData[index * 4 + 3] = 1.0;
}

var buffer = new BABYLON.VertexBuffer(engine, colorData, BABYLON.VertexBuffer.ColorKind, false, false, 4, true);
box.setVerticesBuffer(buffer);
```

The last parameter of the VertexBuffer constructor is the one to set to true to flag it as instanceable.

Example: <Playground id="#8L50Q3#203" title="Custom Buffers Example 1" description="Simple example of custom buffers."/>

The other way is to register a custom buffer with `registerInstancedBuffer`:

```javascript
mesh.registerInstancedBuffer("color", 4); // 4 is the stride size eg. 4 floats here
```

Using this API, you can specify a new buffer that will be instantiated. This means that each instance will have its own value. You can specify this value on the root mesh and on every single instance:

```javascript
box.instancedBuffers.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), 1);
let instance = box.createInstance("box1");
instance.instancedBuffers.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), 1);
```

The system will take care of updating the internal vertex buffer.

Example: <Playground id="#YPABS1#183" title="Custom Buffers Example 2" description="Simple example of custom buffers."/>

## Using Custom Buffers with Node Material

If you want to use custom buffers in conjunction with node materials, you can access the instanced buffers color with the mesh.color block. Make sure you have added the Instances block to your graph and then the mesh.color block will reference the instanced buffers color assigned to the instance.

![Use Instanced Buffers Color with Node Material](/img/how_to/instances-node-meshColor.webp)

Example: <Playground id="#D6GB23" title="Custom Buffers in Node Material" description="Using custom buffers to drive texture offset in node material."/>

There is a great article from Simon Trushkin, a Senior Technical Artist working at ClickON3D, on [using custom buffers with custom blocks in node material](https://www.linkedin.com/pulse/advanced-use-instance-buffers-node-materials-clickon-web3d-nmdme/). This technique is all about optimization and demonstrating how combining instances, custom buffers, and node material can result in a huge boost to the frame rate of the scene.

## Advanced Control

You can decide to control the world matrix instanced buffer the same way you control the custom buffers.

To do so, just run the following code:

```javascript
mesh.manualUpdateOfWorldMatrixInstancedBuffer = true;
```

When this mode is activated, you can update the world matrix instanced buffer with this code:

```javascript
mesh.worldMatrixInstancedBuffer.set(mat, offset); // mat is the matrix you want to store at the given offset
offset += 16; (a matrix is composed of 16 floats
```

It is recommended to freeze the active meshes when controlling the world matrix instanced buffer to avoid having a discrepancy between the values you store and the number of active instances:

```javascript
scene.freezeActiveMeshes(true);
```

You can find a complete example here: <Playground id="#HJGC2G" title="Instancing Advanced Control" description="Simple example of instancing advanced controls."/>

## Support

Instances are supported for collisions, picking, rendering, and shadows. Even if the current hardware does not support hardware-accelerated instances, Babylon.js will still optimize rendering to take instances into account.

Starting from 5.0, instances that have a transparent material applied can be sorted from back to front to remove/limit rendering artifacts. This mode is enabled by setting `BABYLON.Mesh.INSTANCEDMESH_SORT_TRANSPARENT = true`.

Note that for performance sake the master mesh (the mesh from which instances are created by calling `masterMesh.createInstance`) is not taken into account in the sorting process. So, to avoid rendering artifacts between this mesh and its instances, this mesh should be disabled (`masterMesh.setEnabled(false)`).

## Using 3D Modeler to Create Instances

## Blender

Using Blender, you can create instances of a mesh simply by creating a linked object:

![](/img/how_to/use-instance/blender-linked-object.webp)

## 3ds Max

Using 3ds Max, you can create instances of a mesh simply by creating a clone instance object with a right-click on the object:

![](/img/how_to/use-instance/3ds-linked-object.webp)

## Limitations

- You can use instances with LOD, but one limitation applies in this case: you will have to hide the root objects.
  Here is an example where LODs reuse instances:
  <Playground id="#0720FC#10" title="Instances and LODs" description="Simple example of instancing and LODs."/>

- Instances with a world matrix whose determinant is different from the root mesh's world matrix will be rendered separately (like a regular mesh). This mostly happens when the sign of the scaling vector is different between an instance and the root mesh.

- When using motion blur, the engine needs to store world matrices of the previous frame to compute velocity. Usually, this part is handled internally, but in certain cases you may have to specify these matrices manually. You may in fact see weird blurring artifacts if you update your world matrix buffer manually (using `mesh.manualUpdateOfWorldMatrixInstancedBuffer = true;`). In that case, to also update previous world matrices, you must enable the corresponding flag:

```javascript
mesh.manualUpdateOfPreviousWorldMatrixInstancedBuffer = true;
```

And similarly to world matrices, update the previous world matrices :

```javascript
mesh.previousWorldMatrixInstancedBuffer.set(previousMat, offset);
```

Here is an example of manually updating world matrices along with previous world matrices to use motion blur correctly with instances:
<Playground id="#HJGC2G#58" title="Instances previous matrices motion blur" description="Updating manually previous world matrices for instances to work with motion blur"/>

## Demos

- Trees: <Playground id="#YB006J#75" title="Instancing Trees Example" description="Simple example of instancing with trees."/>
- 10,000 Icospheres: <Playground id="#c2ynt9#12" title="10,000 Icospheres" description="Simple example of instancing with 10,000 icospheres."/>



## Using the Solid Particle System to Copy Meshes
There is more to the Solid Particle System (SPS) than just producing multiple copies of a mesh, and these features are covered in full in the Particles section. The SPS places multiple copies of a mesh together into a single mesh. This means that instead of multiple draw calls, there is just one draw call for the single mesh.

The SPS is a single updatable mesh with the same properties as any other Babylon.js mesh.

To produce multiple copies of a mesh, use the following script.

Example:
```javascript
SPS = new BABYLON.SolidParticleSystem("SPS", scene);  //create the SPS
const tetra = BABYLON.MeshBuilder.CreatePolyhedron("tetra", {}); //create the mesh
SPS.addShape(tetra, 1500);      // add as many copies as you want to the SPS
tetra.dispose(); //dispose of the original mesh
const spsMesh = SPS.buildMesh();  //builds the SPS mesh

//Set the function to initialise the particle properties
SPS.initParticles = () => {
    for (let p = 0; p < SPS.nbParticles; p++) {
        const particle = SPS.particles[p]  
        particle.position.x = BABYLON.Scalar.RandomRange(-50, 50);
        particle.position.y = BABYLON.Scalar.RandomRange(-50, 50);
        particle.position.z = BABYLON.Scalar.RandomRange(-50, 50);
    
        const scale = BABYLON.Scalar.RandomRange(0.5, 1.5);
        particle.scale.x = scale;
        particle.scale.y = scale;
        particle.scale.z = scale;

	        particle.rotation.x = BABYLON.Scalar.RandomRange(0, Math.PI);
	        particle.rotation.y = BABYLON.Scalar.RandomRange(0, Math.PI);
	        particle.rotation.z = BABYLON.Scalar.RandomRange(0, Math.PI);
    }
} ;


SPS.initParticles(); //call the initialising function
SPS.setParticles(); //apply the properties and display the mesh
```

## Example
Copying a tetrahedron: <Playground id="#GKUCQP" title="Copying a Tetrahedron" description="Simple example of copying a tetrahedron." image="/img/playgroundsAndNMEs/PGNMEProceduralTexture.webp"/>



## How to use Thin Instances
Starting with Babylon.js v4.2, thin instances are a feature of meshes.

PG: <Playground id="#V1JE4Z#1" title="Thin Instances Example" description="Simple example of using thin instances."/>

As explained in [How To Use Instances](/features/featuresDeepDive/mesh/copies/instances), instances are an excellent way to use hardware-accelerated rendering to draw a huge number of identical meshes.

However, regular instances still have a performance penalty on the JavaScript side because each instance is its own object (`InstancedMesh`): if you have 10000 instances in your scene, the engine must loop over all those objects to perform a number of operations (visibility checks, etc.).

Thin instances don't create new objects, so you don't incur any penalty on the JavaScript side by having thousands of them. This performance increase does come with a cost:
* either all thin instances are drawn (if the mesh is deemed visible) or none are. It's all or nothing.
* adding / removing a thin instance is more costly than with `InstancedMesh`

Thin instances should be used when you need a lot of static instances that you know won't change often, if at all. Think of the seats in a stadium, for example.

So, regular instances may still be the way to go, depending on your scene: if you have a lot of objects scattered and only a few are visible in a frame, or if you must add/remove instances continuously, it may be better to use instances than thin instances.

<Youtube id="0DaSvI_n7Us"/>

## Creating thin instances
A thin instance is represented by a position/rotation/scaling data packed into a matrix.

The easiest way to create a thin instance is by doing:
```javascript
var matrix = BABYLON.Matrix.Translation(-2, 2, 0);
var idx = sphere.thinInstanceAdd(matrix);
```

You can also pass an array of matrices to `thinInstanceAdd` if you want to create multiple thin instances at once.

Note that `sphere` itself is not rendered. If you want to render it, use `thinInstanceAddSelf()`:
```javascript
var idx2 = sphere.thinInstanceAddSelf();
```

These methods return an index that you can use to reference the thin instance.

For example, you can update a thin instance afterwards:
```javascript
var matrix2 = BABYLON.Matrix.Translation(2, 1, 0);
sphere.thinInstanceSetMatrixAt(idx2, matrix2);
```

Example: <Playground id="#217750" title="Creating Thin Instances" description="Simple example of creating thin instances."/>

Those three methods take an additional `refresh` parameter (`true` by default) that allows you to block the buffer refresh mechanism to improve performance: if you must use those methods multiple times, pass `false` for all calls except the last one.

The bounding info of the mesh is recomputed each time you call these methods to encompass all the thin instances (except if you set `doNotSyncBoundingInfo` to `true`). You can also refresh explicitly the bounding info by calling `thinInstanceRefreshBoundingInfo`.

## Custom attributes
As for regular instances, you can add custom attributes to thin instances.

To do so, register the attribute and set the value(s) for the thin instance(s):
```typescript
sphere.thinInstanceRegisterAttribute("color", 4);

sphere.thinInstanceSetAttributeAt("color", idx, [1, 1, 0, 1]);
sphere.thinInstanceSetAttributeAt("color", idx2, [1, 0, 0, 1]);
```

As the thin instance indexes are really indexes into the underlying buffer, you can set the values for several thin instances at once:
```typescript
sphere.thinInstanceRegisterAttribute("color", 4);

sphere.thinInstanceSetAttributeAt("color", 0, [1, 1, 0, 1, 1, 0, 0, 1]);
```

Example: <Playground id="#217750#1" title="Thin Instances Custom Attributes" description="Simple example of thin instances with custom attributes."/>

You can get or set the number of thin instances to display through the `thinInstanceCount` property.

Note that you can't set a number that is higher than what the underlying buffer can handle!

Set the number to 0 to bypass the thin instance rendering and render the mesh as usual.

## Faster thin instances
To get the most out of thin instance support, you can directly pass the pre-built buffer of matrices / custom attributes:
```typescript
var matrix1 = BABYLON.Matrix.Translation(-2, 2, 0);
var matrix2 = BABYLON.Matrix.IdentityReadOnly;
var matrix3 = BABYLON.Matrix.Translation(2, 1, 0);

var bufferMatrices = new Float32Array(16 * 3);

matrix1.copyToArray(bufferMatrices, 0);
matrix2.copyToArray(bufferMatrices, 16);
matrix3.copyToArray(bufferMatrices, 32);

var bufferColors = new Float32Array(3 * 4);

bufferColors.set([1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1]);

sphere.thinInstanceSetBuffer("matrix", bufferMatrices, 16);
sphere.thinInstanceSetBuffer("color", bufferColors, 4);
```

Example: <Playground id="#217750#2" title="Thin Instances Example" description="Simple example showing how to use thin instances."/>

If you have a lot of thin instances to create, this can be much faster than calling `thinInstanceAdd` / `thinInstanceSetAttributeAt`. You can also allocate a bigger buffer than what you really need at the start and use the `thinInstanceCount` property to adjust the number of instances to display during the course of your program.

Note that you don't need to call `thinInstanceRegisterAttribute` if you set a custom attribute buffer by calling `thinInstanceSetBuffer`.

If you update the buffers you passed to `thinInstanceSetBuffer`, you must call `thinInstanceBufferUpdated` for the changes to take effect.

However, for performance reasons, buffers are not updateable by default. If you plan to update a buffer later, you must make it updateable by passing **false** for the **static** flag (4th parameter of `thinInstanceSetBuffer`):

```javascript
sphere.thinInstanceSetBuffer("matrix", bufferMatrices, 16, false); // matrix buffer is updateable
sphere.thinInstanceSetBuffer("color", bufferColors, 4, true); // color buffer is not updateable
```

## Support

Thin instances are supported for collisions, picking, rendering and shadows. However, for collisions, a single bounding info encompassing all the thin instances is used to check intersection: the check is not done for each thin instance separately.

Here's an example of thin instances picking: <Playground id="#RC2IAH#115" title="Thin Instances Picking Example" description="Simple example of using picking with thin instances."/>

## Limitations

* Thin instances with mixed positive and negative determinant matrices won't be rendered correctly. If you need thin instances with both positive and negative determinants, create two meshes and add the thin instances to one or the other (don't forget to set the `sideOrientation` property properly for both mesh materials!).

For example: <Playground id="#217750#3" title="Thin Instances Wrong Rendering" description="Simple example of thin instances with wrong rendering."/>

![Wrong rendering](/img/how_to/Mesh/thinInstancesWrongSideOrientation.webp)

The green and blue cubes are not rendered correctly because they have a -1 scale for the X direction, making the determinant of their matrix negative.

To correct the problem, create another mesh, add the green/blue instances to that mesh (and remove them from the first mesh!) and set the side orientation of the material of that mesh to be **Clockwise** (by default, it is **Counter clockwise**):

PG: <Playground id="#217750#4" title="Thin Instances Correct Rendering" description="Simple example of thin instances with correct rendering."/>
![Correct rendering](/img/how_to/Mesh/thinInstancesOkSideOrientation.webp)

* If you want to create a thin instance from a cloned mesh, you have to first make sure that you call clonedMesh.makeGeometryUnique().

* When using motion blur, the engine needs to store world matrices of the previous frame to compute velocity. Usually, this part is taken care of internally, but in certain cases you may have to specify these matrices manually. You may in fact see weird blurring artifacts if you decide to change the world matrix buffer layout, like changing the number of matrices it contains, or using a different order. In that case, you will have to keep a second buffer, storing previous world matrices, and updating it by writing :

```javascript
mesh.thinInstanceSetBuffer("previousMatrix", instancedPreviousBuffer, 16);
```

Here is an example of reordering world matrices inside the buffer in each frame, using a different start offset. Previous world matrices are stored and updated, to use motion blur correctly :
<Playground id="#HJGC2G#59" title="Thin instances previous matrices motion blur" description="Updating manually previous world matrices for thin instances to work with motion blur"/>



## Copies, Clones and Instances

Often, you want to save memory or reduce draw calls when rendering a scene. There are several methods for doing this, using clones, instances, thin instances, and the solid particle system. Each provides advantages and disadvantages.


## What is a lattice to begin with?

A lattice is like a flexible grid of points used to modify or reshape objects in 3D. Imagine a net wrapped around an object, where you can pull or push the points of the net to change the shape of the object inside.

Instead of adjusting each small part of the object directly, you just move the points of the lattice. The object inside will stretch, bend, or twist based on how you move the lattice, and the changes happen smoothly. This makes it much easier to apply complex transformations to an object without dealing with every little detail.

An example of a 10x10x10 lattice over a sphere mesh:
![10x10x10 Lattice](/img/features/lattice.webp)

## Creating a lattice

To create a lattice you simply need to instantiate it:

```
var lattice = new BABYLON.Lattice();
```

By default the lattice is created with the following properties:

- size: (1,1,1)
- position: (0,0,0)
- resolutionX: 3
- resolutionY: 3
- resolutionZ: 3

You can define each property at construction time:

```
var lattice = new BABYLON.Lattice({ size: new BABYLON.Vector3(2, 2, 2), position: BABYLON.Vector3.Zero()});
```

## Object space

The lattice works in object space, meaning that the size you define for a lattice has to be relative to the deformed mesh's object space.

In other words, the mesh world matrix is not taken into account, as the lattice works at the geometry level (so before the world transform is applied).

For instance, assuming you have a scene with a sphere created with a diameter of 2, you will have to set the size of the lattice to (2,2,2) in order to fully encompass the sphere, no matter what position, scaling or rotation are set on the sphere.

The same applies to `lattice.position`, which is also in object space.

Please note that you can call your lattice constructor with the option `autoAdaptToMesh` set to a mesh and the system will automatically compute the correct lattice size:

```
var lattice = new BABYLON.Lattice({
    autoAdaptToMesh: mesh
});

```

## Defining the lattice

By default a lattice will simply not change your mesh until you update its data:

```
   // Make it pointy
    for (x = 0; x < lattice.resolutionX; x++) {
        for (z = 0; z < lattice.resolutionZ; z++) {
            const control = lattice.data[x][lattice.resolutionY - 1][z];
            control.y += 1;
        }
    }
```

By accessing the data property, you will have access to the three-dimensional arrays containing each control point.
It is then up to you to update these points to apply the deformation you need.

## Applying the lattice

To apply the lattice you can either call `deform(vertexData)` or `deformMesh(mesh)`.

Here is an example with a vertex data:

```
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
const positions = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
lattice.deform(positions);
sphere.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions, true);
sphere.createNormals(true);
```

Please note that it is your responsibility to then update the mesh and rebuild the normals.

This is then equivalent to:

```
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
lattice.deformMesh(sphere);
sphere.createNormals(true);
```

## Updating the lattice

A lattice can be moved by updating its position value (so the lattice will move in object space).
Here is a complete example of a moving lattice:

```
 var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
const positions = sphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);
const updates = new Float32Array(positions.length);

// lattice
var lattice = new BABYLON.Lattice({ size: new BABYLON.Vector3(2, 2, 2), position: BABYLON.Vector3.Zero()});

// Make it pointy
for (x = 0; x < lattice.resolutionX; x++) {
    for (z = 0; z < lattice.resolutionZ; z++) {
        const control = lattice.data[x][lattice.resolutionY - 1][z];
        control.y += 1;
    }
}

// Shrink that belly!
for (x = 0; x < lattice.resolutionX; x++) {
    for (z = 0; z < lattice.resolutionZ; z++) {
        const control = lattice.data[x][1][z];
        control.x = 0;
        control.z = 0;
    }
}

let offset = -2;
scene.onBeforeRenderObservable.add(() => {
    lattice.position.x = offset;
    offset += 0.01;

    lattice.deform(positions, updates);
    sphere.setVerticesData(BABYLON.VertexBuffer.PositionKind, updates, true);
    sphere.createNormals(true);
});

```

One important point here is that we use the `deform` function with a second parameter in order to not alter the original mesh data.
<Playground id="#MDVD75#18" title="Moving lattice" description="Simple example of a moving lattice."/>

You can also update the lattice data:

```javascript
const loadedData = await BABYLON.ImportMeshAsync("scenes/skull.babylon", scene);
const skull = loadedData.meshes[0];
skull.position.set(0, 0, 0);

const positions = skull.getVerticesData(BABYLON.VertexBuffer.PositionKind);
const updatedPositions = new Float32Array(positions.length);

// lattice
var lattice = new BABYLON.Lattice({
  resolutionY: 10,
  autoAdaptToMesh: skull,
  position: BABYLON.Vector3.Zero(),
});

scene.onBeforeRenderObservable.add(() => {
  // Twist!!
  for (x = 0; x < lattice.resolutionX; x++) {
    for (y = 0; y < lattice.resolutionY; y++) {
      for (z = 0; z < lattice.resolutionZ; z++) {
        const angle = (y / lattice.resolutionY) * 0.02;
        const control = lattice.data[x][y][z];
        const cx = control.x;
        const cz = control.z;

        const cosAngle = Math.cos(angle);
        const sinAngle = Math.sin(angle);

        // Rotation
        control.x = cosAngle * cx - sinAngle * cz;
        control.z = sinAngle * cx + cosAngle * cz;
      }
    }
  }

  lattice.deform(positions, updatedPositions);
  skull.setVerticesData(BABYLON.VertexBuffer.PositionKind, updatedPositions);
  skull.createNormals(true);
});
```

<Playground id="#MDVD75#27" title="Updating lattice data" description="The twisting skull."/>


Copies, Clones, and Instancing

Copies, Clones and Instances

Coming next

Cloning With the Solid Particle System

Learn how to clone using the solid particle system in Babylon.js.

Clones

Learn about clones and cloning in Babylon.js.

Instances

Learn all about the instancing system in Babylon.js.

Thin Instances

Learn how to leverage thin instances in your Babylon.js scenes.