Toon Shader

Toon Shader
Toon Shader

Create an UnLit shader graph as we are going to create our own lighting model called Cell shading or Toon shading.

Cell Shading

The toon shading effect is achieved by rendering lighting to abruptly change at regular distances. Let’s examine how it is done.

According to the diffuse lighting model, we can calculate the shading due to light by taking the dot product of the light direction towards the object’s surface and the normal vector of the surface. I am doing a ‘Negate’ operation to the ‘Main light direction’ as the default direction is from the object’s surface to the light but we want the vector in the reverse direction.

Multiply and add by 0.5 in order to shift the lighting range from -1,1 to 0, 1.

To get the cell shading effect, we need to scale to a higher range and apply the ‘Floor’ function to it. Here I am multiplying it by 5, to increase the range, then applying the ‘Floor’ function, and then dividing by the same scale value 5.

You can change the number of cells by changing the scalar value 5.

Now multiply the final output with your desired color using the ‘Color’ node.

Specular Reflection

According to the Phong specular lighting model, we should do a Dot product between the camera view direction and the reflected light. To get the reflected light vector, we have the ‘Reflection’ node which needs the input of the Normal vector and the light vector.

Saturate the output, raise it to the power of K (some constant), and round to achieve the toon specular highlight effect.

Finally, add both the cell shading and specular highlight outputs and assign to the ‘Base Color’ of the Fragment shader.