High Priority – Game Art
High Priority – Game Art
Most of the time, WebGL platforms are a “plug & play” type of system. You load a single webGL model and it loads everything linked together, all finished. Textures, materials, animation, etc. There is little to no tweaking afterwards. How you export your glTF/glB from your 3D tool, is how it will show up in the webGL platform.
When exporting to glTF. You 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. (Not sure how safe these are regarding NDA’s)
Two UV channels are needed:
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 tiling in the UV map. Make UV islands bigger or smaller.
To reduce file sizes and so improve end-user experience, textures should be in JPG file format. 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:
Have all your textures assigned to their respected slots in your materials. And have all materials correctly assigned to your mesh. Make sure you name your materials neatly. Depending on your 3D application, you might have 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. Eg, 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.
Babylon webGL online previewer and exporter, exporter plugins and knowledge:
Modo glTF information:
Textures or UV’s not working correctly
Add a temporary texture to your materials before you export. 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, replace it with the texture they need.
Transparency not working
Make sure the AO uses the second UV channel. And that the AO is disabled on the decal textures.
See you next time!
The High Priority Team