TL; DR
Vision Run is an advergame made to sell glasses; its main challenge was, at the time where phones were nowhere as powerful as they now are, to make it run on lower end hardware without a terrible frame rate.
It took a lot of engineering to optimize this web-based game, playable above, with several web and GLSL hacks to achieve a very lightweight 3D experience.
About the game
Vision Run was an Advergame made in a few months for glasses-makers Essilor and Optic 2000, through the marketing agency Isobar.
The pitch was to make a Runner game that would mimic a virtual reality experience to advertise the different types of Essilor glasses and their effects on vision impairments.
The player would run in a desert and try to avoid obstacles while being confronted to different visual effects, that can be negated by switching glasses.
The game was made voluntarily easy to complete, since finishing it would provide the opportunity to participate in the registration to a lottery to win prizes.
My work on the project
The constraints were for this game to work on low-end devices and on the web, in 3D, without the need for downloading anything.
I decided to use ThreeJS , since it was the most popular option for WebGL development at the time.
A great deal of Optimization went into the game in order to make it run smoothly across a wide range of devices, including old android tablets and iPads.
To make the game super small to download and super efficient on screen, the assets were processed and batched together to reduce draw calls, and the map was randomized using heightmaps for which each canal was used for a different piece of data : Red would provide height, while Blue would provide color hue on a pre-defined gradient. Being on the web, having those in PNG format provided automatic compression for that data.
The loading phase at the beginning of the game is actually just for show, to introduce the “High tech” feeling of the virtual world, but we actually don’t need that much time to load the game.
Some heavy effects, like depth of field blur, were implemented in GLSL using a few performance hacks. For instance, blur effect has been obtained by combining the normal render with a second off-screen render of the scene, but in much smaller resolution and light blurring on that smaller image, then using the graphic’s card built-in bilinear filter to scale it back up and profit from that extra blurry effect, to achieve less accurate but much more efficient blurring. Finally, the two images were re-combined using the depth buffer as the delimiter.
I’m very proud of that overall achievement, given the visible simplicity of the game but the amount of backstage engineering it took to make it work.
You can try it just at the start of this page, if you have a few minutes to lose 😉!