![Hero background image](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2Fd96875062b3094228aa1883c9c33051df43e94d3-1920x1080.jpg&w=3840&q=100)
![The Chase](/_next/image?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2Fz5r9XY5YwuM%2Fhqdefault.jpg&w=3840&q=75)
How we made it
The Chase introduces a futuristic landscape which two characters power through on gravity-defying hover bikes. Their desperate, exhilarating ride hints at a deeper backstory of conflict and passion.
Here’s how we brought it to life.
![The Chase character shot](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2F390a65091efb8ce843b174e09c85f055f53377e2-810x455.jpg&w=3840&q=75)
Characters
Extreme character detail
As with all character-driven stories, the devil’s in the detail. That’s why we created each character with a whopping 40,000 vertices. This is an extraordinarily high polycount for characters, even by current-gen console and PC game standards. Each character’s face and body have multiple 2048x2048 textures for skin color, reflectivity, normal maps, etc.
Realistic skin
Did you notice the characters’ skin? We achieved exceptional realism by implementing sub-surface scattering (SSS) skin shaders which blur incoming lighting in screen-space, a process also known as screen space diffusion. We took a lot of what we learned in The Butterfly Effect and optimized it for mobile GPUs.
We accounted for energy conservation and the Fresnel effect when calculating lighting on dynamic objects and used Beckmann distribution for the specular component for both skin and metals.
To bring lustre to the hover bike’s metallic paint and other reflective surfaces we adapted the skin system for use with low-diffuse materials.
Instead of using full screen post processing to achieve bloom, we piggybacked our screen space diffusion approach and evaluated diffuse skin components blooming directly in the skin shader. This allowed us to achieve the desired effect at minimal cost.
![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2Fc64d8737c67f44baf8fb4d19529f689e696bcfaa-782x440.jpg&w=3840&q=75)
Lighting
Linear space lighting approximation
Pretty much all modern console or PC games do gamma correction, however many mobile GPUs still do not support automatic gamma corrected (sRGB) reads and writes. To emulate sRGB we used gamma of 2 which allowed us to use square (multiplication with self) and square root operations which are much faster than calculating the power of 2.2, for example. We only corrected for skin pixels and for the crucial skin-shading third pass.
![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2F9b91944d3f9136d7c4b6a10c08f09b2d1be6f569-1920x1200.jpg&w=3840&q=75)
Atmospheric scattering
Part of our goal with this demo was to illustrate just how impressive backdrops can be on mobile platforms. To achieve this, we decided to go for a mobile-friendly atmospheric scattering system instead of just using a traditional distance fog. We simulated scattering in the air by taking the angle to the sun and the distance to the object into account. As a result The Chase can deliver an exceptionally large and open viewing environment with the visible object furthest from the camera being four kilometres away.
![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2F0be5759853800481117691f35f25639547a40ae4-1920x1200.jpg&w=3840&q=75)
New lens flare system
Using layers of flares allowed us to achieve a variety of effects such as:
- Anamorphic phenomena: where flares move on the horizontal or vertical axis due to the anamorphic shape of the lens.
- Internal shadowing: where the intensity of the flare is partially culled because of the internal occlusion of the head mount or the lens’ uneven reflectance.
- Light leaking: where the flare’s geometry is stretched at the edge of the screen to simulate a very bright light source outside the frame.
![The Chase scene with track](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2F6488ba90786aa63ea0960342b48627013ed628b2-810x455.jpg&w=3840&q=100)
The Chase is set in an unrealised and distant future, but the techniques used to create it are available in the here and now. If you’re starting out as a mobile developer and you want to learn how to bring high-end graphics to your mobile game, our Practical Guide to Optimization for Mobiles is the place to start.
![The Chase futuristic environment](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ffuvbjjlp%2Fproduction%2F8c967d5736fadcce7a528c057c4e3f2e976a023b-810x455.jpg&w=3840&q=100)
Google used The Chase at their Nexus7 / OpenGL ES 3.0 reveal keynote, and it was widely shown and admired in the SIGGRAPH 2013 demo reels of many leading exhibitors.