Beginner Friendly Shader Graph Tutorial

Here I will tell you my steps to create an interactive game object using mouse position and Shader Graph shader in Unity. It is a shader with moving stripes. Using a script the closer the mouse to object, the faster the stripes will move downwards.

I am an absolute beginner to shader graph but made my way to create this simple project. To be an initial source for my future implementations and maybe helping people on their projects I wrote this tutorial.

Starters

In the beginning, create your project with a render pipeline. I tried to add LWRP to my initial project, but couldn’t make it work. That’s why I created a new project. Mine is a simple project, so I chose Lightweight RP.

If Shader Graph not included in your project packages, Window -> Package Manager -> Install Shader Graph.

Creating The Shader

1 — First the shader needs to be created. Right-click to Project folder -> Create -> Shader -> PBR Graph.

2 — Double click and shader is opened in Shader Graph.

3 — Let’s add a base color to the object which can later be changed in the inspector. Click plus sign in shader’s window and select the color you want. Then drag the node to the graph. Connect it with the Albedo input of the master node. Now we have a base color.

4 — The shader needs a texture. From Project window, drag your texture scene. Add a Multiply node to graph and connect RGB output of the texture and the color to this node. Connect the output of Multiply node with Albedo input of the master node. A single stripe can be seen from the preview.

5 — To increase the count of the texture, we need tiling. Add a Tiling And Offset node to the graph, connect its output to UV input of Texture node. When Y value of its Tiling input increased the repetition of stripes increases. I gave a value of 14 you can increase it however much you want. Now, there are multiple stripes generated.

6 — The last step is to move the sprites. Let’s add another property to our shader to control its speed from a script. Click on the plus sign on shader window, select Vector1. Since its value will be changed from the script contrary to Color, giving it a readable reference is important. It is _Speed in our case. Create a Time node and drag and drop the Speed property node to the scene. Time is used to have a constantly moving texture, with speed its movement speed is controlled. To enable this correlation again a Multiply node is used. Connect Time node’s Time output and Speed node to Multiply node’s inputs. Textures are moved by their Offset value so the output of Multiply node goes to Offset input of Tiling And Offset node.

7 — To save the changes made in the shader window, click Save Asset.

8 — Here is a side by side property information from the inspector and Shader Graph. Simply, the references are how the value of shaders can be called from the script.

9 — To apply a shader to a material, open the material in the inspector. Click on shader dropdown and chose the shader.

10 — Apply the material to the target object. There are many ways of applying a material to target. In this case, move the material from Project window onto the object.

At the end of these steps, we have a game object with moving stripes.

Change Shader Value from Script

To increase the interactivity and the challenge a little bit, let’s change speed value linearly to mouse distance to object.

This script takes the material publicly from the inspector and changes the speed of stripes which we set the reference of _Speed from code. Since the distance is calculated in screenspace I added an offset divider to reduce step size.

There are glitches but when the mouse moves relative to the game object, speed value changes.

There also is a problem with using this material on cubes, when you apply it to a cube stripes move differently in each face. I am working on a tutorial that fixes it by fixing object UVs and applying two materials to the same game object using ProBuilder.

This has been my first personal project for the new year. I am happy that I started with something that I have been wanting to try out by myself for so long. I hope it answers some of your questions on Shader Graph development in Unity. If you find some parts unclear please do not hesitate to ask.

Have fun tweaking!

Originally published at http://devsplorer.wordpress.com on January 11, 2020.