
![idpic1](/img/extensions/clonerSystem/linearCloner.webp "LinearCloner's with different transforming parameters")

The LinearCloner clones and distributes the given meshes in a linear manner. If more than one mesh is provided, the corresponding clones are placed one after another. The LinearCloner can instantiate in two different interpolation modes: absolute and relative. In the first mode, the values of the input parameters (scale/rotation/position) can be seen as the difference from the first to the last clone, whereas in the relative mode those values are the difference from clone to clone.
The LinearCloner returns an object with an important property: **root**. It is an invisible mesh that acts as the anchor and parent of all generated clones, and its position is the position of the first clone. Transforming this **root** affects all underlying clones (children) at once, independently of the interpolation mode. Most of the input parameters are also available as properties and are very suitable for animation (tweening). The given input meshes are made inactive during construction, so after construction there will be only one of two possible mesh types: BABYLON **clones** or **instances**.  
_Note:_ Input meshes can be BABYLON meshes but other Cloners as well!

## Example

Example of a LinearCloner with a count of 10 clones (5 x cube1, 5 x cube2) and an increment vector of \{x:2,y:0,z:-1\}:

`const lc = new BABYLONX.LinearCloner([cube1, cube2], demo.scene, { iModeRelative:true,count:10,P:{x:2,y:0,z:-1} });`

Transforming all clones can be done as you would with a single mesh:

`lc.root.scaling.y = 2;`
`lc.root.rotation.x = Math.PI / 4;`

Animation can be done via properties:

`BABYLON.Animation.CreateAndStartAnimation('ani', lc, 'offset', 30, 120, 0, 10);`

## Parameters

`BABYLONX.LinearCloner( meshes, scene[, {optional parameters}])`

| Mandatory Parameter | Description                                                                           |
| ------------------- | ------------------------------------------------------------------------------------- |
| meshes              | array of meshes/cloners to be cloned, meshes will be made inactive after construction |
| scene               | BABYLON scene                                                                         |

| Optional Parameter | Description                                                             | Default Value          |
| ------------------ | ----------------------------------------------------------------------- | ---------------------- |
| count              | the number of clones                                                    | 3                      |
| offset             | offset in world units in the direction of the transform position vector | 0                      |
| growth             | weight factor for all transform parameters in percent/100               | 1                      |
| P                  | transform position vector                                               | \{ x: 0, y: 2, z: 0 \} |
| S                  | scale transformation                                                    | \{ x: 1, y: 1, z: 1\}  |
| R                  | rotation values in degrees                                              | \{ x: 0, y: 0, z: 0 \} |
| iModeRelative      | interpolation mode,                                                     | false (absolute)       |
| useInstances       | flag if clones should be technical "clones" or "instances"              | true                   |

| Properties | Description                                                                          |
| ---------- | ------------------------------------------------------------------------------------ |
| count      | @see Optional Parameter                                                              |
| offset     | @see Optional Parameter                                                              |
| growth     | @see Optional Parameter                                                              |
| position   | @see Optional Parameter P                                                            |
| scale      | @see Optional Parameter S                                                            |
| rotation   | @see Optional Parameter R                                                            |
| rotation3  | rotation values in radians \{x,y,z\}                                                 |
| offset     | @see Optional Parameter                                                              |
| root       | READONLY, gets an invisible mesh representing the anchor of the cloner (root node) |
| effectors  | READONLY, gets a list of Effectors assigned to this Cloner                           |

| Methods                            | Description                                                                                                       |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| addEffector(effector, sensitivity) | adds an effector to this Cloner and sets the sensitivity (1 = full sensitivity, 0 = no sensitivity, which ignores the effector) |
| setEnabled(flag)                   | sets the cloner's root node to the state of the flag (true = enabled)                                              |



![idpic1](/img/extensions/clonerSystem/matrixcloner.webp "MatrixCloner")

