8ff3d636-6172-5188-80ef-517c24b5c977:6udFvAlfFjsjj7eis1aYIt

Creating the Graph and First Nodes

Building on the Graph

Blending Textures Together

Adding Color and Connecting the Shader

Conclusion

Introduction to ShaderGraph - 2019.3

In previous versions of Unity, the only way to create specialized Materials was to program a custom shader or use an outside plugin. With the release of 2018, Unity now has its own native Shader Graph, which can be used to build visually complex Materials using nodes.

Unlike the process of writing code, saving, compiling, and testing in the Editor, the Shader Graph shows you what’s happening to the Material in real-time, allowing you to make changes and experiment on the fly.

Games

Film

Automotive

Shadergraph

If you are using Unity 2018.1, click here.

1. In the Project window, create a new folder named “Shader Graph”.

2. Right-click in the Project window and from the Create flyout, navigate to Shader and select Unlit Graph. A new Shader Graph will be generated in the Project window 
(Figure 01). 

3. Name the new Shader Graph “CheckerShader”.

4. Double-click on CheckerShader to open the Shader Graph window.

5. Dock the Shader Graph window behind the Project window.

6. Right-click or press the spacebar in the work area, and select Create Node (Figure 02).

 7. At the top of the Create Node window, search for 2D and select Texture 2D Asset (Figure 03). 

8. Repeat this process for Sample Texture 2D (Figure 04).

9. In the texture slot at the bottom of the Texture2D Asset, click the Radio button and search for the desired texture.

10. Left-click and drag the Out(T) circle in the middle of the Texture2D Asset to pull out a connector line.

11. Drag the connector to the Sample Texture 2D Texture(T) input (Figure 05). 

Figure 01: The Unlit Graph setting in the Shader flyout

Figure 02: Creating a node

Figure 03: Texture 2D and Sample Texture2D in the Create Node window

Figure 04: Both nodes in the work area

Figure 05: The Texture 2D Asset node connected to the Sample Texture 2D node

1. Left-click and drag in the work area across the two nodes to select them both.

2. Press CTRL + D (Windows) or Command + D (MacOS) to duplicate them. Move them below the other two nodes.

3. In the second Texture2D Asset Node, search for and apply a secondary texture to blend with, like a Gradient texture (Figure 06). 

5. Create a new Node, this time selecting Tiling and Offset.

6. Drag the Tiling and Offset Out(2) node to the Checker Sample 2D node.

7. Set the Tiling and Offset Tiling(2) input node to 3 in X and Y (Figure 07). 

Figure 06: The duplicate nodes with new gradient texture applied

Figure 07: Adding the Tiling and Offset Node

2. Drag the A(1) output of the Checker Sample 2D Node to the A(1) Divide Node input.

3. Set the Divide Node’s B(1) X input to 20 (Figure 08). 

5. Connect the Divide Out(1) output to the first Blend Base(1) input.

6. Connect the Gradient Sample Texture2D A(1) output to the second Blend Base(1) input (Figure 09). 

Figure 08: The Divide Node with the alpha channel of the Checker Sample Texture 2D added and divided by 20

Figure 09: Divide and Gradient Sample Texture 2D added to Blend

2. Set the Color Node to a bright cyan and the mode to HDR.

4. Connect the RGBA(4) output of the first Sample Texture2D Node to the first Base(4) Node of the new Blend.

5. Connect the Color Nodes Out(4) output to the Blends second Base(4) (Figure 10). 

6. Set the Blend Nodes Mode to Darken (Figure 11). 

7. Drag the Blue Blend Nodes Out(4) output to the Unlit Masters Color(3) input.

8. Drag the Gradient Blend Nodes Out(4) output to the Unlit Masters Alpha(1) input.

9. Hit the Cog in the top right of the Unlit Master node and set the Surface to Transparent. 

10. In the upper-left corner of the Shader Graph window, click Save Asset (Figure 12). 

Figure 10: The color node set to Cyan and HDR

Figure 11: The configured second Blend Node

Figure 12: The completed shader

Shader Graphs are incredibly powerful and can become highly complex. There are numerous Nodes to choose from. Now that you know the basics of how to create Shader Graphs, experiment by creating your own. 

Introduction to ShaderGraph - 2019.3

1. Creating the Graph and First Nodes

2. Building on the Graph

3. Blending Textures Together

4. Adding Color and Connecting the Shader

5. Conclusion

Complete this tutorial