Creating Custom Shaders
This doc goes into how to make custom shaders using the Unity Shader Graph...
The Standard Unity shader is what is most commonly used to display materials on your asset. It includes the most common options such as a base color, diffuse, normal, metallic and smoothness textures, as well as other things such as emission, tiling, and offset.
It is possible to make custom shaders in Unity to have more control over how your materials look on an asset. You can animate textures or create them procedurally, you can create interesting and unique effects that work depending on the scene itself. In some more advanced cases you can even modify the asset itself.
You can create the custom Shaders in tools such as the Unity Shader Graph, Amplify, or Shader Forge. The Unity Shader Graph is included with Unity however and easy to setup.
Installing the Unity Shader Graph
The first thing you will need to do is install the Unity Shader Graph from the Package Manager.
Go to the Package Manager window.
If it is not visible, you can go to 'Window / Package Manager'.
At the top left, make sure that 'Packages : Unity Registry' is selected.
Scroll down to 'Shader Graph' package, or use the top right Search bar to search for 'Shader Graph'.
Select the Shader Graph package, and select 'Install' at the top right of the window.
Creating a Unity Shader Graph Shader
A common thing to do is to create a 'Shaders' folder in your Assets folder, but this is not compulsory.
Right click in the Project window and go to 'Create > Shader Graph > Built in > Lit Shader Graph OR Unlit shader graph'.
Lit Shader Graph will use standard lighting approaches.
Unlit Shader Graph will result in a completely bright texture and doesn't use any lighting information from the scene. These are more performant.
Select the new Shader and select 'Open Shader Editor' in the Inspector, or double click on the Shader itself.
Using the Unity Shader Graph
From here you have access to all the functionality of a node based Shader graph. Of course, there is so much you can do with shaders! And there are plenty of resources online for more advanced custom shaders, but lets look at the basics.
Creating a Simple Color Shader
All nodes in a default Unity Shader Graph will not be able to be edited in the material unless you allow them to be. This is known as exposing the property such as making a color or number be able to be modified when you select the material, through to choosing which texture is used on different material types such as Diffuse, Normal, or Smoothness to name a few.
Let's make a simple shader with custom elements.
Right click in the Project window, and select 'Create > Material' to create a new Material. By default this will use the 'Standard' Shader which you can see at the top of the Material in the Inspector window. We will update this after we have created our shader.
Right click in the Project window and go to 'Create > Shader Graph > Built in > Lit Shader Graph.
Select the Shader and select 'Open Shader Editor' in the Inspector, or double click on the Shader itself.
At the top left is a window panel, this is called the Blackboard.
The Blackboard can be turned on and off at the top right of the window.
Click the '+' symbol in the Blackboard to create a new property to expose. In this case, lets create a color property, and rename it 'Base Color'.
Connect the property by dragging from the node to the 'Base Color' property under the 'Fragment' section.
Select 'Save Asset' at the top right. you will need to do this every time you want to update your material.
Go to the new Material you created, at the top of the Material in the Inspector click on 'Standard' and select 'Shader Graphs > [NameOfYourShader]'.
Adjust your exposed property as you see fit!
With Metallic and Smoothness you can use a single number to adjust them, but lets use a slider to make that easier to use.
Go back to the Shader graph.
Add two float properties in the Blackboard. One for Metallic, and one for Smoothness.
Drag them into the graph.
Select each property and set the 'Mode' pulldown to slider, rather than Default.
It is possible to adjust the minimum and maximum properties, but not needed in this case.
Drag the edge of each node to their respective property under 'Fragment'.
Save the asset, and you can see the properties available to be edited in the top right.
Adding Textures as Properties
Another common property in materials is textures. Let's update our shader to include textures instead of simple color and sliders. You could start a new shader if you would prefer.
Go back to the Shader graph. Delete the previous properties in the Shader graph if you are updating your previous material by selecting them and press Delete key, or right click on each and select 'Delete'.
Add three 'Texture 2D' properties into the Blackboard. 'Diffuse', 'Normal', and 'Smoothness'.
Drag them into the Shader Graph.
In the graph, right click and select 'Add Node' or simply hit space.
Type in 'Sample' in the search bar, and double click the 'Sample Texture 2D' to add it.
This is required to pass the texture property into the final result.
Duplicate or copy the 'Sample Texture 2D' node so that you have three, one for each property.
You can use Ctrl + C and Ctrl + V to copy and paste nodes.
You can use Ctrl + D to duplicate nodes.
Connect your properties to their 'Sample Texture 2D' nodes, and then connect the 'Sample Texture 2D' nodes to the final properties under the Fragment section.
You will need to make sure that your Normal map is setup correctly, otherwise the normal will look broken. Select the Normal map 'Sample Texture 2D' node and change the 'Type' from 'Default' to 'Normal'.
Save your asset and close the shader graph.
Update your material with the new Shader if you created a new one.
Drag and drop the respective textures into the properties in the material. You can also click on the 'Select' button on each texture if you like.
Drag and drop the material on your target asset!
Creating a Scrolling texture shader
Of course, Shader graph allows for a near endless range of effects using all the nodes it has access to. One example is a simple scrolling texture and make a water effect.
First, you'll need a water texture, it could be realistic, toon shaded, or any other texture you may want to have scrolling in one direction. Do note that the direction will depend on how the asset has its UVs unwrapped. The default Unity cube can work for the purposes of this tutorial.
Add a default unity cube to your scene by right clicking in the Project window (not the hierarchy) and go to '3D Object / Cube'.
Create a unique material for it that we can add our new Shader after we create it.
Create a new Shader Graph shader and add the texture properties and Sample texture nodes.
Follow the previous shader example or update that shader if you like.
Add a 'Float' property to the Blackboard and call it 'Scroll Speed'.
Set the Scroll Speed default between 0.5 - 1 by default in the Node Settings panel at the top right.
We may want to adjust the speed of the scroll in the material, we could also use this in Reactor for interesting interactive results.
Select 'Add Node' and search for the 'Time' and 'Multiply' Nodes.
We need to multiply our Scroll Speed number by time to use for our scrolling effect.
Don't forget you need to double click on the node to add it.
You should have something like the following :
Add a 'Tiling and Offset' Node to the graph.
Offset represents the placement of the texture in the UV space, or where it appears on the polygons. This is basically the same elements as the Tiling and Offset that comes with the Unity Standard Shader.
Connect the Multiply node to the Offset parameter.
Connect the Tiling and Offset Out property to the UV of your 'Sample Texture 2D' Node.
Note how you can collapse a lot of nodes so that it doesn't show the graphic. You can do this with the arrow at the top of the graphic.
It is also possible to have one node connect to more than one property such as using the scroll speed to affect the diffuse, normal, and smoothness.
If the scrolling effect does not work as soon as you connect it, make sure that your Scroll Speed float parameter actually has a number in it by default, otherwise it will be 0, which will not scroll.
You will note that this scrolls in a diagonal direction, which is maybe not what you want. This is because the scroll speed is being applied to both the U and V directions, rather than just one. So lets look at limiting this to one direction.
Add a Vector 2 node between the Multiply and Tiling and Offset nodes.
Connect the Multiply to the first Vector if you want the scroll to go left, or the second Vector if you want the scroll to go down.
If you want it to go the other way, you can use a 'One Minus' node to invert the vector 2 result.
The result should look like the following :
If you created an asset with specific UV unwrapping, you could then have this one shader create a flowing river or curving conveyor belt to name just a couple.
Other Resources
There are tons of tutorials out there on the Unity Shader graph on YouTube and the web to create some amazing results with custom shaders. It all depends on what you are trying to do.
Last updated