The MatrixCloner clones and distributes the given meshes in 3D space. If more than one mesh is provided, the corresponding clones are placed one after another, starting in the x direction and then continuing in the y and z directions.  
The MatrixCloner returns an object with an important property: **root**. It is an invisible mesh that acts as the anchor and parent of all generated clones, and its position is the center position of all generated clones. Transforming this **root** affects all underlying clones (children) at once. The given input meshes are made inactive during construction, so after construction there will be only one of two possible mesh types: BABYLON **clones** or **instances**.  
_Note:_ Input meshes can be BABYLON meshes but other Cloners as well!

## Example

Example of a MatrixCloner with a count of 10 clones (5 x cube1, 5 x cube2) and an increment vector of \{x:2,y:0,z:-1\}:

`const mc = new BABYLONX.MatrixCloner([cube1, cube2], demo.scene, { mcount: { x: 5, y: 5, z: 5 } });`

Transforming all clones can be done as you would with a single mesh:

`mc.root.scaling.y = 2;`
`mc.root.rotation.x = Math.PI / 4;`

## Parameters

`BABYLONX.MatrixCloner( meshes, scene[, {optional parameters}])`

| Mandatory Parameter | Description                                                                           |
| ------------------- | ------------------------------------------------------------------------------------- |
| meshes              | array of meshes/cloners to be cloned, meshes will be made inactive after construction |
| scene               | BABYLON scene                                                                         |

| Optional Parameter | Description                                                | Default Value          |
| ------------------ | ---------------------------------------------------------- | ---------------------- |
| mcount             | the number of clones in the x, y, and z directions         | \{ x: 3, y: 3, z: 3 \} |
| size               | distance from one clone to another in the x, y, and z directions | \{ x: 2, y: 2, z: 2 \} |
| useInstances       | flag if clones should be technical "clones" or "instances" | true                   |

| Properties | Description                                                |
| ---------- | ---------------------------------------------------------- |
| count      | READONLY, total number of clones after initialization      |
| size       | @see Optional Parameter                                    |
| mcount     | @see Optional Parameter                                    |
| effectors  | READONLY, gets a list of Effectors assigned to this Cloner |

| Methods                            | Description                                                                                                       |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| addEffector(effector, sensitivity) | adds an effector to this Cloner and sets the sensitivity (1 = full sensitivity, 0 = no sensitivity, which ignores the effector) |
| setEnabled(flag)                   | sets the cloner's root node to the state of the flag (true = enabled)                                              |



![idpic1](/img/extensions/clonerSystem/objectcloner.webp "ObjectCloner")

The ObjectCloner clones and distributes the given meshes to the facet positions of another input mesh that acts as a template. If more than one mesh is provided, the corresponding clones are placed one after another in the order in which the facets of the template mesh are defined.  
The ObjectCloner returns an object with an important property: **root**. It is an invisible mesh that acts as the anchor and parent of all generated clones. Transforming this **root** affects all underlying clones (children) at once, independently of the interpolation mode. The given input meshes and the template mesh are made inactive during construction, so after construction there will be only one of two possible mesh types: BABYLON **clones** or **instances**.  
_Note:_ Input meshes can be BABYLON meshes but other Cloners as well!

## Example

Example of an ObjectCloner with a count of 10 clones (5 x cube1, 5 x cube2) and an increment vector of \{x:2,y:0,z:-1\}:

`const oc = new BABYLONX.ObjectCloner([cube1, cube2], icoSphere, demo.scene);`

Transforming all clones can be done as you would with a single mesh:

`mc.root.scaling.y = 2;`
`mc.root.rotation.x = Math.PI / 4;`

## Parameters

`BABYLONX.ObjectCloner( meshes, templatemesh, scene[, {optional parameters}])`

| Mandatory Parameter | Description                                                                           |
| ------------------- | ------------------------------------------------------------------------------------- |
| meshes              | array of meshes/cloners to be cloned, meshes will be made inactive after construction |
| templatemesh        | the mesh acting as a template                                                         |
| scene               | BABYLON scene                                                                         |

