Google Cloud wanted to explain the vastness of their world wide infrastructure. How their data centers and regions work, and how incredibly close to end users Google Cloud has edge nodes and points-of-presence to enable fast, low-latency access to the Google Cloud backend infrastructure. Complex systems are often hard to describe with words alone, so we decided to map out the entire system and make it tangible by building an interactive world in 3D.

These are our most important learnings.

Overall tech stack

The site is built as a single page app, utilising the History API for navigation and deep linking.

Most of the site’s javascript is authored in TypeScript which, in addition to weeding out common bugs and typos, provided critical refactoring support during the development process.

Various libraries are in use, and without these it would not have been possible to build the site in a reasonable timeframe, so a big THANK YOU to the authors and contributors of these projects:

GSAP for animations and timeline managed animation flows.

Three.js for WebGL rendering and scene graph management.

THREE.BAS for instanced rendering and Vertex shader animations.

Webpack — build tool enabling tight asset management and small deployment sizes through three-shaking etc.

glTF — the 3D asset format we chose to use for packaging our models.

The site is hosted on Google Cloud Platform’s own App Engine (obviously): https://cloud.google.com/appengine/

All 3D models were created in Cinema4D with Blender used for importing/exporting to glTF.

The entire website clocks in at 2.9MB gzipped, 2.22MB without audio.

Setting the scene — Look and feel

We knew we wanted a fairly minimal 3D look with emphasis on subtle greyscale variations as well as a few main colors from the Google Cloud color scheme. The first thing that came to mind was to try and go for a classic ray-traced clay-style with nice beautiful soft shadows, a look well known from architectural renderings. So even before we knew what the final models where gonna be, we started exploring if this was possible.

Enter the troubled developer and the 60 FPS…

Given that render times in Cinema 4D (for this look) way exceeded anything remotely close to real-time rendering, even on a machine equipped with 4 x NVIDIA GTX 1080 Ti graphic cards, it was clear from the start that real Ray Tracing was not a viable approach for something that would eventually need to run on just a regular consumer laptop, newer smartphones etc.

From previous projects we’ve learned that this is often the case when moving from 3D software like Cinema 4D into the browser. What we often do is to try and explore different visual styles through renderings from Cinema 4D and then figure out how to recreate or mimic that look in WebGL. It’s a back-and-forth process, and while it’s time-consuming it’s also what makes it fun to develop these kinds of projects.

It’s not always clear just where we’re gonna end up.

Shaders and anti aliasing (AA)

The clay look trough Ray Tracing is mostly defined trough the soft shadows and light bouncing around multiple times to pick up the colors of the materials they bounce off of. Light bouncing multiple times is computationally very costly and so we quickly focused on getting the shadows right, foregoing true Ray Tracing.

We explored adding Ambient Occlusion using a shader pass known as Screen Space Ambient Occlusion (SSAO) — however once again it led to another trade-off. When setting up post-processing shaders in Three.js, it’s done by setting up a new offscreen render target making the browsers built in anti aliasing unavailable.

Having lost anti aliasing we looked at ways to bring back the sharp straight lines. So we explored adding custom anti aliasing shaders, like the FXAA shader suggested in this issue: https://github.com/mrdoob/three.js/issues/568.

While it enabled us to disable the browsers’ built in anti aliasing — giving quite a performance boost — the custom anti aliasing shaders weren’t quite up to par quality-wise with the browsers built in anti aliasing.

Given that the site and models are very minimalistic — almost to the point of looking like vector graphics — any low-res shadows or aliased lines stood out quite glaringly as opposed to a more complex/colorful 3D scene where the eye has a tendency not to focus so much on these little imperfections in render quality.