Neve: WebGL and VR

Neve is a small 3D WebGL ThreeJS experiment developed over 4 days for Christmas Experiments 2015. The concept is centered around a modern snow globe; an interactive scene that exists in your browser and VR that elicits a feeling of comfort and wonder, like standing in a snow-covered field under the aurora borealis.

Space Background

The background of the scene consists of 3 elements

  1. An animated, colorful space nebula
  2. Dynamic specular refractions, as if inside a dome
  3. A 3D field of static stars

To create the nebula, we used a simple sphere that encompasses the scene. A custom shader featuring simplex 3D noise allowed us to create a pattern that felt very organic in its movement.

Noise shader without color

From there we creates differing hue values along the X axis of the sphere’s geometry and offset them based on a time variable to create the final composite.

Final nebula background

To create the specular refractions, we created a skybox with 6 images of painted specular spots. The skybox is refracted through a sphere geometry with a low opacity and additive blending, compositing it onto the nebula colors.

Isolated specular refraction
Painted specular images used in the skybox

The final element of the sky is a cluster of stars. In a particle shader, we use two textures; a smaller white circle in the center and a larger outer glare that is colored. The color comes from the below texture (left) by using the X and Y co-ordinates of the particle to map to a UV co-ordinate on the color texture.

Left: Textures used to create the stars / Right: Final output of stars

Snow

The snow is comprised of a flat plane whose vertices are disturbed on the Y-axis based on a simplex noise calculation. Every frame the calculation input is shifted slightly to create the illusion of a flowing landscape.

Snow Wireframe

To allow users to interact with the snow, we cast a ray in the 3D scene to see if the user’s 2D mouse/touch position is intersecting the snow geometry. If it is, we draw on a 2D canvas in the position that relates to the interaction point. The 2D canvas is then passed into the snow’s vertex shader in order to disturb nearby vertices.

Snow interaction

To create a realistic snow that looks slightly icy and reflects the ambient light of the nebula we use the following in the shader:

  1. Snow normal map (top left)
  2. Nebula color, created by rendering a texture with a camera pointing straight up at the sky with nothing else in the scene (top right)
  3. Noise map (middle left)
  4. Reflection of a basic gradient to create iciness (middle right)
  5. Basic lambert lighting (bottom left)
  6. Final composition (bottom right
Separated steps to create the final snow shader
Final snow composite with all steps

Post-Processing

We wanted to finish off with a whimsical feel using Tilt Shift blur to make the scene feel like a tiny model, as if it was inside a handheld globe.

With (left) and without (right) post processing

In some cases, such as on older mobile devices, performance didn’t allow for post processing. In order to ensure a smooth experience on all devices we use a timer during the render process and if it takes longer than the allotted amount of time to render we disable post processing entirely.

Mobile

A primary focus for every project and experiment is the performance on mobile and Neve is no exception. Our internal framework, Hydra, makes developing for mobile easy and even automates many tasks.

The experience performs silky smooth on mobile and on newer devices such as iPhone 6S it runs all the same effects and processing as a desktop browser.

Apple TV

With some extra time over the Christmas break, we were able to get Neve up and running as an Apple TV app in about 2 hours. Swiping on the remote pans/zooms the camera and the exact same code that runs in the browser on desktop and mobile also powers the app.

VR

With VR as one of the hottest new technologies, we wanted to use WebVR and Google Cardboard to put a user directly into our snow globe.

Camera perspective for VR

In VR the story is slightly different. The user is placed in the center of the field of snow and after looking around, lifts up and floats through space circling the terrain.

Rendering with WebVR and Oculus Rift

On mobile phones, a Google Cardboard icon appears and will load the experience in Cardboard mode. Similarly, if a PC has an Oculus Rift setup it can be rendered fully in WebVR.

Rendering on an iPhone 6S inside Google Cardboard

Questions?

Twitter @michaeltheory