6x9 Virtual Reality WebGL website

The Challenge

To promote The Guardian’s VR Google Cardboard experience and encourage users to try the app for themselves, a website was needed to explain the project and promote it.

The site needed to highlight the innovative aspects of the project and the unique use of 3D graphics to tell a serious story.

Solution

Having access to the art assets of the virtual reality experience gave me the ability to recreate a prison cell in the browser using three.js and WebGL.

I reduced the polygon count of the 3D assets using Blender and tweaked the UV textures for optimal performance.

I wanted to achieve a cinematic feel, so I included a number of shaders that added film grain, chromatic aberration, and vignetting to give the image a traditional filmic look.

Because this was not a standard site design, using the usual 2D design process would not be effective. I created a real-time editor that allowed me to work closely with the creative director and edit the scene interactively. With this tool, we adjusted the camera positions, tweaked animation timings, and refined shader values.

WebGl editor screenshot
WebGL animation editor

Performance monitoring was also essential, and the editor included a frame rate monitor graph. I was able to keep an eye on performance across all devices thanks to the monitor.

The site had a great launch, encouraging people to install the app while also encouraging users to read more about the individuals featured in the story.

Project skills