Toon shader survey
Everybody loves a nice toon shader. They give this timeless magic look that doesn't rely on realism nor fancy lightning.
For the past weeks I've going trough many iterations in my search for the uber shader, here I bring you my findings. From implementation details to aesthetic choices, there is a vast array of decisions you'll have to take. Here's a (non-exhaustive) list of them.
All references and implementations are done in Unity, but are easily transferable to other engines. This is not a tutorial on how to implement a toon shader, more of a collection of toon shader tutorials and references.
Ramp texture vs Step
The essence of toon shaders is how they apply the light. By grouping the light into bands they provide that characteristic look. There are two main ways of doing this.
N · L to sample a ramp texture, or
step function to band the light.
Both of these are roughly equivalent, with the ramp texture giving more control at a slightly higher cost, while the step is slightly cheaper, but can only do proportional bands.
Unlit vs Lit
Whether you have none or a ton, lights are crucial for the look of your game. Unity standard assets has an unlit toon shader, it simply uses a cubemap to light the object. It is pretty good, as it looks like there is a static light while there may be none.
Ronja has a tutorial with support for multiple lights, it is a bit more complex, but you could get even more fancy if you wish to support things like vertex lights or Spherical Harmonics.
Metallic objects have another source of light, specular, that's when the light reflects "straight" to you eyes. I had never thought of doing specular lighting in a toon shader until I saw Roystan's tutorial.
Turns out it can look pretty good on metallic objects.
Rim light looks really nice. If it fits the aesthetic, try using it. I followed Roystan tutorial for that.
Sometimes you don't want your shadows to be pitch black. Ronja
shows how to use the Emission property of surface shaders to have a shadow color.
If your shader is not a surface shader (for example if you are doing the unlit
version), you could always do something like multiplying the shadow color by
the inverse of
N · L.
You could also set the shadow color using the environmental light.
We have arrived to the extras, rendering an outline is such a common effect on toon shaders that it comes with the Unity standard assets. It simply adds a pass where only the backface triangles are rendered, while also displacing them along the normals.
This one is a bit different from outline, I read it from Harry Alisavakis, the result being similar to the last one, but it uses the camera dept hand normals texture.
This one is a bit finnicky, it took me some time to adapt this from a screen image effect, and I'm not 100% happy with the result. Roystan also has an edge detection post process tutorial, but I haven't tried that one.
I admit it. When I'm doing models prototype them with vertex colors. I should probably use textures, but for quick drafts inside unity, this method is so much faster. So I tend to add support for using the vertex color as part of the final color.
This is optional, like everything else, put this behind a
just be aware, the method for getting the vertex color is different in vertex
and surface shaders.
Putting it all together
Using these two (lit & unlit) "uber" shaders I did this.
There are no textures here, just a point light, and the shaders (Can you spot where the unlit material is used?). I also have a bit of fog and light flickering.
If you wish to grab the shaders, I put them in a gist. I also encourage you to experiment and improve on them.
That all for today, thanks for reading this tutorial. And if you want more, follow me at @alvarber.