ThreeJS OBJMTLLoader optimisation test case
About :
These two demos show how FPS can greatly be improved by refactoring the OBJMTLLoader.
The différence is especially visible on slow devices as smartphone and tablets.
These two demos show how FPS can greatly be improved by refactoring the OBJMTLLoader.
The différence is especially visible on slow devices as smartphone and tablets.
- Try Current OBJMTLLoader (should be slower)
- Try Refactored OBJMTLLoader (should be faster)
Optimisation is done by :
- avoiding new object/mesh creation at each material switch. (reduce memory usage and improve performance)
- reordering the faces, so that faces with same material are draw at the same time, this reduce WebGL calls (NB.: this optimisation could be used in threejs too, not only for OBJ)
- do not duplicate material of MTL file (actually same MTL material are instanciated several times)
Finally this results in lower memory consumption and better FPS. I also found a lot of 3d models that can not run on mobile device without the new loader (too much memory or CPU usage)
- avoiding new object/mesh creation at each material switch. (reduce memory usage and improve performance)
- reordering the faces, so that faces with same material are draw at the same time, this reduce WebGL calls (NB.: this optimisation could be used in threejs too, not only for OBJ)
- do not duplicate material of MTL file (actually same MTL material are instanciated several times)
Finally this results in lower memory consumption and better FPS. I also found a lot of 3d models that can not run on mobile device without the new loader (too much memory or CPU usage)