Three.js WebGL Mobile Optimization:
Achieving Locked 60–120 FPS on Mobile Devices
An exhaustive engineering deep-dive into running hardware-accelerated 3D WebGL scenes on mobile smartphones. Covers dynamic pixel ratio throttling, IntersectionObserver canvas pausing, Google DRACO mesh compression, and Lenis smooth scroll synchronization.
Core Performance Rules for Production WebGL:
- DPR Clamping: Never use unrestricted window.devicePixelRatio on high-DPI screens (clamp to 1.5–1.75).
- Offscreen Throttling: Pause requestAnimationFrame when canvas scrolls out of viewport.
- DRACO & KTX2: Compress geometry by 85%+ and use GPU-native texture compression.
1. The High-DPI Mobile Bottleneck: Device Pixel Ratio Clamping
Modern flagship smartphones (iPhones and high-end Androids) feature Super Retina displays with physical device pixel ratios (DPR) of 3.0 or higher. If a developer naively calls `renderer.setPixelRatio(window.devicePixelRatio)`, the GPU is forced to shade 9x the number of pixels compared to standard 1080p, resulting in thermal throttling, battery drain, and dropped frames.
// Production DPR Clamping Algorithm
const isMobile = window.innerWidth < 768;
const maxDPR = isMobile ? 1.5 : 2.0;
renderer.setPixelRatio(Math.min(window.devicePixelRatio, maxDPR));2. Geometry & Texture Streaming: DRACO Compression
Raw GLTF models exported from Blender or Maya frequently contain redundant vertex normal floats, high-poly bevels, and uncompressed 4K PNG textures that total 30MB–80MB. Over a 4G mobile network in India, downloading an uncompressed model introduces a 10-second blocking delay.
By integrating Google DRACO decompression in Three.js (`DRACOLoader`), mesh vertex positions and normals are quantized into compact integer representations. A 24MB raw architectural model compiles down to 1.8MB, streaming over mobile connections in under 600ms.
3. Battle-Tested in Production: BioPrac & NEOVRIT
We deployed these exact WebGL optimization techniques across our client flagships:
- • BioPrac: Features procedural GPU fog shaders and circular arc kinematics maintaining locked 60 FPS on iOS and Android viewports. Read the BioPrac Three.js Case Study.
- • Dream Heights: Renders an entire gated luxury residential community in 3D with Day/Night lighting and floorplan hotspots. Read the Dream Heights 3D Case Study.
Gurdharam Jeet Singh
Founder & Lead AI Architect at Gurdharam AI Engineering. Leading a CS engineering squad building direct Meta Cloud API WhatsApp bots, Indic Voice AI calling agents (Sarvam AI), edge computer vision models (TFLite/Flutter), and 3D WebGL platforms for clients globally.
Commission a 3D WebGL Platform for Your Brand
From interactive Three.js product viewports (₹12,000) to full architectural digital twins (₹20,000). Delivered in 5 to 14 days.