How can I create my own "Toon" shader?

Hello everyone.

I’ve been using a toon shader available in Unity for a long time. I recently decided to make a vfx that will make enemies disappear when they die, but I realized that for this I need access to the toon shader. Since I don’t have access to Unity’s toon shader, I need to make my own shader.

What I want to do is slightly different from the toon shader tutorials I can find on the internet. I’m posting exactly what I want to do below. I created this image below in Blender. It was very easy to do in Blender, but when I had to do it in Unity, I had a lot of difficulty. I would be very grateful if you could help me or suggest some resources.

  • The shader I will make should also be able to work with hand painted textures.

  • I am using a URP project.

  • The shader will be Unlit.

Also, I don’t know how to code shaders. Whenever I need to make vfx I use shader graph. Do you think I should learn to code, or do I have to know how to code to make this particular shader I want?

1 Like

Toon Shading - The EASIEST WAY! Unity3D URP Shadergraph Tutorial - YouTube this seems to be really similar + it’s in ShaderGraph so you don’t have to code.

For making it work with textures, you just have to multiply output of that entire things that connects to base color with texture sample

1 Like

I will try this tutorial. Thank you for taking the time to answer. :smiley:

2 Likes

Manus offered a great tutorial. Shadergraph and the use of the Fresnel node is the way to go. There is also an old school way we used to use on Playstation where you can duplicate the model geo, scale it up a bit larger, reverse the faces, and add a material that is the color you want for the line.

The result is a larger model that you can see through the front of, but the back side shows up as the linework. This will only work for an outline, not interior lines.

3 Likes

From a more general tech side there are 2 effects that go into ‘toon’ shading, one is that the light is posterized (basically turning a smooth gradient into those bands) and the second is outlines. I don’t think learning to code is necessary, but if you want to, the posterization would happen in the light shader where it would probably be easiest to multiply the light vector by a small value (2-5) then round/floor/ceil it and finally divide it by the first value; it should look something akin to this: floor(LIGHT * 3.0)/3.0. Edge detection/ outlines are a bit more complicated, but you have a few options, the easiest edge detection algorithm if you dont like to code is called the ‘difference of gaussians’ which basically takes an input texture (in this case you should do this to both the depth texture if it’s available and the scene normal texture, I am not sure how to do this in unity but I’m sure it is possible) and applies 2 Gaussian blurs to them, each with a different size of kernel (sometimes just ‘k’) and subtracts the two results together. If you want more control and are willing to put in the work a better option would be a Sobel Filter, which can even give you a direction in the lines which allows you to do some cool artistic stuff, but it’s a bit advanced. Here is a much better explanation of the difference of gaussians This is the Difference of Gaussians - YouTube, and here is a good video for how a sobel works Finding the Edges (Sobel Operator) - Computerphile - YouTube

2 Likes

This is the first time I’ve heard of this method, it sounds really interesting.

1 Like