Using GLB metadata in Babylon.js

Supercharge your meshes in Babylon.js by adding custom metadata to the export

If you are familiar with the export process of 3D assets into a game engine, you’ll no doubt be familiar with working with a PBR and GLB export process for your 3D assets. This is something we’ve outlined before, and is the cornerstone of all our asset preparation for interactive work.

However, from a traditional pipeline sense, there is a lot of logic to being able to flag meshes with metadata so they can be handled in certain way via code.

The benefits are the following :

• You can easily set up more complex behaviours.
• You can embed text, links or any other custom data (like a JSON schema) into individual meshes.
• You can flag groups of meshes within a single asset.
• You are not bound by naming changes to objects, so is a robust creation pipeline and one that doesn’t need to filter objects by the part name.

What about Babylon’s In-built Tag mechanism?

Tags in Babylon are very useful, and something we use, but it’s at runtime. You are still filtering or sorting objects into arrays or adding as they are created. GLB Metadata gives us the option of persisting data into the asset model itself.

We use 3dsMax to prepare our assets, and the tools and procedure is something we’ve written about before. We have some tools we use for this in our Github repository.

Babylon.js is a great platform for WebGL and one that we love to use for our interactive projects. So it made sense to add to the toolset by scripting a tool for 3dsMax to add metadata pre-export, this way the structures can be defined by the project lead or TD, and the developer can be given a model with a ton of options to work with. Keeping the same embedded data format, you can swap models out and have similar functionality between apps with hardly any code refactoring.

We’ll be using this model in the example, a Draco encoded forklift animation.

Setting up the custom metadata attributes

Once you have pulled the GLTF Tools repository you’ll have access to the attribute tools. This has been set up with a default attribute that should handle pretty much most scenarios for tagging meshes.

The _attr folder holds the default attribute — if you know some scripting you can build any number of custom attribute types to hold any level of data, or even just a few custom values.

The struct will pull in whatever file is added as a local ref here

In 3dsMax, you can add the attribute to each object in bulk. To use, run the babylonMetadata.ms script file. (You can add these to your #userscripts directory but it will run from anywhere)

The metadata script will add the same attribute parameters onto the baseobject of each mesh — it’s a mapped function so it will loop the selection to do this.

You can select each object individually and customise the data, or en masse with the following function -

SetBabylonMetadataOnSelection()

Setting a specific mesh as a trigger object

Other sub-meshes can be flagged with different properties to filter them automatically at runtime and append any extra data to them —

I’m setting the HUD animation as a different MeshID, since I could be adding this to a glow layer

Once you’ve done this, you can run the exporter and save out in the usual fashion.

You’ll be able to see the exporter adding the metadata correctly in the log —

Remember that Babylon exporter only adds to the meshes!

Export meshes will carry this additional property

Validating the Embedded Metadata

This sandbox gives a simple example of a GLB with embedded metadata.

Here’s the code that retrieves the metadata -

meshTask.onSuccess = function (task) { 
 task.loadedMeshes.forEach(meshPart => { 
 // check for metadata on the meshes
 try {
 console.log( “Custom Metadata Mesh — “ , meshPart.name , meshPart.metadata.gltf.extras);
 } 
 catch (error) {
 console.log( “Null Objects”, meshPart.name); 
 }
 }); 
 }

We can see in the Chrome console how we’ve got a nice dataset for all objects.

I hope this gives a good overview of how you can use this to embed data into external meshes using the Babylon.js exporter. If you need any more information, please refer to the information stored in the help docs, it was this that really triggered this whole procedure to begin with.