This question has been on my mind for all the three.js projects I have been working on.
As far as I am concerned it is impossible to have for a example a toon material in a GLTF exported model. GLTF exporters will automatically convert any unknown materials into a standard or phong material. So we have no choice but to replace the GLTF’s default material with the material we want.
But what is the cost of this operation? Can we ignore it? Or could it have an impact at runtime?
The material is only used at runtime if you draw the mesh in the scene (shaders are not compiled before this point). Wich mean any materials created by GLTFloader are not automatically processed and passed to the GPU. It still keep the returned gltf object like any JS data until any reference is gone.
If you really worried about it, you can just remove new material creation in gltf loader script itself.
But it’s overkill imo.
Thanks for the answer that’s what I was thinking too but I’m getting paranoid about performances every bit of optimization is good to take especially on mobile.
The thing that got me thinking is that a lot of Webgl sites out there uses json instead of GLB which to me doesn’t make any sense since GLB is much lighter but I was thinking maybe I am the one in the wrong and using json let you declare the correct materials right away without needing to replace it at runtime.
The performance cost of encoding your mesh and texture data in JSON is pretty high — binary is much more efficient. By contrast, the cost of replacing a few materials is almost zero. You could patch GLTFloader to avoid that — or use its extension API to assign toon materials — but honestly I wouldn’t worry about it. We’re probably talking about small fractions of a millisecond per material during loadout, and no per-frame cost after that.
You could also just omit materials from the GLB entirely. GLTFLoader will assign one default material to everything, in that case.