Strategy for merging glb/gltf files into single mesh?

Questions
1

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.

2

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). 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) - 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
tnode304×854 20.7 KB

Hope this helps :grin:

3

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

4

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?

5

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.

6

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

7

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)

1 Like
8

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

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

9

[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:

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

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

10

@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?

Thanks!

11

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

thanks both @carolhmj @labris

2 Likes