Unwind VR Part IV: Savanna Style
This is the final part of a series about the design of UnwindVR.
Unwind VR’s Savanna scene showcases a customised aesthetic developed in-house, achieved by combining elements from watercolour paintings & artistic techniques inspired by line drawing to achieve an interesting style for the use in meditation.
It achieves this effect through the use of customised shaders in order to perform graphical operations on the 3D models in the application.
Line Shader
The outline part of the aesthetic is handled by a third party plugin called Hand-Drawn Shader Pack, by Alastair Aitchison.
The pack contains a number of different shaders to achieve a variety of effects, from pencil, to ink, to crayon and even ballpoint pen cross-hatching.
For our specific use, we make use of the outline parts of the shader pack for most of our needs.
This gives us a fairly basic, but effective way to convey a hand-drawn aesthetic from the objects within the scene.
Due to the varying distance of the terrain features, the terrain, and subsequently the terrain material, is separated into 4 parts:
- Start: The plateau that the user is situated on.
- Near: The closest flat region situated below the plateau, Just before the river bank.
- Far: The area right across the river bank from the ‘near’ terrain.
- Mountain: The mountain ranges that lie beyond the ‘far’ terrain.
Each material is separated out as the outline thickness of the stroke is not consistent with regions further out from the camera. Thus, in order to give a more consistent thickness to the different parts of the terrain, each separated part uses their own material with a customised thickness, depending on the distance away from the user.
Terrain Shader
Due to the stylised approach we are taking with the scene, we are customising the look and the lighting of the terrain heavily.
With the default material, it doesn’t look impressive. But through the use of a custom shader, we have greater control over the stylistic direction we want the terrain to take.
Our custom shader takes input from textures and renders the terrain in a particular way, along with a number of colour properties in order to give us a greater degree of freedom when colour grading the scene & environment.
The texture slots of importance are:
- Ramp: Allows us to customise the lighting falloff through the use of a texture.
- Noise: Generates patches in the lighting falloff, to make it less uniform.
For simplicity, we use a 3-layer cell shading, but with a slight gradient between the gradients in order to avoid a toon shading style.
This results in a interesting shading that is applied onto the terrain, even though the general colours and lighting are far too harsh. This is easily amenable by tweaking the material and lighting settings further.
Also, by further applying a noise texture to vary the lighting of the terrain, we can get both softer and more.
Lighting Ramp
The ramping terrain’s material adjusts the falloff of the shadows cast by the directional light onto the scene, as mentioned before. In the following examples, we use two different maps to interpret how gradual (or sharp) the shadow falloff should be on the terrain.
Cross-Hatching
Another effect we use on the terrain in order to stylise it and to give the impression of being “hand-drawn” is cross-hatching.
Cross-hatching is traditionally a technique that utilises lines drawn at an angle to each other in order to create the illusion of shading in a drawing.
It is an extension of hatching, which focuses more on parallel lines in order to give drawings shading.
An implementation of cross-hatching in Unity already exists, both by Alastair Aitchison (the author of the outline asset we use) and by Kyle Halladay. The links to their blog post about their implementations are provided below:
- Hand Drawn Shaders and Creating Tonal Art Maps by Alastair Aitchison
- Pencil Sketch Effect by Kyle Halladay
Due to the simplicity of Kyle’s implementation, we have decided to use his one. They both reference this paper published by a Microsoft Research team.
The general concept is that we utilise pre-generated Tonal Art Map (or TAM for short) with increasing density. They are then blended together in order to represent the varying lighting intensities. This effect can be seen below.
In a similar vein to the outline effect for the terrain, it is important to have separate materials with an appropriate tiling size, depending on their distance from the user. That way, we are able to keep the cross-hatching at a size that is discernible to the user.
Finishing Touches
In order to achieve our desired result, we layer each effect and make some tweaks as appropriate. For the terrain, we combine the custom lighting effect we’ve applied onto the terrain itself, then layer the cross-hatching over it with a multiply blend in order to ensure the the strokes are layered onto the terrain, but the lighter parts from the cross-hatching are generally ignored.
The remaining parts were directly contributed by the designers of our team, in order to give the final look & feel that we desire from the scene.
Vegetation
One area where the limitations of mobile VR screen resolution was evident was work on the foliage in the scene. Our original intention was to have each plant adopt the hand drawn style seen throughout the rest of the scene.
At first this appeared to be a technical challenge because Unity applies its own specific shader to vegetation placed with the terrain tool. But even after this issue was solved it became readily apparent that outlining foliage wouldn’t work out because the the total amount of vegetation and the large distances it covered meant that even with the higher resolution of a Samsung S7 none of the lines were distinguishable past a certain distance.
An outline shader did work to make the trees in the far plain stand out from the grass and earth but once we started applying it to the grass and reeds it ended up looking like a jumble of black lines. Using realistic grass models didn’t technically match the terrain line-work effect but looked a lot better than we’d anticipated and also better than some of the stylized grass we’d tested before.
Water
The water, like the vegetation, was an aspect of the landscape which suited a blended artistic & realistic rendering techniques. Because we already had styalised the sky we were able to use a slightly refracted mirror without the need to write a shader that would apply lines around the objects it was reflecting. A white line was generated around the edges of the shoreline, representing foaming as the water moves. The water flows slowly which has a calm visual appeal and matched the lapping of water heard in the environmental soundscape.
Skybox
Creating a rich and dreamy sky was an important part of the visual style developed for the scene. We chose to adopt the watercolour aesthetic without using line work on the shadows and edges of the clouds to help create a softer more relaxing look.
To achieve this, we matched a photographic skybox to the scene — ensuring the sun sat neatly between the ridge in the mountain range — and then laid out the 6 sides of the image in photoshop to apply a number of image filters to soften and then create the watercolour texture.
Final Result
