Enabling users to choose from four different natural disasters, the website provided a chilling perspective of the effects severe weather conditions could have on our planet. Obtaining a user’s real-world coordinates, we were able to pull a 360° view of the user’s intended location from the Google’s Street View Image API.

The 360° environment image was treated with a combination of custom-made, post-process effects, particles, and 3D assets to create a series of weather effects contextual to the film. These effects were placed in a WebGL environment that the user could interact with using their mouse or touch controls.

Typing an Address

We fetch the 360° view of the location from the Google Street View Image API, and start processing in the background.

Stall while processing

We ask the user to complete a small interaction while the image is being processed.

Process the image

We process the image against a sky segmentation algorith to extract the sky and clouds. We also run a couple of feather operations to smooth out the result. We then compose the scene with custom made 2D and 3D assets, as well as weather effects.

Effects

We used a combination of 3D and 2D particle effects, as well as custom built Post Processeing shaders. We also used RGB based frame sequences to achieve variety without bloating the experience with large files.

Examples