| Optional Parameter | Description                                                | Default Value |
| ------------------ | ---------------------------------------------------------- | ------------- |
| useInstances       | flag if clones should be technical "clones" or "instances" | true          |

| Properties | Description                                                |
| ---------- | ---------------------------------------------------------- |
| effectors  | READONLY, gets a list of Effectors assigned to this Cloner |

| Methods                            | Description                                                                                                       |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| addEffector(effector, sensitivity) | adds an effector to this Cloner and sets the sensitivity (1 = full sensitivity, 0 = no sensitivity, which ignores the effector) |
| setEnabled(flag)                   | sets the cloner's root node to the state of the flag (true = enabled)                                              |



![idpic1](/img/extensions/clonerSystem/radialCloner.webp "RadialCloner's from left to right: aligned, unaligned, aligned clones")

The RadialCloner distributes the given meshes in a radial manner. If more than one mesh is provided, the clones are placed alternately. Several parameters control the position, angle, type, and orientation of the clones. The RadialCloner returns an object with one important property: **root**. It is an invisible mesh that acts as the anchor, center, and parent of all generated clones. Transforming this **root** (position/scale/rotation) affects all underlying clones (children) at once. Most of the input parameters are also available as properties and are very suitable for animation (tweening). The given input meshes are made inactive during construction, so after construction there will be only one of two possible mesh types: BABYLON **clones** or **instances**.  
_Note:_ Input meshes can be BABYLON meshes but other Cloners as well!

## Example

Example of a RadialCloner with a count of 24 clones (12 cubes cube1/cube2), distributed with alignment enabled and a radius of 6 units in the XZ plane:

`const rc = new BABYLONX.RadialCloner([cube1, cube2], demo.scene, {count:24,radius:6});`

Transforming all clones can be done as you would with a single mesh:

`rc.root.scaling.y = 2;`
`rc.root.rotation.x = Math.PI / 4;`

Animation can be done via properties:

`BABYLON.Animation.CreateAndStartAnimation('radanimation', rc, 'startangle', 30, 120, 0, 90);`

## Parameters

`BABYLONX.RadialCloner( meshes, scene[, {optional parameters}])`

| Mandatory Parameter | Description                                                                           |
| ------------------- | ------------------------------------------------------------------------------------- |
| meshes              | array of meshes/cloners to be cloned, meshes will be made inactive after construction |
| scene               | BABYLON scene                                                                         |

| Optional Parameter | Description                                                          | Default Value          |
| ------------------ | -------------------------------------------------------------------- | ---------------------- |
| count              | the number of clones                                                 | 3                      |
| radius             | radius in world units                                                | 3                      |
| align              | flag if clones are aligned against the middle position of the cloner | true                   |
| startangle         | angle in degrees                                                     | 0                      |
| endangle           | angle in degrees                                                     | 360                    |
| offset             | angle in degrees                                                     | 0                      |
| useInstances       | flag if clones should be technical "clones" or "instances"           | true                   |
| plane              | object \{x,y,z\} describing the cloner's orientation                 | \{ x: 1, y: 0, z: 1 \} |

| Properties | Description                                                                          |
| ---------- | ------------------------------------------------------------------------------------ |
| count      | @see Optional Parameter                                                              |
| radius     | @see Optional Parameter                                                              |
| align      | @see Optional Parameter                                                              |
| startangle | @see Optional Parameter                                                              |
| endangle   | @see Optional Parameter                                                              |
| offset     | @see Optional Parameter                                                              |
| root       | READONLY, gets an invisible mesh representing the anchor of the cloner (root node) |
| effectors  | READONLY, gets a list of Effectors assigned to this Cloner                           |

| Methods                            | Description                                                                                                       |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| addEffector(effector, sensitivity) | adds an effector to this Cloner and sets the sensitivity (1 = full sensitivity, 0 = no sensitivity, which ignores the effector) |
| setEnabled(flag)                   | sets the cloner's root node to the state of the flag (true = enabled)                                              |



