Interactive 3D Cards for Revolut iOS App
Article Summary
Igor Dudenkov from Revolut reveals how they built interactive 3D metal cards in iOS—without touching OpenGL or Metal frameworks. The secret? Apple's high-level SceneKit framework that made photorealistic card rendering accessible.
When Revolut launched their Metal card (carved from 18g of stainless steel), designers wanted users to feel the texture and weight through the app. The iOS team built a 3D card visualization system using SceneKit, physically-based rendering, and HDRI lightmaps to create realistic metal surfaces that respond to user gestures.
Key Takeaways
- Used SceneKit's physically-based shading with metalness and roughness textures for realism
- HDRI lightmap replaced directional lights, working across all card designs
- Disposable virtual cards clone nodes instead of swapping materials for better performance
- Pan gesture recognition drives smooth card rotation with custom timing functions
Revolut achieved photorealistic 3D card rendering in iOS by leveraging SceneKit's node-based framework and physically-based materials, avoiding the complexity of low-level graphics APIs.
About This Article
Revolut's lighting setup used directional lights from the left, right, and top. Each card design needed its light intensity manually adjusted, which made the approach hard to maintain when working with multiple card types.
Igor Dudenkov's team switched to an HDRI lightmap with spherical projection. The lightmap is a single image where the width is twice the height. This provided realistic environmental lighting that worked the same way across all card designs without extra tweaking.
The HDRI lightmap removed the need to adjust lighting settings for each card type. One lighting setup now renders Metal cards and other card types consistently without any additional parameter changes.