Campfire VR
by Markus Neuy and Dirk Krause
tl;dr: We created this.
We also throw in an animated GIF if you read the whole article.
Introduction
In our previous article we showed a way to approach the transfomation of shaders from Shadertoy to Three.js. Shader usage is not limited to WebGL, but can contribute largely to the quality of WebVR scenes. In this article we show one approach to implement shaders in the aspiring WebVR library A-Frame.
This way we are able to create scenes suitable for new virtual reality browser concepts like SuperMedium.
We started by jotting down ideas for a scene that could resemble some form of pleasant virtual meetup — like a Campfire. We weren’t the first to have this idea, as the impressions by Bigscreen VR show.
Models
To create a scene, you need models, so we decided to create them in Google Blocks. Blocks makes it easy to create low poly models in VR that can be used in A-Frame.
In our experience these models should be post processed in a regular 3D Software (in our case Blender). By this you can reset the y-coordinates of the models to Zero, correct overlappings by boolean operations and save them to glTF 2.0 which seems to be the new standard.
We created these models:
- Trees https://poly.google.com/view/1pZ1ar0BrC-
- Tiny Stones https://poly.google.com/view/5gwvK2P4rIY
- Stump https://poly.google.com/view/8j3cwLxpZWd
- Stone https://poly.google.com/view/7fCClIBQ6SJ
- Grass https://poly.google.com/view/98TDFeXqqll
- Fireplace https://poly.google.com/view/1jdHdS5PUvG
Basic Scene
Now we can start to shape the scene in A-Frame, by initializing an HTML file with the A-Frame lib and two empty entities as anchors for the fireplace and other objects.
The result is a white screen which isn’t too impressive but will do for now.
Inserting the models
Lets load the appropriate models for the surroundings by adding them to the ressources in the assets section and reference to them in the scene. The ground is a simple grey plane which will be best to interact with the light later on. Now we have:
A landscape begins to take shape.
Ambient light
Next up is an ambient light, a simple moon and the sky. The saturated purple of the ground now proves that our campfire happens at night. Also, we need the reference ID of the moon in a moment.
Post-processing
We introduce the first shader to enhance the visual impression of the moon. To achieve this we use WizGrav’s A-Frame Effects library. After including the library in the header we are able to create a bloom and ‘god ray’ effect for the moon.
Skyshader
We added stars via a very simple shader by Shadertoy user dmmn which is called Star Field. The problem with it is that it actually doesn’t map the stars correctly to the sky sphere, but it’s good enough if the density of the stars is low. So we left improvements as an exercise for the reader. ;-)
Campfire, more lights and a fire shader
Campfire scenes need a campfire, so we’ll create one by adding the pit, a pointlight and the flames like so:
We chose to create a low poly fire with a shader which we will add via an A-Frame component. This component creates triangles from vertices with random position, direction and offset; number and size of the triangles can be controlled via parameters. The material of this component consists of a vertex shader introducing a jigsaw movement for the y-axis and a sine for x and z. The fragment shader controls transparency by height and color bei perimeter. The added component uses 500 triangles to achieve the fire effect.
Shadows
The scene contains all of our models now but there is still room for improvement; the light of the fire seems very static and the ground ends apruptly.
To fix the lighting we animate the light and furthermore introduce shadows. Shadows contribute really well to the atmosphere of a scene but also come with a price; to avoid perfomance issues we only add it to the bigger models.
Endless
An easy way to fix the problem with ground is to blend ground and sky at the horizon.
For that we determine the color of the ground plane at the horizon and adapt the lower color of the sky shader, so that there is a seamless transition indicating endlessness.
Sound
An important element for immersiveness in VR is audio, especially ambient sounds in the background. We introduced two loops of sounds for the wind in the trees and for the crackling fire by adding them to the assets. One of the many great things about A-Frame (and Three.js) is that audio can be positioned in 3D space, so we are able to hear the fire crackles from the right direction. It is important that the audio loops are not too loud and long enough to not to be to repetitive and thus annoying.
Summary
As we can see, we are able to create atmospheric scenarios with A-Frame.
Using optimized VR-Browsers like SuperMedium or the new Firefox (see the announcement here) we are able to create stunning VR experiences for the open web.
You can find the demo here and the Github repository here.
