Discovering the Shader Graph with a Toon Shader

Up until now, in this book, we have focused on shaders written with code. We first saw the legacy way of using Cg for the built-in render pipeline, and we then explored the more recent HLSL-based shader scripting for the new URP.

This knowledge of what goes on under the hood is fundamental if you wish to really make advanced and optimized shaders. However, with the introduction of the Shader Graph tool in the SRP pipelines, non-developers have now started to take a look at shader creation too, and many have joined the community of technical artists to share their own amazing visuals.

So, in this chapter, we are going to explore this second route and discuss the basics of using the Shader Graph by working on a frequent indie aesthetic: toon-shading!

We will do so by covering the following topics:

• What is the Shader Graph?
• Learning the essentials of Shader Graph
• Improving our toon shader

Technical requirements

To try out the samples yourself, you will need to have Unity installed, with a version from 2019 or later. You will then need to create either of the following:

• A project with the common 3D template, which you will then upgrade to use the URP or HDRP render pipelines (see the Stepping up with the URP render pipeline section of Chapter 2)
• A project with the new 3D URP or 3D HDRP template (see the same section for guidance on how to download and pick this template)

You can also find all the code files for this chapter on GitHub, at https://github.com/PacktPublishing/Become-a-Unity-Shaders-Guru/tree/main/Assets/Chapter%2005.

What is the Shader Graph?

To begin with, let’s do a quick review of what the Shader Graph is exactly.

In the next sections, we will see what this tool is useful for and who it can benefit, how we can add it to a Unity project, and how to navigate its interface.

A tool for everyone…or not

As we have mentioned previously in Chapter 2, the Shader Graph is a new node-based shader creation tool Unity added to the engine in 2017, when they added the SRP pipelines. This visual tool was made with multiple goals in mind:

• Ease-of-use: First and foremost, the Shader Graph is meant to be beginner-friendly – in particular, it simplifies the process to allow artists and non-coders from the team to actively participate in the development of the graphics. But it can even be useful for shader developers too because it usually makes prototyping more straightforward and more pleasant.
• Instant feedback: Another key characteristic of the Shader Graph is that it...

Learning the essentials of Shader Graph

This quick introduction to the Shader Graph workflow was nice, but to truly understand how to use all of these new tools, we are going to go through a real example – the creation of a cel-shaded outlined shader.

Although it is not actively developed anymore, the main inspiration for our toon shader will be Unity’s open source project Chop-Chop (available at https://github.com/UnityTechnologies/open-project-1). Figure 5.5 shows a screenshot of what we are aiming for:

Figure 5.5 – Screenshot of Chop-Chop, Unity’s first open source project

In this section, we will first discuss the features we want our shader to have, then implement each in turn: the albedo, the alpha clipping, the emission, and the specular.

An overview of the toon shader

Before diving into the implementation of our shader, let’s quickly list the different features we want it to have. To recreate something...

Improving our toon shader

Up to this point, we have set up the basis of a toon shader to have a custom cel-shading system. To bring it further, we can explore another common feature for cartoon renders, and discuss how to use the Shader Graph tools to organize our graph better.

So, in the following sections, we will add an outline to our shader, and see some interesting techniques to make our shader easier to read and use.

Adding an outline to our shader

Many toon shaders combine the cel-shading with a contour to remind of the aesthetics of comics. This can give your render a nice look, and it is also a good way to highlight the characters, or the important elements in your scene and separate them from the background.

To give you an idea of how it impacts the visual, Figure 5.27 shows what our scene will look like with the new outline feature applied:

Figure 5.27 – Small scene using our toon shader with its new outline feature

To create...

Summary

In this chapter, we discovered how to work with the Shader Graph to create our shaders using a node-based visual editor.

We first explored the main benefits of this alternate workflow compared to the creation of shaders via code and then detailed the Shader Graph editor interface.

Then, we worked on a practical example and created a toon shader inspired by the one in Unity’s first open source project, Chop-Chop. This allowed us to learn how to use Sub Graphs to make our logic modular and easy to read, how to do basic texture sampling and color tinting, and how to compute more advanced values, such as lighting contribution, thanks to custom HLSL functions. We also took advantage of the technique of ramp shading to turn our smooth color gradients into sharp color transitions to produce a cel-shaded look in our renders.

In the last section, we introduced the notion of a scriptable render feature to provide our URP with more features and used this tool to add an...

Going further

If you’re curious about Shader Graph or implementing custom lighting in URP (especially toon shading), here are a few interesting resources to check out or continue your journey from:

• Shader Graph:
  • Intro to Shader Graph, Cyanilux (2021): https://www.cyanilux.com/tutorials/intro-to-shader-graph/
  • How To Use All 200+ Nodes in Unity Shader Graph, D. Ilett (2021): https://www.youtube.com/watch?v=84A1FcQt9v4
  • Unity Shader Graph Introduction - Basic Shader Graph Tutorial, Game Dev Bill (2020): https://www.youtube.com/watch?v=FLVNfBQgeQc
  • Shader Graph fundamentals in Unity, PabloMakes (2021): https://www.youtube.com/watch?v=nDsTBk6eano
• Custom (toon) shading:
  • Custom Lighting in Unity URP Shader Graph! Ready for Toony Lights! 2021.1 | Game Dev Tutorial, Ned Makes Games (2021): https://www.youtube.com/watch?v=GQyCPaThQnA
  • Making a Zelda-style Cel Shading Effect in Unity Shader Graph, D. Ilett (2021): https://www.youtube.com/watch?v=lUmRJRrZfGc
  • Unlocking The Power Of Unity...

The rest of the chapter is locked