High Priority – Game Art

5 Tips to Export glTF for WebGL

How to Prevent Issues When:

Building and Exporting Models from gITF and WebGL

3D assets for WebGL can be finicky things to work on. Trust us when we say we’ve bumped our heads countless times in our adventures into WebGL. Everything from things like a model not loading, animations not working, rendering artifacts, to meshes not being able to display a texture (even though there is a texture on it): we’ve dealt with it!

To prevent these time-consuming horrors to sneak into your work, we present our 5 easy tips to ensure they’re not going to.

Setup & Export

Before we get to the 5 tips, let’s talk about the key to a successful export: setup & export.

Most of the time, WebGL platforms are a “plug & play” type of system. You load a single WebGL model and it loads textures, materials, animations, etc, into a perfectly finished product. There’s little to no tweaking afterward, saving you time. How you export your glTF/glB from your 3D tool, is how it will show up in the WebGL platform.

When exporting to glTF, your exporter should produce a folder containing the following:

ObjectName.bin
ObjectName.gltf
TextureFiles_C.png
TextureFiles_N.png
TextureFiles_ARM.png
TextureFile_AO.png

This folder is then loaded into the platform and should load your model with everything linked together: Textures are pre-assigned to materials, and materials are pre-assigned to their triangles and meshes.

When exporting or packing to glB. You will only have a single file: ObjectName.glB

Both the glTF folder or the single glB file can be loaded into https://sandbox.babylonjs.com/ or https://gltf-viewer.donmccurdy.com/ for testing. Disclaimer: We’re not sure how safe these are regarding NDA’s. User discretion is advised.

Now that you’ve got your setup and export-ready, it’s time to move on to the tips:

1. UV channels

You need two UV channels:

  1. A Color/texture map. You can scale the UV islands as you wish to get the desired material tiling.
  2. An AO map. This cannot have overlapping UV’s and must be within 0 to 1 UV space.

2. Tiling materials

Most often we do not have access to the materials or shaders. Which means we cannot put in tiling values. Instead, you need to do the tiling in the UV map. Make UV islands bigger or smaller.

3. Textures

To reduce file sizes, and so improve end-user experience, textures have to be in JPEG file format. All except for transparent textures, which use transparent PNG’s.

For the model’s AO, create a single AO file in linear color space:
T_AO_01.jpg

For each (tile-able) material, create the following texture sets:

T_Map_C.jpg = Albedo (.png needs transparency)
T_Map_N.jpg = Normal
T_Map_ARM.jpg = AO, Rough, Metal. (To clarify, this AO is for the AO of the material, not the AO of the model)

4. Materials

Make sure you have all your textures assigned to their respected slots in your materials. Then make sure you have all materials correctly assigned to your mesh. A structured file is key, so make sure you name your materials neatly.

Depending on your 3D application, you might need to choose a specific glTF material/shader for it to export correctly into the glTF/glB format. Make sure you assign your textures to the correct UV channel. E.g, the AO map should use the second UV channel.

Transparency is supported using default PNG transparency in the _C (color) map.

Test your glTF and/or glB exports to see if the textures are correctly exported. For example, in Modo, if the shaders/materials used are not the glTF shaders, the exporter will not see the textures and so will not export them.

5. Animation

  • Set your scene, or time rate, to 30 frames per second.
  • Use animation tracks/clips/actions for all animations with easy-to-understand names. In code, these animation names are “called” to play and build interaction.
  • Make sure the first frame in your scene is always the “default” pose or position. Call it “DefaultPose”.
  • If animations are added, add additional animation tracks for static states. For example, if you have a car door that needs to open and close. Add a “close” and “open” animation. But also add a “static Closed” and “static Opened” animation.

glTF Animation

Links & Resources

Here are some links that can help you dive even further into the exporting process:

Babylon webGL online previewer and exporter, exporter plugins and knowledge:
https://www.babylonjs.com/
https://sandbox.babylonjs.com/
https://github.com/BabylonJS/Exporters/

Online previewer:
https://gltf-viewer.donmccurdy.com/

Modo glTF information:
https://learn.foundry.com/modo/content/help/pages/shading_lighting/shader_items/gltf.html
https://community.foundry.com/discuss/post/1131857

glTF Modo

Debugging & Solutions

As with all things tech, it’s not a given that bugs won’t be present in your final product. To make sure that you can take care of them when you encounter one we’ve got some bonus tips below:

Textures or UV’s not working correctly

Solution: Add a temporary texture to your materials before you export. This is so the glTF and WebGL platform is “forced” to understand that a given material slot uses a texture. Then, in the final webGL platform, on the developer side, simply replace it with the texture they need.

Transparency not working

Solutions:

  • Confirm the material and shader setup within your authoring tool is correct. Eg, in Modo all textures need to be loaded into the glTF slots. Except for the transparent texture, which needs to be loaded into the Dissolve slot.
  • Use the Babylon online tool to export to glB. You can set up materials in their tool.

AO issues

Solutions:

  • Make sure the AO uses the second UV channel.
  • The AO is disabled on the decal textures.

There you go, all the info you need to successfully export to gITF for WebGL. Using these tips you’ll be showing off your awesome creations in no time!

See you next time!

The High Priority Team