What is a shader graph in Unity?
Unity is widely known for its numerous resources for interactive game development. One such feature that significantly enhances the graphics experience is the shader graph. The shader graphs work as visual editing tool that helps to build shaders visually, instead of writing code.
What is a shader?
A shader is a type of software used in 3D computer graphics. It determines how the properties of a 3D model (or surface) react to lights, shadows, reflections, textures, and color. In simple terms, shaders are the programs that determine how an object looks in your game.
What is a shader graph?
The shader graph is a feature that provides a visual editor for creating complex shaders. It uses nodes that are connected together to create a flowchart-like representation of the shader functionality.
It is an intuitive method for creating shaders as it allows you to visualize the components and the flow of the shader code. With shader graph, you can create and experiment with complex visual effects without having to write any code.
Why use shader graph?
Shader graph provides a much easier way to create shaders as compared to the traditional shader coding.
Instead of having to write complex lines of code, you can visualize the operations in a node-based graph.
It provides an instant feedback and allows for much quicker and efficient development of shaders.
Components of shader graph
The shader graph includes several important components, some of them are explained below.
Nodes: Nodes represent mathematical operations or functions in the shader graph. They are the building blocks for creating a shader. Each node performs a specific operation and returns a result.
Edges: Edges are the lines that connect nodes together. They show the flow of data from one node to another.
Blackboard: The blackboard is a panel where you can add properties to your shader, such as color, texture, or a slider value. These properties can be used within your shader to change the appearance of your material in real-time.
Note: You can simply drag and drop the node in the blackboard to make it a property.
Main preview: The main preview window shows the current state of your shader. It updates in real-time as you make changes to your shader graph.
Types of nodes in a shader graph
Some of the commonly used types of nodes are discussed below.
Input node: It is used to add data into the shader. Input nodes can refer to different types of data, including texture coordinates, vertex colors, time, and various types of user-defined data. The data obtained from these nodes can then be changed with the help of other nodes.
Some common input nodes include time, position, and UV.
Fragment: It is a master node is where all the operations from the other nodes in the graph are finally collected and outputted. It is the final output of the shader graph.
Artistic node: Artistic nodes are used for high-level, artistic functions that affect the overall aesthetics of the shader.
Artistic functions include:
Contrast: enhances or reduces the contrast of the input
Posterize: reduces the number of color levels of the input
Saturate: clamps all components of the input between 0 and 1
Channel nodes: Channel nodes are responsible for splitting and combining color or vector inputs. They can be used to modify individual components of a color or vector separately.
Split node: takes a color and split it into its red, green, blue, and alpha components
Combine node: reassemble those components back into a color.
Mathematical node: Mathematical nodes allow for the mathematical operations on the data flowing through the graph. It includes basic operations like addition, subtraction, multiplication, and division, as well as more complex operations like sine, cosine, power, and square root.
Procedural node: Procedural nodes allow for the generation of procedural patterns or shapes. Such nodes are particularly useful for creating procedural textures or complex patterns.
Some of the procedural nodes include the Gradient Noise, Voronoi, and Checkerboard nodes.
Utility nodes: Utility nodes provide additional functionality and allow for more complex manipulations within the graph. They include nodes such as:
Lerp: linear interpolation between two inputs based on a third 'alpha' input
Clamp: restricts an input to lie within a specified range
Normalize: scales a vector to have a length of 1
Texture nodes: Texture nodes are used to sample textures and perform operations on them.
Sample texture 2D node: retrieves a pixel color from a 2D texture.
Tiling and Offset node: repeats the texture over the surface of a material.
Color nodes: Color nodes handle the color data within a shader.
Color node: defines a color using RGBA values.
Gradient node: generates a gradient of colors between the specified color keys.
Note: Check the Unity Node Library to get the documentation on each type of node.
How to create and edit a shader graph in Unity
Creating shaders with Unity’s shader graph involves selecting nodes, connecting them, and adjusting their properties. Given below is a detailed guide on how to create and edit shader graphs.
Note: The built-in render pipeline does not support shader graphs.
Set up a shader graph
Ensure that you have the Shader Graph package installed. If not, follow the steps given below.
Go to Window > Package Manager.
Search for Shader Graph in the list of packages.
Click the install button.
Create a shader graph asset
Right click in the Project window
Select Create > Shader > PBR Graph (depending on your needs).
Name your shader graph asset.
Open the shader graph
Double click your shader graph asset in the Project window.
It opens the shader graph in a separate window.
Understand the shader Graph interface
Blackboard: It is on the left-hand side, where you can define properties that you can adjust in the shader in real-time.
Node graph: It is the area where you can create and connect nodes to build your shader.
Add nodes
Right click in the empty node graph area.
Select Create node.
A menu will appear showing all the available nodes.
Search for a node (depending on your needs).
Click on the searched node.
The node will appear in the graph.
Connect the nodes
Click on the output node (the circle on the right side of the node)
Drag the line to the input node (the circle on the left side of another node).
A line will connect these nodes.
Note: You can disconnect the nodes by clicking on the connection line and dragging it away.
Create properties
Click
in the Blackboard area. Select a property type (Color, Texture2D, or Vector1).
Name the property and adjust any settings as needed.
Drag the property from the Blackboard into the node graph.
You should be able to change the inputs of the property in real-time (instead of changing it from the shader graph directly).
Complete the graph
Connect your final nodes to the fragment node to complete your shader.
Save the shader graph.
Apply the shader
Right-clicking in the Project window to create a new Material.
Selecting Create > Material.
Assign the shader graph to the Material by selecting it in the Shader dropdown of the Material.
Select the material.
Adjust any properties of the shader in the inspector window.
Demonstration
Sample project
The sample project shows an animated monkey face which changes the color over time.
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Continue reading
