
## How To Draw Curves

If you want to draw a circular path then it is easy enough to generate the points, in the XY plane, for this using

```javascript
const path = [];
for(let theta = 0; theta < 2 * Math.PI; theta +=deltaTheta ) {
    path.push(new BABYLON.Vector3(radius * Math.cos(theta), radius * Math.sin(theta), 0));
```

When you are of a mind to do it you can work out some quite complex paths by hand.

What follows is how to draw some mathematical curves by using the Babylon.js _Curve3_ object, from which you can extract the array of points you need to draw lines, ribbons, tubes and extruded shapes.

The general form is

```javascript
const curve = BABYLON.Curve3.Create.CURVETYPE(parameters);
```

## Arc Through Three Points

Available from version 5.0.0.
Given three points in space, not in a straight line, it is always possible to draw join the points up using a circular arc or to draw a circle through the three points.

```javascript
const arc = BABYLON.Curve3.ArcThru3Points(first, second, third, steps, closed, fullCircle);
```

- **first** _Vector3_ the first point the arc must pass through.
- **second** _Vector3_ the second point the arc must pass through.
- **third** _Vector3_ the third point the arc must pass through.
- **steps** _number_ the larger the number of steps the more detailed the arc.
- **closed** _boolean_ optional with default false, when true forms the chord from the first and third point
- **fullCircle** _boolean_ optional with default false, when true forms the complete circle through the three points

This static method returns an instance of _Curve3_.  
Just use the Curve3 _getPoints()_ method to fill your array : _getPoints()_ returns an array of successive _Vector3_.  
The _length()_ method returns the curve length.

```javascript
const path = arc.getPoints();
const l = arc.length();
```

<Playground id="#KENEJP#3" title="Arc" description="Open arc."/>

<Playground id="#KENEJP#4" title="Segment" description="Segment."/>

<Playground id="#KENEJP#5" title="Full Circle" description="Full Circle."/>

## Quadratic Bezier Curve

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_curves

![Wikipedia Quadratic Bezier Curve](https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif)

```javascript
const bezier2 = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);
```

- **origin** : _Vector3_ the origin point,
- **control** : _Vector3_ the control point,
- **destination** : _Vector3_ the destination point,
- **nb_of_points** : _number_ number of points wanted in the path array.

This static method returns an instance of _Curve3_.  
Just use the Curve3 _getPoints()_ method to fill your array : _getPoints()_ returns an array of successive _Vector3_.  
The _length()_ method returns the curve length.

```javascript
const path = bezier2.getPoints();
const l = bezier2.length();
```

<Playground id="#W0XSPA" title="Drawing A Bezier Quadratic Curve" description="Simple example of drawing a bezier quadratic curve."/>

## Cubic Bezier curve

http://en.wikipedia.org/wiki/B%C3%A9zier_curve# Higher-order_curves

![Wikipedia Cubic Bezier Curve](https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif)

```javascript
const bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points);
```

- **origin** : _Vector3_ the origin point,
- **control1** : _Vector3_ the first control point,
- **control2** : _Vector3_ the second control point,
- **destination** : _Vector3_ the destination point,
- **nb_of_points** : _number_ the wanted final curve number of points in the array.

This static method returns an instance of _Curve3_.  
Just use the Curve3 _getPoints()_ method to fill your array : _getPoints()_ returns an array of successive _Vector3_.  
The _length()_ method returns the curve length.

```javascript
const path = bezier3.getPoints();
const l = bezier3.length();
```

<Playground id="#EY3EW4" title="Drawing A Bezier Cubic Curve" description="Simple example of drawing a bezier cubic curve."/>

## Hermite Spline

http://en.wikipedia.org/wiki/Cubic_Hermite_spline

![Hermite Spline](/img/how_to/Mesh/hermite.jpg)

```javascript
const hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);
```

- **p1** : _Vector3_ the origin point,
- **t1** : _Vector3_ the origin tangent vector,
- **p2** : _Vector3_ the destination point,
- **t2** : _Vector3_ the destination tangent vector,
- **nbPoints** : _number_ the wanted final curve number of points in the array.

This static method returns an instance of _Curve3_.  
Just use the Curve3 _getPoints()_ method to fill your array : _getPoints()_ returns an array of successive _Vector3_.  
The _length()_ method returns the curve length.

