At Revolut we put customer experience at the heart of everything we do, with the aim of bringing pleasure through simple designs and careful execution. You can probably imagine our excitement, then, as we introduce an update to our card order flow. In the latest version of the Revolut app, you’ll be able to choose your card from an interactive 3D model.

This was an interesting challenge for us since it was our first time using a 3D physics-based engine to create a feature. We think it turned out pretty well!

Entering the card order section of the app, you’ll be able to choose from two materials — plastic and metal. From there you’ll be able to choose a color, and whether you want Visa or Mastercard (depending on your country).

The new card order flow

Let’s take a look at how we reached this milestone, and explore some of the challenges along the way.

Rendering

Where to begin? First, we tried taking a GLSurfaceView, creating our own Renderer and drawing the card using OpenGL ES. But this approach has some drawbacks:

Not all mobile developers are familiar with OpenGL, meaning more time spent on training and problems with sustainability

Android supports OpenGL ES 3.1 already but still has a terrible API. The result? Lots of boilerplate, mathematics and hair pulling

So we thought we’d find a better solution. A bit of searching led us to a few options:

min3d — is a lightweight 3d library/framework for Android using Java with OpenGL ES targeting compatibility with Android v1.5/OpenGL ES 1.0 and higher. Plus, min3d has a better API, but was built in 2010 and is no longer supported

Libgdx — is a fully Java game development framework. It provides a lot of features but it’s too large for a FinTech application that wants only to rotate a 3D card

Filament — is a real-time physics-based rendering engine for Android, iOS, Windows, Linux, macOS, and WASM/WebGL. It provides a set of tools and APIs for developers to help them easily create high-quality 2D and 3D rendering. You can render incredible images with it, and we highly recommend having a play with it.

Filament is currently used in the Sceneform library which together with ARCore, helps to render realistic 3D scenes in AR and non-AR apps, without having to learn OpenGL. Let’s give it a try!