Building 3D Animations in Mobile Apps
Article Summary
Yağız Gürgül from Wise Engineering reveals how they shipped interactive 3D animations in their mobile app—and crushed a 324 MB asset bundle down to just 3.7 MB. The secret? A clever web-based approach that delivers 60-120 FPS without going native.
When Wise launched their bold new 3D brand illustrations in 2023, the design team wanted them interactive and alive in the mobile app. The engineering team faced a massive challenge: the original 3D models totaled 324 MB, far too large for a mobile bundle. They chose three.js in WebGL-powered web views over native solutions, then embarked on an aggressive optimization journey.
Key Takeaways
- Removed duplicate textures across glTF files, cutting size from 324 MB to 98.4 MB
- Compressed textures aggressively, reducing bundle further to just 5.2 MB
- Applied Google's Draco compression to geometry, reaching final 3.7 MB (99% reduction)
- Pre-load and cache scenes in memory to eliminate load delays
- Gyroscope data enables device-responsive 3D rotation at 60-120 FPS
Wise reduced their 3D mobile assets by 99% (324 MB to 3.7 MB) while maintaining smooth 60-120 FPS performance using three.js in web views instead of native rendering.
About This Article
Wise's 3D models were built for static illustrations with high polygon counts. The glTF files, like the plane model, each reached 19.3 MB, which was too large for mobile app bundles without being optimized first.
Yağız Gürgül's team set up three automated optimizations. They extracted and deduplicated embedded textures across glTF files, compressed textures to favor performance, and used Google's Draco library to compress geometry data.
The mobile bundle shrank from 324 MB to 3.7 MB, a 99% reduction. The app maintained 60-120 FPS performance through WebGL rendering and could load scenes instantly by pre-caching them in memory.