# Strategy for merging glb/gltf files into single mesh?

**URL:** <https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159>\
**Category:** Questions\
**Created:** [August 18, 2022, 9:21am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159 "2022-08-18T09:21:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 18, 2022, 9:21am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/1 "2022-08-18T09:21:02Z")

</div>

I am importing .glb meshes into my BabylonJS game. The meshes are exported from Blender.

I am aware that glb/gltf meshes with multiple materials will be represented as separate meshes in BabylonJS. In my case, the meshes will **always** have multiple materials applied.

When investigating `BABYLON.Mesh.MergeMeshes` , I can’t seem to get things working. Intellisense mentions `@param meshes — defines he vertices source. They should all be of the same material. Entries can empty` – this seems to indicate it won’t be possible to merge my meshes into one.

Is there some way to proceed here such that I can access the mesh as a single object? The number of materials is highly variable, and may be 10-20+, so it’s not really feasible to access each mesh individually for the purposes of positioning. Additionally, it’s not clear how to even control a mesh that is actually an array of Meshes.

I have searched far and wide for answers and not finding anything that seems to satisfy this question. Any help here is appreciated, thanks.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 18, 2022, 10:54am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/2 "2022-08-18T10:54:20Z")

</div>

Hello! This documentation is outdated, it is possible to merge meshes that have different materials - by using the `multiMultiMaterials` flag: [Merge meshes with multiple materials | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#QMPUPS). Apologies for that, I’m going to fix the docs.

But if you only want to merge the meshes for positioning purposes, I recommend using TransformNodes instead: [Transform Node | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/mesh/transforms/parent_pivot/transform_node) - you can have multiple meshes as children of a TransformNode, and any transformation applied to it will be passed down to the children. Indeed, that’s how most of the more complex GLB files will be organized - multiple individual meshes “grouped” as children of a TransformNode, like here:

 ![tnode](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/d/ed7ae2c02568c45fcd698cfaf5e3cc2b3ddab316.png)

Hope this helps 😁

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 18, 2022, 11:22am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/3 "2022-08-18T11:22:11Z")

</div>

PR here to fix the docs 😃 [Improve MergeMeshes documentation. by carolhmj · Pull Request #12881 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/12881)

---

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 18, 2022, 1:06pm UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/4 "2022-08-18T13:06:35Z")

</div>

Thanks @carolhmj - sorry I was not fully clear when originally writing this, but my mesh has animations on it that are generated in Blender. So while positioning can be handled via TransformNode, I have no idea how to do more interactive things with the mesh. Does merging it allow me to access the animations?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 18, 2022, 3:46pm UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/5 "2022-08-18T15:46:49Z")

</div>

Can you define a bit more about what you mean by “interactive things”? Is it clicking on the mesh, etc…?

The result of merging will be a different mesh than the ones you started with, so any animations targeting the starting meshes won’t be there.

---

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 18, 2022, 7:31pm UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/6 "2022-08-18T19:31:47Z")

</div>

Thanks - By interactive I mean starting/stopping animations that are included in the mesh

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [August 18, 2022, 7:52pm UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/7 "2022-08-18T19:52:32Z")

</div>

When you import a GLB, its animations will be grouped into AnimationGroups that you can just play/pause/stop as you see fit: [Animating Characters | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/divingDeeper/animation/animatedCharacter)

---

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 18, 2022, 11:05pm UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/8 "2022-08-18T23:05:49Z")

</div>

Thx @carolhmj - for some reason I still can’t get this working and access the merged mesh.

- I have a playground example here where I’m trying to import a semi-complex .glb (silly looking as it is) and the merged mesh can’t be accessed (console logs as “null”) despite my best efforts.

- I **do** need to use the asset manager or some async manner of loading as I will have multiple .glbs

> **[Babylon.js Playground](https://playground.babylonjs.com/#6CEBPU)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Any help you can offer here is appreciated, been pulling my hair out over this.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [August 19, 2022, 12:44am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/9 "2022-08-19T00:44:32Z")

</div>

`[testModel[0]` is the root node in your case, it has no geometry, so no sense to merge.

Here is changed the meshes to merge:

```auto
const mergedModel = BABYLON.Mesh.MergeMeshes([testModel[1], testModel[2]], true)

```

Example - [https://playground.babylonjs.com/#6CEBPU#3](https://playground.babylonjs.com/#6CEBPU#3) , see console for mergedModel at line 92.

---

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 19, 2022, 2:08am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/10 "2022-08-19T02:08:44Z")

</div>

@labris thank you, it was not apparent to me that the root node is not needed. This works when we manually enumerate all of the elements in the array. Since I will not always know the full list of elements (and do not want to hardcode/manually list them all)

I attempted to use the spread operator to reference element[1] → element[n] and received an error `mesh.ts:3854 Uncaught (in promise) TypeError: e[l].getTotalVertices is not a function`

Pls uncomment lines 91 or 92 to see the problem. This error displays in the Playground but in my app it simply fails silently. I seem to be missing something fundamental here – any idea what I’m doing wrong?

> **[Babylon.js Playground](https://playground.babylonjs.com/#6CEBPU%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Thanks!

---

<div class="post-metadata">

**Author:** ![genuflect](https://avatars.discourse-cdn.com/v4/letter/g/74df32/32.png) [@genuflect](https://forum.babylonjs.com/u/genuflect)\
**Post date:** [August 19, 2022, 3:11am UTC](https://forum.babylonjs.com/t/strategy-for-merging-glb-gltf-files-into-single-mesh/33159/11 "2022-08-19T03:11:48Z")

</div>

got it working, it was user error as per normal.

thanks both @carolhmj @labris
