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
- An animated, colorful space nebula
- Dynamic specular refractions, as if inside a dome
- 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.
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.
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.
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.
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.
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.
To create a realistic snow that looks slightly icy and reflects the ambient light of the nebula we use the following in the shader:
- Snow normal map (top left)
- Nebula color, created by rendering a texture with a camera pointing straight up at the sky with nothing else in the scene (top right)
- Noise map (middle left)
- Reflection of a basic gradient to create iciness (middle right)
- Basic lambert lighting (bottom left)
- Final composition (bottom right
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.
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.
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.
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.
