Wireframe effect with Unity’s Shader Graph
Updated 6 months ago
1.0 K
Wireframe effect with Unity’s Shader Graph
Shader Graph is one of the greatest new feature in newest version of Unity Editor. We can create stunning shader effect without any coding using Shader Graph.
Shader Graph makes it easy to author shaders by enabling you to build them visually. Instead of hand-writing code, you can now create and connect nodes in a graph network.
You may know we have a wireframe shader package (Easy Wireframe Pro) which provide an easy way to add wireframe effect in Unity. As an asset store publisher, we closely keep up with the new features and adding support on Shader Graph in the package. In this article, we will guide you through adding wireframe effect when using Shader Graph to create your own shader.

Getting Start - Setup LWRP and Shader Graph in your project

In order to use Shader Graph, you need to use LWRP (Light Weight Render Pipeline) in your project. The minimum version which support LWRP is Unity 2018.2.x.
1.If you start a new project, create a new project with Light Weight Render Pipeline support. Skip to step 8 if you start a new project.
2.Or, if you already have a project, you need to add Light Weight Render Pipeline from Package Manager. Open Package Manager from menu Window>Package Manager.
3. Select “All” in package selection
4.Select and install packages called “Render Pipeline Core”, “Lightweight Render Pipeline”and “Shader Graph”. Select version 3.0.0 or up for best compatible.
5.Now, you need to setup the project to use Lightweigth Render Pipeline. Create a Lightweigth Pipeline Asset from the create menu.
6.Open Graphics settings from menu Edit>Project Settins>Graphics.
7.Assign the Lightweight Pipeline Asset to the Scriptable Render Pipeline Settings. Now, your project is using Lightweight Render Pipeline
8.Next, install Wireframe Shader Graph Plugin from Tools>Digicrafts>Wireframe>Install Shader Graph Plugin
9.Now the plugin is installed in Shader Graph folder. You are ready to use wireframe in your Shader Graph

Using the wireframe in Shader Graph

Now, you can add wireframe effect to your own shader when using Shader Graph. A “Add Wireframe” node is available to use in Shader Graph to create wireframe effect. I will guide you through the steps to create a simple shader with wireframe effect with Shader Graph.
1.First, create an Unlit Graph from create menu Shader>Unlit Graph.
2. Open the shader in Shader Graph by double click on the file.
3. Right click on the Shader Graph window. Create a node from the node menu Digicrafts>Add Wireframe Transparent (LRWP).
4. Connect the Output1 to the Color port of the Unlit Master node. And Output2 to the Alpha port.
5. Create a Color property in the properties panel. This is use to specify the color of the wire.
6. Create a Vector 1 property to specify the width of the wireframe.
7. Drag and drop the properties to the graph.
8. Connect the port to the wireframe node.
9. Save and compile the graph.
10. Now, the shader is reader to use. You can select from the shader menu.

Using the shader

We need wireframe data in the model/mesh in order to work with the wireframe shader. We already included a script to apply the data automatically.
1.Select the GameObject that need the wireframe effect. Add the script “Mesh Updater Shader Graph” by click on the “Add Component” button.
2. Then, drag and drop the material to your GameObject and apply the effect.
3. Now you should see the wireframe applied.

Download Easy Wireframe Pro

You can download Easy Wireframe Pro from Unity Asset Store with the link below.
Wai Lam Tsang
Director - Owner