# How did we build 3D animations in mobile apps?

DevFeed: [How did we build 3D animations in mobile apps?](<https://devfeed.tech/articles/how-did-we-build-3d-animations-in-mobile-apps-15453.md>)

Original publisher: [Read original article](<https://medium.com/wise-engineering/how-did-we-build-3d-animations-in-mobile-apps-515c3de87b74?source=rss----f2565bbe9c46---4>)

Author: Yağız Gürgül

Published: 2025-01-29T16:59:35Z

Content type: tutorial

Language: en

Sources: [Wise Engineering - Medium](<https://devfeed.tech/sources/wise-engineering-medium.md>)

Topics: [Three.js](<https://devfeed.tech/topics/threejs.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [animation](<https://devfeed.tech/tags/animation.md>), [gltf](<https://devfeed.tech/tags/gltf.md>), [html](<https://devfeed.tech/tags/html.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [optimisation](<https://devfeed.tech/tags/optimisation.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

## AI overview

Wise describes how it brought its 3D illustrations to life as interactive real-time animations in mobile apps. The team chose three.js scenes rendered in local HTML files inside mobile app web views, using WebGL for both iOS and Android, and then optimized large glTF assets for mobile delivery.

## Source excerpt

In March 2023, Wise launched its new brand -- as part of it, we introduced a collection of bold new 3D illustrations. While visually stunning, our brand team had bigger ambitions to bring them to life and elevate Wise further. This took us on a journey to understand the technical landscape and challenges around creating a seamless multi-platform solution for interactive 3D animations. interactive 3D intro on Wise iOS appThe new illustration set in Wise Our new illustration set took inspiration from icons, allowing us to communicate with a global audience. They're unique, bold and dynamic, even when still. They give us opportunities to share moments of delight with our customers and help our brand stand out from billboard to button. check out https://wise.design/ for more! What sets illustrations at Wise apart is that they're not static. Each one is paired with a crafted 3D model, featuring detailed UV maps, precise shading, and carefully designed lighting. This raises an exciting question: What if we rendered these illustrations dynamically in real time, making them interactive on mobile apps? Native or web view? To render illustrations in real time, we explored several technical solutions: Native Filament three.js We opted to create 3D scenes using three.js, one of the most popular open-source web projects. Some of the reasons behind this include: Managing native solutions for iOS and Android platforms would demand extra engineering effort. The support and documentation available for three.js surpass others. The web view solution delivers native-like performance by using WebGL on both platforms. As a result, we consistently achieve 60/120 FPS across all scenes on both devices. The plan was simple. Build simple HTML files that render 3D scenes and load these files locally in mobile apps 🚀 But we had a "huge" problem... The 3D models were specifically designed for static illustrations, resulting in a high polygon count that contributes to larger file sizes. For instance