High Priority – Game Art
High Priority – Game Art
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.
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:
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:
You need two UV channels:
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.
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:
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)
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.
Here are some links that can help you dive even further into the exporting process:
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
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