Hatching Shader in Unity

Posted on by spiderlili Posted in Technical Art, tutorials

Shader Inktober study with Tonal Art Maps (TAMs): animated pen and ink hatching effect

The outline effect is achieved with two shader passes: The first pass translates the object’s vertices outwards along their normals, Front culling is used so only the inner faces of the outline are shown. In the second pass, the actual object with the hatching effect is rendered using back culling.

The hatching effect is based on the non-photorealistic rendering method presented by Praun et al: “Real-Time Hatching” from Princeton Graphics Group. The paper can be found on: http://hhoppe.com/hatching.pdf

A C# script is used to animate the hatching effect by setting the UV’s tiling factor to a random value.

A set of 6 TAM(Tonal Art Maps) with varying stroke properties – length, frequency and size – is required to simulate different diffuse reflection under various lighting conditions, from dark to bright.

  1. Calculate diffuse per-vertex lighting in the vertex shader.
  2. Use the lighting’s NdotL value and if else statements to determine the hatching TAM’s weighting value.
  3. Use the weighting value to blend with the sampled results of the TAMs.
  4. Sample each TAM and multiply the results with their corresponding blending weight value.
  5. Multiply the final TAM colour value with the model’s tint colour value and shadow attenuation.

Ideas for Improvements

  • More “imperfect” outlines and animations would work well with this kind of hand-drawn aesthetic. The outline’s thickness currently look too uniform, artists often vary the thickness of outlines in their 2D drawing to convey dimension. One solution would be painting vertex alpha and use this value to vary the outline’s thickness via the shader. Do more research how games like Guilty Gear X achieve a stylised look – they gave an interesting GDC talk about “The X Factor Between 2D and 3D”: https://www.youtube.com/watch?v=yhGjCzxJV3E
  • Make an automated seamless TAM generation tool to save time and manual work.
  • Texture optimisation: reduce the number of texture sampling operations for TAM by storing 6 TAM in the RGB channels of two textures.
  • Use a more advanced lighting model which includes specular reflections and multiple light sources for better visual results.