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.
