Merging Meshes

Native Babylon.js function

To easily merge a number of meshes to a single mesh use the static MergeMeshes of the Mesh class:

var newMesh = BABYLON.Mesh.MergeMeshes(arrayOfMeshes, disposeSource, allow32BitsIndices, meshSubclass, subdivideWithSubMeshes, multiMultiMaterials);
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):

Merged Meshes Example

Compare with the following example which sets multiMultiMaterials to true:

Merging Meshes With Multiple Materials

See this page 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.

var mergeMeshes = function (meshName, arrayObj, scene) {
var arrayPos = [];
var arrayNormal = [];
var arrayUv = [];
var arrayUv2 = [];
var arrayColor = [];
var arrayMatricesIndices = [];
var arrayMatricesWeights = [];
var arrayIndice = [];
var savedPosition = [];
var savedNormal = [];
var newMesh = new BABYLON.Mesh(meshName, scene);
var UVKind = true;
var UV2Kind = true;
var ColorKind = true;
var MatricesIndicesKind = true;
var MatricesWeightsKind = true;
for (var 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 (i = 0; i != arrayObj.length; i++) {
var ite = 0;
var 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));
var maxValue = savedPosition.length / 3;
var worldMatrix = arrayObj[i].getWorldMatrix();
for (var ite = 0; ite != arrayPos[i].length; ite += 3) {
var vertex = new BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(arrayPos[i][ite], arrayPos[i][ite + 1], arrayPos[i][ite + 2]), worldMatrix);
for (var iter = 0; iter != arrayNormal[i].length; iter += 3) {
var vertex = new BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(arrayNormal[i][iter], arrayNormal[i][iter + 1], arrayNormal[i][iter + 2]), worldMatrix);
var tmp = arrayObj[i].getIndices();
for (it = 0; it != tmp.length; it++) {
arrayIndice.push(tmp[it] + maxValue);
arrayIndice = arrayIndice.concat(tmp);
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);
return newMesh;

Merging Meshes with Constructive Solid Geometry

You can also construct complex meshes by using subtract, inverse, union, and intersect methods of the CSG class.

For example, 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.

function createPipe(diamInner: number, diamOuter: number, length: number, scene: BABYLON.Scene): BABYLON.Mesh {
// Create the outer wall using a Cylinder mesh
const mOuter = BABYLON.MeshBuilder.CreateCylinder(
diameter: diamOuter,
height: length,
// Create the inner wall using a Tube mesh
const mInner = BABYLON.MeshBuilder.CreateTube(
path: [new BABYLON.Vector3(0, -length / 2, 0), new BABYLON.Vector3(0, length / 2, 0)],
radius: diamInner / 2,
sideOrientation: BABYLON.Mesh.DOUBLESIDE,
// Create CSG objects from each mesh
const outerCSG = BABYLON.CSG.FromMesh(mOuter);
const innerCSG = BABYLON.CSG.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", null, scene);
// Dispose of the meshes, no longer needed
// Return the result
return mPipe;

Playground example:

Pipe CSG Example