Outline shader in Unity, Toon shader?

Hello everyone, welcome back.

Today's post is about simple outline shader. For this, I am using Unity 2023.1 but it will work on any Unity LTS versions and I have a project setup in URP.

Now with that out of the way let's dive into the topic.



Basics

To get the outline we will basically render our geometry 2 time. Let's say we want outlines on cube, so we will render cubes 2 times.

We want to render one of our cube slightly bigger than the other, then we will tell unity to only render the back faces of our outline cube, and just like that we would have outlines.

Creating shader graph

Let's create a shader graph so Right click > create > shader graph > URP > and Unlit shader graph.

You can of course use lit shader as well but I want my outlines to not react to the lights so I chose Unlit.

Let's call it OutlineShader.

Let's also create a material for that so keep our shader selected,

Right click > create > material.

Let's call it Outline. and assign it to our cube.

In our shader graph, we want to scale our mesh and we will do it from the inspector so let's create a float property.

Call it OutlineThickness and drag it in.

To scale our mesh we will use a Position node, it will return position of every vertices of our mesh.

We want the position in object space so select object space from the dropdown.

Then we will multiply Position node with our OutlineThickness.

What we are doing here is, let's say we have a quad with scale 1, 1, 1. So  in Position node we will get position of every vertex.



To scale it we are multiplying it with our OutlineThickness, so if I set the OutlineThickness to 2 we will get the new position of vertices and our mesh will be scaled accordingly.



Now if I directly feed the Multiply node's output in Vertex context's Position block.



In the scene view, we can control the scale or our mesh by adjusting our OutlineThickness.

In the shader graph, we also want to control the color of our outline so you guessed it.

Let's create a Color property, call it OutlineColor, Give some default color, drag it in and feed it into BaseColor block.



Now we only want to render the back faces of our mesh so In the Graph settings, set the Render face to Back, and that's if for our shader.



In the scene view, let's also add original material to our cube, and we have nice outline.

Now notice that the Unity is giving a warning that "Multiple materials is applied on the same mesh and it will cost performance, consider using multiple shader passes"



But as far as I know, none of the scriptable render pipelines are supporting multi pass shader graph currently.

Is it a Toon shader?

Now I have added Toon shader in the title so let's talk about it a bit. Have we just created toon shader?

The answer is no, we have created simple outline shader, Toon shaders are much more than just simple outlines.

Outlines are one of the features of toon shaders along with 3 colors shading, rim lighting, highlights, normal settings, metcap settings etc.

Games like Dragon ball z franchise and Naruto ninja storm franchise are the games where you can see the actual toon shader in effect.

If you want that sort of look in your projects, Unity has a toon shader to do that, It is still in experimental or let's say preview phase but check it out if you are interested.

That's all for today.

Trouble following along? Check out this video!


Thank you so much for reading!

Comments