Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Introduction to ShaderGraph
Introduction: ShaderGraph, a programmable rendering pipeline tool, has been released since the 2018 release of Unity, which allows you to create and edit shaders through visual interface drag and drop.
Official words:
The Shader Graph enables you to intuitively build shaders. Instead of writing code, you create and connect nodes in the graphical framework. Shader Graph provides immediate feedback on your changes and is easy for users unfamiliar with Shader creation.
Shader Graph is only compatible with scriptable rendering pipelines (SRPS), namely high Definition Rendering pipelines (HDRP) and Universal Rendering pipelines (URP). Both SRPS are available in Unity 2018.1 and later. The traditional built-in rendering pipeline does not support Shader Graph.
Shader Graph is based on a programmable pipeline, a way of programming a visual Shader through a node Graph. With this we don’t have to write a lot of code, don’t have to worry about syntax and error debugging.
Version: A version later than Unity2019.1 is recommended.
ShaderGraph import
2.1 Import of existing projects
Click “Windows” –> “Package Manager” –> “Shader Graph” –> “Install”, click and wait for import to complete:
Similarly, click on Package Manager -> “Lightweight RP” then click “Install” to import and wait for the import to complete:
2.2 Importing a specified version
To add plug-ins in 2.1, only the latest version can be imported. To import a specific version, use the following method: Open the project directory, find the manifest.json file in the Package Manager folder, open it and add: (Note to specify the correct version)
"Com. Unity. Render - pipelines. Lightweight" : "7.5.3", "com. Unity. Shadergraph" : "7.5.3."Copy the code
2.3 New project introduction
Selecting LWRP or HDRP will automatically ship with the plugin, and Unity has already done the engineering base configuration for us.
ShaderGraph configuration
If you are creating a project in the form of 2.3 New Project above, the following configuration is not required
3.1 Basic Settings
“Asset” –> “Create” –> “Universal Render Popeline” –> “Pipeline Asset(Forward Renderer)” Create URP render pipeline configuration
After version 2019.3, Unity renamed the lightweight rendering pipeline LWRP to the Universal rendering pipeline URP.So although we import a “Lightweight RP” package above, we create a “Universal Render Pipeline” :
Set the URP Render Pipeline configuration to “Edit” –> “Project Setting” –> “Graphics” –> “Scriptable Render Pipeline Settings” as shown below:
3.2 Creating the ShaderGraph example
Right click the “Project” panel – > “Create” – > “Shader” – > “Unlit Graph”; We can now see that the Shader panel has several options with the suffix Graph:
Let’s create an “Unlit Graph” to see what it looks like:
“Double clicking” opens the editable panel where we created the “Unlit Shader Graph” :
3.3 Usage instructions of several types
PBR Graph (Physically based Rendering) is used to make physically based shaders that can be used for metal or mirror effects, etc. **Unlit Graph: ** Shader **Sub Graph: ** is used to make the Shader **Sub Graph: **, similar to the function in our code, will have an Output (i.e., return) to Output the value. We can customize the type and number of output by setting.
The ShaderGraph panel
4.1 Introduction to the editable panel
For ease of operation, this edit panel supports multiple opening and copying nodes directly from other panels
- Master node: Determines the final connection of the shader output: (All nodes must be calculated to be connected to the master node before they can be applied)
- Preview screen: Right click here to rotate, scale, and replace mesh at will:
- Blackboard: An area that contains all shader properties in a single collection view. Add, delete, rename and sort using Blackboard :(create properties and drag them into the main edit space to form editable public properties on the material ball)
- Create Node: Right-click in the blank area –> “Create Node” –> select the Node to be created: (Select, search to find the Node to use, there are many child nodes, slowly accumulated during the use process)
- Edit node: create a “Color” node, right-click on the node, you can see the operation information of copy, delete and so on
- Connect the node: Click the “Out” output on the right of the node and drag it to the corresponding input:
4.2 Resize the Preview Box
The preview box is too large to occupy too much space, and it is difficult to see the effect of the hidden switch, then we can adjust its size a little bit smaller. Operation method: move the mouse to the lower right corner of the preview box and drag it when the adjustable arrow appears.
5.3 Node Group Classification
When we use a lot of nodes, we need to sort them out, both to make the view cleaner and to save and reuse the whole group. You can create a Group as follows: Right-click a node and select Group Selection to customize the name. Deleting groups is also easy: Select a group, right-click it and select Delete (remember to select the group, otherwise you may Delete the group and all its elements).
Five, use ShaderGraph
5.1 Create UnlitGraph and create map nodes
Right click the “Project” panel – > “Create” – > “Shader” – > “Unlit Graph”; See 3.2 above for detailed diagrams of the creation steps.
Double-click on the created “Unlit Graph” to open the edit screen, right-click on the blank area and choose “Create Node” –> Search box to search for “Texture”. Click Create Sample Texture 2D:
5.2 Assign a value to the map node and connect it to the master node
Drag the output of the Texture node to the input of the master node:
Assign to the Texture :(click on origin to select Texture as with the other components)
5.3 Save and use ShaderGraph
Save by clicking “Save Asset” in the upper left corner of the panel
Then create the material sphere and specify its Shader as the “UnlitShaderGraph” you just saved :(drag and drop assignments directly)
Finally create a Cube in the scene and specify its material sphere as newly created :(you can also drag and drop assignments directly)
This completes the entire Shader process from creation to application
5.4 Expose properties to be edited on the material sphere
As you may have noticed, the position of the texture ball used in the image above cannot be changed:
Now we expose the texture properties as externally modifiable.
Click on the + from the Blackboard panel, add the “Texture 2D” property, then drag it to the blank edit area, and finally connect its output node to the Texture input node:
Click “Save Asset” in the upper right corner to Save and click on the texture ball again to see that the texture position is empty and modifiable:
Six, ShaderGraph summary
This article provides a brief introduction to ShaderGraph, the engineering configuration required to use ShaderGraph, and the operation of ShaderGraph’s edit panel. Finally, a simple example is used to explain the overall process.
Prerequisites to use ShaderGraph:
- Import the ShaderGraph plug-in
- Import URP(General Render pipeline) or HDRP(High Definition Render pipeline)
- Create Pipeline Assets and configure them into the Graphics panel
With that done, you’re happy to use ShaderGraph.