```javascript
const path = hermite.getPoints();
const l = hermite.length();
```

<Playground id="#P94GHL" title="Drawing A Hermite Spline" description="Simple example of drawing a Hermite Spline curve."/>

## Catmull-Rom Spline

https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline

![Wikibooks Cubic Hermite spline](https://upload.wikimedia.org/wikipedia/commons/1/1c/Finite_difference_spline_example.png)

```javascript
const nbPoints = 20;                     // the number of points between each Vector3 control points
const points = [vec1, vec2, ..., vecN];  // an array of Vector3 the curve must pass through : the control points
const closed = true;                     // closes the curve when true
const catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints, closed);
```

- **points** : _Vector3_ an array of Vector3 (the control points) the curve will pass through,
- **nbPoints** : _number_ the wanted curve number of points between each control point,
- **closed** : _boolean_ optional with default _false_; available from BJS V3.3; when true forms a closed curve.

This static method returns an instance of _Curve3_.  
Just use the Curve3 _getPoints()_ method to fill your array : _getPoints()_ returns an array of successive _Vector3_.  
The _length()_ method returns the curve length.

```javascript
const path = catmullRom.getPoints();
const l = catmullRom.length();
```

<Playground id="#1AU0M4" title="Drawing A Catmull-Rom Spline Open Curve" description="Simple example of drawing a Catmull-Rom Spline Open Curve."/>
<Playground id="#1AU0M4#18" title="Drawing A Catmull-Rom Spline Closed Curve" description="Simple example of drawing a Catmull-Rom Spline Closed Curve."/>

## Hermite Quaternion Spline

```javascript
BABYLON.Quaternion.Hermite(point0, tangent0, point1, tangent1, amount);
```

allows the interpolation of quaternions for use in animation. As a quaternion is a 4D object how can you visualize the Hermite quaternion spline that the interpolation uses? By representing the hyperspline in 3D space.

This is achieved by mapping a rotation quaternion onto a 3D vector.

### The Math

What is needed if a function $f$ from rotation quaternions to 3D vectors of the form

$f(x, y, z, w) = (x_{v}, y_{v}, z_{v})$

For a rotation quaternion there are two things to note:

1. &nbsp; $x^2 + y^2 + z^2 + w^2 = 1$
2. &nbsp; $(x, y, z, w)$ and $(-x, -y, -z, -w)$ are equivalent.

The equivalence of $(x, y, z, w)$ and $(-x, -y, -z, -w)$ can be seen in the following

<Playground id="#9S6YUQ#3" title="Equivalent Rotation Quaternions" description="Scale by -1 produces equivalent rotation quaternions."/>

It follows that set of rotation quaternions $(x, y, z, w)$ where $x^2 + y^2 + z^2 + w^2 = 1$ and $-1 \leq x, y, z, \leq 1$ and $0 \leq w \leq 1$ covers all possible rotations.

$x^2 + y^2 + z^2 + w^2 = 1$ and so  
$x^2 + y^2 + z^2 = 1 - w^2$ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Eq 1

Since $0 \leq w \leq 1$ then $0 < 1 \leq (1 + w) \leq 2$

Dividing Eq 1 by $(1 + w)^2$, which can never be $0$

$x^2 + y^2 + z^2 \over (1 + w)^2$ = $(1 - w^2) \over (1 + w)^2$ = $(1 - w) \over (1 + w)$

This gives the mapping

$f(x, y, z, w)$ = ($x \over (1 + w)$, $y\over (1 + w)$, $z\over (1 + w)$ )

Each rotation quaternion where $0 \leq w \leq 1$ is mapped onto one of a series of concentric spherical shells of radius, $r$,

$0 \leq r^2$ = $(1 - w) \over (1 + w)$ $\leq 1$.

![Hermite Quaternion Spline](/img/how_to/Mesh/quatshells.png)

The center of the shells represents the rotation quaternion $(0, 0, 0, 1)$, the outer, white, is a unit sphere where $w = 0$.

The process can be reversed, the inverse function $f^{-1}$ returns the rotation quaternion from a point $(x, y, z)$ from the shells.

Since the radius, r, of the sphere at $(x, y, z)$ is such that $r^2 = x^2 + y^2 + z^2$ and

$r^2$ = $(1 - w) \over (1 + w)$ then

$w$ = $(1 - r^2) \over (1 + r^2)$ and

$1 + w$ = $2 \over (1 + r^2)$ and

$f^{-1}(x, y, z)$ = ($2x \over (1 + r^2)$, $2y \over (1 + r^2)$, $2z \over (1 + r^2)$, $(1 - r^2) \over (1 + r^2)$)

### Drawing

The following function will return a Curve3 within a unit sphere representing a Hermite quaternion spline in 3D space using the math above.

```javascript
const hermiteQuarternionSpline = (p1, t1, p2, t2, nbPoints) => {
  const hermite = new Array();
  const step = 1.0 / nbPoints;
  for (let i = 0; i <= nbPoints; i++) {
    const q = BABYLON.Quaternion.Hermite(p1, t1, p2, t2, i * step);
    q.normalize();
    if (q.w < 0) {
      q.scaleInPlace(-1);
    }
    const v = new BABYLON.Vector3(q.x / (1 + q.w), q.y / (1 + q.w), q.z / (1 + q.w));
    hermite.push(v);
  }
  return new BABYLON.Curve3(hermite);
};
```

- **p1** : _Quaternion_ the origin point,
- **t1** : _Quaternion_ the origin tangent vector,
- **p2** : _Quaternion_ the destination point,
- **t2** : _Quaternion_ the destination tangent vector,
- **nbPoints** : _number_ the wanted final curve number of points in the array.

**Warning**  
Using BABYLON.Quaternion.RotationAxis(axis, angle) to create any of p1, t1, p2, t2 does not produce the expected results. Other means of producing rotation quaternions other than a direct creation should also be checked to ensure the one produced is of the range required for the mapping to work.

To produce a vector on the outer , requires a rotation quaternion with $w = 0$

Take the rotation quaternion from

```javascript
new BABYLON.Quaternion(1, 1, 1, 0).normalize(); //giving (0.5774, 0.5774, 0.5774, 0) to 4 dp
```

However using

```javascript
BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(1, 1, 1), 0); // gives (0, 0, 0, 1)
```

and whilst this may be an equivalent quaternion it places the vector at the center of the shells not on the outer ,.  
**End Warning**

<Playground id="#4B0VBG" title="Hermite Quaternion Spline" description="Hermite quaternion spline represented in 3D space."/>

As it is difficult to visualize the spline from pure quaternions it would be useful if there was an editor to draw the representation of the spline in 3D space.

### A (Very) Basic Editor

<Playground id="#4B0VBG#1" title="Hermite Quaternion Editor" description="Hermite quaternion spline Editor 3D space."/>

This playgound allows you to drag representatives of the start (green) and end (red) quaternions within the unit sphere in 3D space. The representation of the start and end quaternion tangents (purple) are attached to the respective start and end controls. The tangents may also be dragged around (invisible) sphere shells centered on the start and end controls. The shells, and hence radius, may be adjusted using the up and down arrow keys (or w and x) for the selected control. Whilst dragging or adjusting the radius the camera is detached. The camera will be attached whenever any dragging is ended or when using keys you can attach it by pressing the spacebar.

The representation of the spline in 3D space is drawn as you adjust the controls. To apply the Hermite quaternion spline created to the box click on the animate button.

## Custom Curve3 Object

You can also make your own Curve3 object from a simple array of successive Vector3.  
Why would you do this and not just use the points to draw a line?  
Because the _Curve3_ object has a useful method, the _continue()_ method, that allows you to place the start of one _Curve3_ onto the end of another _Curve3_ without any calculations to match the start and end points of the curves.

### Example 1

Create an array of Vector3 along a simple sinus curve.

```javascript
const mySinus = [];
for (let i = 0; i < 30; i++) {
  mySinus.push(new BABYLON.Vector3(i, Math.sin(i / 10), 0));
}
const mySinusCurve = new BABYLON.Curve3(mySinus);
```

You would like to continue your _mySinus_ curve with a _bezier3_ curve and then join on a _bezier2_.

```javascript
const myFullCurve = mySinusCurve.continue(bezier3).continue(bezier2);
```

The _continue()_ method returns a new _Curve3_ object and leaves _mySinusCurve3_, _bezier3_ and _bezier2_ unchanged.

If you then need to draw the curve or use it for whatever you want you just get the array of points with the _getPoints()_ method. This method simply returns an array of successive _Vector3_.

```javascript
const path = myFullCurve.getPoints();
const extruded = BABYLON.Mesh.ExtrudeShape("extrudedShape", shape, path, 1, 0, scene);
```

If you need then to know the curve length, just use the _**length()**_ method.

```javascript
const l = myFullCurve.length();
```

<Playground id="#00JR7Z" title="Joining Curves" description="Simple example of joining curves."/>

### Example 2

Here is an example where a Hermite Spline is used to close smoothly a concatenation of two Bezier curves. As the spline is closing the curves the first and last points of the open continued curve need to be read from the array.

- The first and last points of the concatenation are used as last and first point of the Hermite spline.
- The first and last segments of the concatenation are used as last and first tangent vectors of the Hermite. Since these segments are quite small, they are scaled according to the concatenation _length_ so the longer the concatenation, the more curved the spline.

```javascript
// two concatened cubic Bezier
const cubicA = BABYLON.Curve3.CreateCubicBezier(vA0, vA1, vA2, vA3, 50);
const cubicB = BABYLON.Curve3.CreateCubicBezier(vB0, vB1, vB2, vB3, 50);
const continued = cubicA.continue(cubicB);

// initial Hermite values from continued first and last segments
const t = continued.length() / 2; // tangent scale factor
const points = continued.getPoints();
const p1 = points[points.length - 1]; // last continued point = first hermite point
const t1 = p1.subtract(points[points.length - 2]).scale(t); // last segment scaled = hermite tangent t1
const p2 = points[0]; // first continued point = last hermite point
const t2 = points[1].subtract(p2).scale(t); // first segment scaled = hermite tangent t2

const hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, 50);
continued = continued.continue(hermite);

// finally drawing a smooth closed curve
const closedCurve = BABYLON.MeshBuilder.CreateLines("closed", { points: continued.getPoints() }, scene);
```

<Playground id="#2GCEVH" title="Closed Joined Curves" description="Simple example of closed joined curves."/>

The orange and yellow curves are the original Bezier curves.  
In light blue, these two curves are continued by each other and a hermite curve is also added in continuation to close the path.



## How To Use Path3D

A `Path3D` is a mathematical object created from a sequence of position vectors of points on a curve. Once obtained a Path3D can be used to determine the triplet of vectors tangent, normal and binormal of the curve for each of those points. Each triplet can then be used as a local system coordinate. You could set, for example, the camera direction to the normal as it follows the curve.

A `Path3D` object is simple to construct as follows

```javascript
const points = [v1, v2, ..., vn];          // array of Vector3
const path3d = new BABYLON.Path3D(points);
```

You can then get the array of tangents, normals and binormals as follows

```javascript
const tangents = path3D.getTangents();
const normals = path3D.getNormals();
const binormals = path3D.getBinormals();
```

each element of the arrays is a `Vector3` .

<Playground id="#2DLXYB#0" title="Tangents, Normals, and Binormals" description="Simple example of exploring tangents, normals, and binormals."/>

Please zoom in and rotate : tangents in red, normals in blue, binormal in green.

Notice, in the next example, how the triplets slightly rotate when the curve goes more into depth.  
<Playground id="#2DLXYB#1" title="Tangents, Normals, and Binormals - Color Coded" description="Simple example of exploring color coded tangents, normals, and binormals."/>

Whilst at any point on the curve there is only one tangent there can be an infinite number of normals and hence binormals. If the default one does not suit you it is possible to [set the normal direction](/features/featuresDeepDive/mesh/path3D#set-the-normal)

## Path3D Methods

As well as `getTangents`, `getNormals` and `getBinormals` there are some other methods of `Path3D`.

### Get Curve Points

The `getCurve` method returns a copy of the initial `Vector3` array given to create the `Path3D` object.

```javascript
const curvePoints = path3d.getCurve();
```

### Get Distances

The `getDistances` method returns an array of distances from one curve point to the next in order of points and with 0 being the first distance.

For the array of points [(1, 0, 0), (5, 0, 0), (5, 1, 0)] the array of distances is [0, 4, 5].

```javascript
const distances = path3d.getDistances();
```

### Interpolation

You can get info about any virtual point (from 0.0 to 1.0) along the path by functions that interpolate between the path points. Those are the following:

`getPointAt`, `getTangentAt`, `getNormalAt`, `getBinormalAt`, `getDistanceAt`, `getPreviousPointIndexAt`, `getSubPositionAt`

### Copying (part of) the path

The `slice` method returns a new Path3D that is subpath (slice) of the original path. It takes a _start_ and _end_ position from 0.0 to 1.0, or negative values, which wrap back around from 1.0

### Update

In order to avoid memory re-allocation (when in the render loop for example) since the given _points_ array is internally copied, you can update an existing `Path3D` object with its `update()` method.

```javascript
const points1 = [v1, v2, ..., vn];          // array of Vector3
const path3d = new BABYLON.Path3D(points1);
const points2 = [u1, u2, ..., un];          // another array of Vector3
path3D.update(points2);
```

Tangents, normals and bi-normals are thus recomputed for this new path.

<Playground id="#2DLXYB#253" title="Update Path3D" description="Update a Path3D object and observe its results."/>

### Getting the closest position to a point

The `getClosestPositionTo` function returns the position, from 0.0 to 1.0, of the closest virtual point along the path to an arbitrary Vector3.

## Set The Normal

For any vector there are an infinite number of vectors at right angles to it.

![Multiple Normals](/img/how_to/Mesh/tangentnormals.jpg)

In creating a `Path3D` object Babylon.js assigns a default direction for the normal. If you want to set the direction of the normal yourself, you need to pass a vector for a second parameter to `Path3D` on creation or on update.

```javascript
const initialVector = new BABYLON.Vector3(0, 1, 0);
const otherVector = new BABYLON.Vector3(0, 0, 1);
const points = [v1, v2, ..., vn];          // array of Vector3
const path3d = new BABYLON.Path3D(points, initialVector);
// do stuff ...
path3d.update(points, otherVector);
```

The normal will be the projection of your parameter vector onto the plane orthogonal to the tangent at the point position.

As seen in the diagram below, when the parameter is a vertical vector (black), this is projected onto the plane orthogonal to the tangent vector (red) to form the normal (green).

![Curve Normal](/img/how_to/Mesh/planenormal.jpg)

The playground example shows what happens as the vector setting the normal direction is rotated.

<Playground id="#8ICWNU" title="Path3D with Rotating Normals" description="Simple example of Path3D with rotating normals."/>

## Normalization and tangent alignment

Apart from the first normal, there are two more parameters:

`raw`, boolean, **false** by default. If true the tangents, normals and binormals aren't normalized. Useful to depict path acceleration or speed.

`alignTangentsWithPath`, boolean, **false** by default. If true the tangents will be aligned with the path.

## Objects Following A Path

As mentioned in the beginning section, the position of points along the curve, together with the tangent, normal, and binormal vectors, can be used to guide the position and orientation of an object, creating interesting yet effortless animations.

<Playground id="#SGVUBC#86" title="Camera Following a Path" description="Example of a Camera animated to follow the positions and orientations along a Path3D object."/>

The playground above illustrates this technique. The Path3D is constructed as the combination of a few cubic Bèzier curves (but manually defining the points would work just fine). On each point of the path, its tangent and binormal vectors are passed as [arguments](/typedoc/classes/babylon.quaternion#fromlookdirectionrh) to the `FromLookDirectionRH()` method of the [Quaternion class](/features/featuresDeepDive/mesh/transforms/center_origin/rotation_quaternions), orienting the camera such that it looks down the tangent direction, and points up towards the binormal. We then set the sequences of positions and orientations as [animation keys](/features/featuresDeepDive/animation/animation_design), and play it. This idea isn't limited to Cameras, as it could also be used to define paths along which characters would walk in a game, for example.



## Native Babylon.js function

To easily merge a number of meshes to a single mesh use the static `MergeMeshes` of the `Mesh` class:

```javascript
const newMesh = BABYLON.Mesh.MergeMeshes(arrayOfMeshes, disposeSource, allow32BitsIndices, meshSubclass, subdivideWithSubMeshes, multiMultiMaterials);
```

| variable                          | description                                                                                                    |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| arrayOfMeshes                     | An array of Meshes. They should all be of the same material.                                                   |
| disposeSource (optional)          | When true (default), the source meshes will be disposed upon completion.                                       |
| allow32BitsIndices (optional)     | When the sum of the vertices > 64k, this must be set to true.                                                  |
| meshSubclass (optional)           | When set, vertices inserted into this Mesh. Meshes can then be merged into a Mesh sub-class.                   |
| subdivideWithSubMeshes (optional) | When true (false default), subdivide mesh to his subMesh array with meshes source.                             |
| multiMultiMaterials (optional)    | When true (false default), subdivide mesh and accept multiple multi materials, ignores subdivideWithSubMeshes. |

Since `multiMultiMaterials` defaults to false, the resulting merged mesh will have only one material applied to it (taken from the first mesh):

<Playground id="#INZ0Z0#5" title="Merged Meshes Example" description="Simple example of merging meshes together."/>

Compare with the following example which sets `multiMultiMaterials` to true:

<Playground id="#INZ0Z0#59" title="Merging Meshes With Multiple Materials" description="Simple example of merging meshes together with multiple materials."/>

See [this page](/features/featuresDeepDive/materials/using/multiMaterials) for more details on usage of merged meshes.

## Use your own merge function

If you want to merge meshes into a new one using a self implemented function, you can use the following code as basis and improve it to your needs:

Note: Careful, when you merge cloned mesh, you need to update the world matrix of the mesh with computeWorldMatrix before calling the function.

**Note: This article covers the internal merging process. You can also use `BABYLON.VertexData` object and its `merge()` function for a simpler solution.**

```javascript
const mergeMeshes = function (meshName, arrayObj, scene) {
  const arrayPos = [];
  const arrayNormal = [];
  const arrayUv = [];
  const arrayUv2 = [];
  const arrayColor = [];
  const arrayMatricesIndices = [];
  const arrayMatricesWeights = [];
  const arrayIndice = [];
  const savedPosition = [];
  const savedNormal = [];
  const newMesh = new BABYLON.Mesh(meshName, scene);
  const UVKind = true;
  const UV2Kind = true;
  const ColorKind = true;
  const MatricesIndicesKind = true;
  const MatricesWeightsKind = true;

  for (let i = 0; i != arrayObj.length; i++) {
    if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.UVKind])) UVKind = false;
    if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.UV2Kind])) UV2Kind = false;
    if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.ColorKind])) ColorKind = false;
    if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.MatricesIndicesKind])) MatricesIndicesKind = false;
    if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.MatricesWeightsKind])) MatricesWeightsKind = false;
  }

  for (let i = 0; i != arrayObj.length; i++) {
    const ite = 0;
    const iter = 0;
    arrayPos[i] = arrayObj[i].getVerticesData(BABYLON.VertexBuffer.PositionKind);
    arrayNormal[i] = arrayObj[i].getVerticesData(BABYLON.VertexBuffer.NormalKind);
    if (UVKind) arrayUv = arrayUv.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.UVKind));
    if (UV2Kind) arrayUv2 = arrayUv2.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.UV2Kind));
    if (ColorKind) arrayColor = arrayColor.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.ColorKind));
    if (MatricesIndicesKind) arrayMatricesIndices = arrayMatricesIndices.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind));
    if (MatricesWeightsKind) arrayMatricesWeights = arrayMatricesWeights.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind));

    const maxValue = savedPosition.length / 3;

    arrayObj[i].computeWorldMatrix(true);
    const worldMatrix = arrayObj[i].getWorldMatrix();

    for (let ite = 0; ite != arrayPos[i].length; ite += 3) {
      const vertex = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(arrayPos[i][ite], arrayPos[i][ite + 1], arrayPos[i][ite + 2]), worldMatrix);
      savedPosition.push(vertex.x);
      savedPosition.push(vertex.y);
      savedPosition.push(vertex.z);
    }

    for (let iter = 0; iter != arrayNormal[i].length; iter += 3) {
      const vertex = BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(arrayNormal[i][iter], arrayNormal[i][iter + 1], arrayNormal[i][iter + 2]), worldMatrix);
      savedNormal.push(vertex.x);
      savedNormal.push(vertex.y);
      savedNormal.push(vertex.z);
    }

    const tmp = arrayObj[i].getIndices();
    for (let it = 0; it != tmp.length; it++) {
      arrayIndice.push(tmp[it] + maxValue);
    }
    arrayIndice = arrayIndice.concat(tmp);

    arrayObj[i].dispose(false);
  }

  newMesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, savedPosition, false);
  newMesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, savedNormal, false);
  if (arrayUv.length > 0) newMesh.setVerticesData(BABYLON.VertexBuffer.UVKind, arrayUv, false);
  if (arrayUv2.length > 0) newMesh.setVerticesData(BABYLON.VertexBuffer.UV2Kind, arrayUv, false);
  if (arrayColor.length > 0) newMesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, arrayUv, false);
  if (arrayMatricesIndices.length > 0) newMesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, arrayUv, false);
  if (arrayMatricesWeights.length > 0) newMesh.setVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind, arrayUv, false);

  newMesh.setIndices(arrayIndice);
  return newMesh;
};
```

## Merging Meshes with Constructive Solid Geometry

You can construct complex meshes by using `subtract`, `intersect`, and `add` methods of the [CSG2](/typedoc/classes/babylon.csg2) class.

Complete example:
<Playground id="#0MDAYA" title="Complete CSG2 example" description="Showcase of subtract, intersect and add"/>

### Initializing CSG2

Before being able to use `CSG2` you will have to initialize the [Manifold](https://github.com/elalish/manifold) library.

To do so you need to call the `InitializeCSG2Async` function:

```
await BABYLON.InitializeCSG2Async();
```

Please note that if you want to import the library yourself, you have to call the `InitializeCSG2Async` with the following information:

```
await BABYLON.InitializeCSG2Async({
  manifoldInstance: ...
  manifoldMeshInstance: ...
});
```

You can alternatively provide a link to the library itself:

```
await BABYLON.InitializeCSG2Async({
  manifoldUrl: "https://unpkg.com/manifold-3d@2.5.1"
});
```

### Using CSG2

Let's say you want to create a "pipe" shape with an inner and outer diameter (_i.e._, not just a "tube" mesh, which is a curved plane with no "thickness"). This can be constructed by first creating a "cylinder" mesh, and then _subtracting_ a "tube" mesh from the inside of it.

```typescript
function createPipe(diamInner: number, diamOuter: number, height: number, scene: BABYLON.Scene): BABYLON.Mesh {
  // Create the outer wall using a Cylinder mesh
  const mOuter = BABYLON.MeshBuilder.CreateCylinder(
    "mOuter",
    {
      diameter: diamOuter,
      height: height,
    },
    scene,
  );
  // Create the inner wall using a Cylinder mesh
  const mInner = BABYLON.MeshBuilder.CreateCylinder(
    "mOuter",
    {
      diameter: diamInner,
      height: height,
    },
    scene,
  );
  // Create CSG objects from each mesh
  const outerCSG = BABYLON.CSG2.FromMesh(mOuter);
  const innerCSG = BABYLON.CSG2.FromMesh(mInner);

  // Create a new CSG object by subtracting the inner tube from the outer cylinder
  const pipeCSG = outerCSG.subtract(innerCSG);

  // Create the resulting mesh from the new CSG object
  const mPipe = pipeCSG.toMesh("mPipe", scene);

  // Dispose of the meshes, no longer needed
  mInner.dispose();
  mOuter.dispose();

  outerCSG.dispose();
  innerCSG.dispose();

  // Return the result
  return mPipe;
}
```

Playground example:
<Playground id="#PJQHYV" title="Pipe CSG Example" description="Creating a pipe from 2 cylinders using CSGs."/>

The `FromMesh` function accepts a second parameter that can be set to `true` if you do not want to work in world space.
The `toMesh` function can take an option as the third parameter:

```
{
    /**
     * Rebuild normals (false by default)
     */
    rebuildNormals: boolean;
    /**
     * True to center the mesh on 0,0,0. True by default
     */
    centerMesh?: boolean;
}

```

Please note that you can also work directly with `VertexData` with the `FromVertexData` and `toVertexData` functions.

Subtract example:
<Playground id="#PJQHYV#1" title="CSG Subtract Example" description="Simple example of using a CSG subtract operation."/>
