Displaying complex 3D models performantly on mobile devices requires pushing WebGL to its limits. In this article, I share the optimization strategies we applied while developing a mobile CAD viewer with Three.js.
Draw Call Reduction
Mobile GPUs can handle far fewer draw calls compared to their desktop counterparts. Using mesh merging, instanced rendering, and geometry atlas techniques, we reduced draw calls from 2000 to 150. This alone increased FPS by 300%.
Memory Management
WebGL context loss is a common issue on mobile browsers. Through texture atlas usage, geometry LOD (Level of Detail) systems, and aggressive garbage collection strategies, we reduced memory consumption by 60%.
Progressive Loading
We developed a streaming system that loads large CAD files in chunks. While the user rotates the model, details load in the background. The first meaningful render completes in 1.2 seconds — a significant improvement considering full model loading takes 8 seconds.
Shader Optimization
Custom lightweight shaders written for mobile devices offer 45% faster render times compared to standard MeshStandardMaterial. Precision qualifiers and branching minimization play a critical role here.