Each Cloner can have a set of Effectors assigned. At the time of writing, there is only one Effector available: the RandomEffector.

So what does an Effector do in general? It influences the properties of the clones created by a Cloner. The RandomEffector can influence all transformation properties (scale/rotation/position) with repeatable random values. Different random sequences can be achieved with different **seed** values. The RandomEffector can serve more than one cloner, but it has only one property to control the strength of the random values. Therefore, each cloner has a **sensitivity** property to accept either all or only a portion of the cloner's strength.

_Note:_ The scaling transformation is done in two different ways depending on the **uniformScale** property: if this property is set to true, only one random value is used for all three scaling components (x,y,z), and the y/z components of the **scale property** are ignored. If set to false, each direction is scaled independently with an extra random value.

## Example

In the following example, a RandomEffector is created with the default seed value. The rotation values are then adjusted so that the random y rotation values are in the range 0-180, while x and z remain unaffected. In the next step, the RandomEffector is added to the RadialCloner with a sensitivity of 1, and finally the effector's strength is set to 1.

```javascript
let rc = new BABYLONX.RadialCloner([cube1, cube2], demo.scene, { count: 24, radius: 6 });

let reff = new BABYLONX.RandomEffector(); //default seed value

reff.rotation = { x: 0, y: 180, z: 0 };

rc.addEffector(reff, 1);

reff.strength = 1;
```

At this point, everything is prepared to influence the clone's y-rotation with random values in the range 0-180 degrees. With the function `reff.updateClients()`, the clones are updated.

## Parameters

`BABYLONX.RandomEffector(seed=42)`

| Optional Parameter | Description                                                        | Default Value |
| ------------------ | ------------------------------------------------------------------ | ------------- |
| seed               | the seed value for generating different sequences of random values | 42            |

| Properties   | Description                                                                |
| ------------ | -------------------------------------------------------------------------- |
| strength     | sets the strength of the generator (range 0 to 1)                          |
| uniformScale | true => all scaling directions with one value, false independently scaling |
| position     | sets position numbers in the range 0 to \{x:number,y:number,z:number\}     |
| scale        | sets the scale numbers in the range 0 to \{x:number,y:number,z:number\}    |
| rotation     | sets the rotation numbers in the range 0 to \{x:number,y:number,z:numbe\r} |

| Methods  | Description                                                  |
| -------- | ------------------------------------------------------------ |
| reset()  | resets the random generator to the beginning number sequence |
| random() | get the next random number                                   |



This system allows you to take an array of meshes, clone them, and display the results in a variety of patterns.

Be aware that the current documentation refers to the old version of Cloner. Meanwhile, the basic API is the same, so you can use it as a reference.

The new Cloner version is [published on npm](https://www.npmjs.com/package/bp-cloner) and can be installed with <pre>npm i bp-cloner</pre>



# Babylon Buffered Interpolation

Have you ever wanted to manage the position, rotation, and scale of networked Babylon.js objects? This [awesome package](https://github.com/virbela/buffered-interpolation) provides a fantastic solution. It is a port of Mozilla's [buffered-interpolation](https://github.com/InfiniteLee/buffered-interpolation) to Babylon.js and aims to work well both in situations with continuous and sparse network updates.

To see this system working live, check out the virtual co-presence experience: [Frame](https://framevr.io/).

To get started and learn more, head over to [Virbela's GitHub page](https://github.com/virbela/buffered-interpolation).


Cloner System

Coming next

LinearCloner

The LinearCloner clones and distributes given meshes in a linear manner.

RadialCloner

The RadialCloner distributes given meshes in a radial manner.

MatrixCloner

The MatrixCloner clones and distributes given meshes in 3D space.

ObjectCloner

The ObjectCloner clones and distributes given meshes to the facet position of another input-mesh which acts as a template.

RandomEffector

The RandomEffector can influence all transformation properties applied to a Cloner with repeatable random values.