Tag Archives: shaders

Achieving a dreamlike look using shader effects in Unity Pro.

After shaders were addedLast weekend I released a set of screenshots for a work in progress I had been using as a rest from serious game development after the crunch of Indie Speedrun. The scenes featured an ethereal look and cold visuals that I achieved by experimenting with Unity Pro’s shaders. The screenshots proved popular, so I’d like to show you how I created the effect.

before shaders were added

This is the scene with no post processing whatsoever. We have a mountain, some basic cube geometry and a plain, white diffuse material covering everything. Direct and indirect lighting cast by two directional lights with a small contribution from ambient lighting.

The shaders

Depth of field

depth of field shader settingsA great starting point is the Depth of Field shader (DOF), so we’ll add that first. Depth of Field simulates camera focus, blurring objects closer or farther away than the focal plane. Modern DOF is a powerful effect and can even shape the blur into specific distortions, such as Bokeh.

The fuzziness and lack of contrast make it difficult to make out shapes in the distance, keeping them a mystery until you approach. These are important themes we’ll be trying to reinforce throughout this post: mystery, dreams and unreality.

effect of the depth of field shader

Bloom

bloom shader settingsThe second most popular shader would definitely be the bloom shader. The bloom shader has the strongest effect on the dreamlike state surrounding the player. For those who don’t know, a bloom shader thresholds the scene – setting all pixels below a certain brightness value to black. The resulting image is blurred and added back to the scene. The result is that the light parts get lighter, and bleed over into the darker parts, making them glow slightly.

Because – once again – we’re not aiming for reality, I cranked up the bloom. Another motivation for the strong glow is that I wanted to reinforce that the player is on a mountain, and if you’ve skied you’ll know that the snow can reflect the sun so brightly you need sunglasses.

effect of the bloom shader

Tone mapping

tone mapping shader settingsReally bright, right? Too bright in fact, but it’s fine. We want to keep the bleeding effect of the light, but dull the brightness. So time to bring in some tone mapping! Tone mapping is an effect that takes pixels and tries to keep them within a specific range (essentially it maps brightness levels so that they fit from high dynamic range to low dynamic range). What this means is that the brightest values will still be white, but the shader will restrict those other bled-out values to the normal spectrum. This is great because this means we still get the bleeding effect, but the scene isn’t as washed out as before.

effect of the tone mapping shader

Colour correction

colour correction shader settingsIt’s a lovely look already, and in fact many people won’t want to apply the next step, and I can understand. That step is colour correction. Colour correction applies curves to the colour values to intensify or mute reds, greens or blues in their highlights or their shadows. I opted to leave the red and green channels untouched but strengthen the blue in the shadows. This had the effect of giving everything a slightly warmer purple hint, and makes it feel more like a dream. On the other hand this also makes the scene warmer, so some caution is advised.

effect of the colour correction shader

Ambient occlusion

Ambient occlusion shader settingsAlready we have a good-looking, dreamlike scene, but there are still a couple of final tweaks to go to finish it off. Firstly, let’s add some screen-space ambient occlusion (ambient obscurance in Unity). Ambient occlusion uses normal data to guess the amount of light that could possible hit a pixel, regardless of light direction. It’s used to darken corners and shade parts that should receive less indirect light than others. It’s amazing how much depth it adds to a scene, and if you can afford to use it, I would certainly recommend it.

The effect of ambient occlusion shader

As you can see here, the mountains particularly have benefitted from it,

Vignette and chromatic aberration

vignette shader settingsThe last global effect that sets everything off is a vignette and chromatic aberration filter. Vignetting darkens the corners of the screen, forcing the player to focus towards the center. This increases a sense of depth, and is a bonus to the depth of field shader too. The depth of field shader assumes the focal point is at the center of the screen, so if the player is looking anywhere else they might encounter the blurring where there should be focus. By vignetting, the player’s eye is drawn back to the center, where the focus will always be. Additionally the vignetting makes the center of the scene feel brighter due to the contrast with the corners.

Chromatic aberration is a fun technique that I think makes the scene stand out as a dream or hallucination. With chromatic aberration enabled, the pixels towards the edge of the screen have their colour bands separated, resulting in red, green and blue distinct bands on the edges of objects. It’s difficult to explain, but easy to see for yourself.

effect of the vignette shader

It’s easiest to see in the top left corner of the image. The large cube’s top edge has a distinct red highlight to it.

Sun shafts

sun shaft shader settingsThe last shader to add is sun shafts. While I am often wary about – and warn people away from –  sun shafts (they’re a gimmick, they’re overused and on a clear day they’re unrealistic) in this situation they boost the theme. They conceal details and wash everything with a heavenly glow. This is exactly the sort of look we’re going for.

effect of the sun shafts shader

I’ve had to go for a different angle because the directional lighting comes from behind the player in the normal shots.

Shader order

The order in which the shaders are applied is crucial to achieving this effect. For example, any shaders applied after tone mapping will only be able to work with the low dynamic range spectrum of values. Additionally it would be unwise to apply ambient occlusion after you’ve blurred everything. The order I apply these shaders is as follows:

  1. Ambient Occlusion
  2. Depth of Field
  3. Bloom
  4. Tone Mapping
  5. Colour Correction
  6. Sun Shafts
  7. Vignetting and Chromatic Aberration

There have been questions wondering why sun shafts came after tone mapping and colour correction and not before. Ordinarily this would make more sense, as then the sun shafts can take advantage of the high dynamic colour range too, and can be mapped along with the rest of the scene, but with the strong colour correction I’m applying the result is a very dull and foggy looking sunshaft.

Sun shafts rendered before tone mapping Sun shafts with my settings

 

 

 

 

 

 

So there you have it, this should be enough information for you to make your own dreamy scenes. I hope you’ve found this helpful!

complex complex2 complex3 complex4 mountainapproach mountains mountaintop theend