GLB Exports : Tileable Textures & Lightmaps/ Baked Lights

One of my biggest questions is regarding tiled textures- proper pipeline for uv creation, lightmap creation for those uvs, and prepping/ exporting the GLB. Our engineers require GLBs to place in code for our platform. I have tutorials for non tiled assets, and single prop assets. Im working on larger environmental scenes where most if not all assets in the scene are tiled.

Example: I have brick pillars and metal warehouse- I need to create a second uv set- bake lights- then make sure its setup properly for export-

  1. Maya, Blender, Substance which works the best? / Steps. How to create the second UV set/ Light Bake- compile the texture for GLB on these tiled environments. Most of our tiled textures are exports from Substance then tweaked in photoshop

  2. Workflow w. the glTF exporter? / Steps w tile maps

Right now my team has 5 worlds functioning in Babylon and no lights baked in… we are trying to get to the next steps, its been several weeks of tutorials, github, and reading forums.

Thank you so much for your help, we are setting up a pipeline and Babylon is our core engine we are pushing content though - I am seeking more direct answers regarding tiled textures specifically.

pinging @PatrickRyan

@VeronicaLynnHarper, let me break this down in to your two main topics, tiling textures and lightmaps for easier reference because the steps for each don’t affect the other and can be used in isolation from one another.

Tiling Textures
When you are using a tiling texture, you need to plan out your UVs a little more carefully. Setting up UVs for tiling follows the same principles as hiding the seam in a texture but rather than leaving padding at the edge of your texture to prevent mip-maping artifacts you will want to place your seam uvs right on 0 and 1 coordinates for the directions you are wrapping. You can tile a UV atlas if you want, but you will only be tiling in one direction (stacked islands wrapping in U for example) but your islands will all retain the same tiling scale. If you need to change the amount of tile per texture, you will need to set up several materials that can all have their own tiling scale.

In the case of your brick pillars, let’s think of it in terms of a cube that has the top and bottom faces removed, assuming that the pillar touches a floor and ceiling for ease of example. If you want to set up the texture to tile, you would likely unwrap like this:

You can see that the proportion of the UV island is not the same as the proportion of the mesh, but you can set the U and V tiling of the texture to different values to compensate for the change in proportion. You will need to enable KHR_texture_transform in the glTF Extensions portion of the Babylon exporter window if you do set tiling parameters in your materials as the extension is required for your tiling values to be respected.

You can use trim sheets, since you are talking about environment assets, which would work in the same way as any other tiling texture and there is a good tutorial about staring with trim sheets here.

For creating your tiling texture, you can model and bake right out of any DCC package, but I prefer authoring my tiling textures in Substance Designer. You can also get a leg up with the tiling materials available at Substance Source.

Lightmap Baking
Lightmaps will need a second UV set due to the fact that no islands can overlap so on a tiling material, you will still need an atlas in the second UV set. This is because any overlapping UV islands in your lightmap will cause any baked texture pixels to overlap between UV islands and cause baking errors. This is the same process as if you are baking AO on a tiling material, you would use a second UV set to get a clean AO bake. In terms of exporting a mesh with multiple UV sets, you don’t need to do anything special on export as glTF supports multiple texCoords (UV sets) by default.

However, there is no extension for lightmaps in glTF so you will need to wire those textures up in your scene manually. Your engineering team would need to come up with a process for loading in the extra texture and assigning it to the lightmap parameter of the material based on naming convention or storage location. You could hack the texture into the glb by baking the lightmap and then assigning it as a base color texture of a material assigned to a quad that will be hidden in your scene. That way the texture comes along as part of the export of a new material. You could then use the material name to grab the texture and assign it to the appropriate material’s lightmap parameter which would remove the need to manually load the lightmap texture, know the name of the material it needs to be applied to and then assign it. However, this method means you would need to clean up the extra material and quad needed to get it into the glb, so in either case you have extra steps involved. It would likely be up to your engineering team to set up the naming conventions and method for importing your lightmap texture.

This is a thread about baking out a shadow map that has some good breakdown of what you want to take into account when baking them. If you are wanting to bake a lightmap, it’s the same process but you would want to tag the type of map appropriately by setting the material.useLightmapAsShadowmap to the appropriate value.

As for the process of baking a lightmap, there are plenty of tutorials on the process in any DCC tool, but something like this should work for Maya.

Most of your questions are related to either general workflows for real-time asset creation or glTF related so I don’t have many Babylon.js specific feedback to them. So if you look at the links from above and still have questions, I’m happy to answer them.

For thoughts about the Blender part of creation, I would ping @JCPalmer as he’s one of the resident Blender experts here.

1 Like

I must say that I have never done either. I have been using Blender to try and make custom environment textures, in .hdr format, then use the tool to convert them to .env format.

From a workflow perspective it works very nice. Not sure if it is on any interest, though.