Hi all. I would like to hear recommendations on how good the practice is to use one common material map image for several GLB/GLTF files?
There is a glb file (with Draco compression) that contains multiple objects, each object using the same material map image (for diffuse colors). There is a task to store each object in a separate glb. And a question arose.
Using gltf-pipeline from CesiumGS I can separate the texture from gltf/glb. This works, but on the network tab in the browser, each gltf file downloads the image for itself (via cache)
edit: seem Cesium has it’s own way of loading things. But I let this message in case you can actually use three.js features/plugins to overwrite the engine ones. In other case, this is not a three.js question you may ask Cesium devs.
gltfLoader will create a new material and texture for each model (if they exist, and that’s the trick)
There is still multiple steps to optimize this as you like.
- Before exporting the models with the 3D app: removing all the texture but keeping the UVs
- after loading and before drawing: assigning a new material to loaded objects (texture are loaded separately and assigned to the material with three.js)
- while drawing in the scene: using instanced/merged mesh
- optional shader step: using instanced UV’s with
InstancedBufferAttributecombined with a texture atlas (allow a single image but multiple UV settings for each instance).
This is (as far I know) the most optimized path. But it could be overkill if you not aiming for large amount of objects. One more tip: unused textures and materials doesn’t affect performance until drawn in the scene. And even after that, you can still dispose of them if needed,
@Oxyn, thank you for this