Create Shader for STYLY with ShaderGraph in Unity


I am going to explain how to create a shader with ShaderGraph in Unity2018 and rewrite it for Unity2017.4.

Although ShaderGraph itself cannot be uploaded to STYLY, you can upload it to STYLY by converting it into the shader code for Unity2017.4.


About ShaderGraph

ShaderGraph is a node-based Shader editor, which allows you to create a shader visually.


Please refer to the document in Unity Official Site for details.
There are similar tools such as Amplify Shader Editor, Shader Forge, but I leave out the details of them this time.

System requirement for ShaderGraph

ShaderGraph requires Unity2018.3 or later.


Samples of ShaderGraph


Installation of ShaderGraph

I explain how to install Unity 2018.3 and ShaderGraph here.


Install Unity2018.3

This time, we install Unity2018.3 by using Unity Hub.

You can skip this section if you already have Unity2018.3 or later installed.


Firstly, download Unity Hub from the URL shown below and install it.


Install Unity2018.3 from Unity Hub

Click the Download button of Unity2018.3 or later



Select ‘Done’ to start downloading and installing


Create Unity project

After installing Unity2018.3 or later, create a Unity project.

Please note that the Unity project you create here is not the Unity project for STYLY (Unity2017.4.0f1).

You only use this Unity project to create data for ShaderGrapgh.


Select Unity2018.3 or later from UnityHub to create a new Unity project.

Install ShaderGraph by PackageManager

Package Managerを起動

Launch Package Manager


It displays the list of the packages, but ShaderGrapgh is hidden by default.

So click ‘Advanced’ and select ‘Show preview package’.


Click ‘Advanced’


Install ‘ShaderGraph’ and ‘Render-Pipeline.Lightweight’.

Install ‘ShaderGraph’ and ‘Render-Pipeline.Lightweight’

Register Lightweight RP with Unity

Finally, you need to register ‘Lightweight Render Pipeline’ with Unity.


Create the ‘Lightweight Render Pipeline’ asset

Select ‘Create > Rendering > Lightweight Render Pipeline Asset’ to create the ‘Lightweight Render Pipeline’ asset.


Create the ‘Lightweight Render Pipeline’ asset

作成したLightweight Render Pipeline アセット

The ‘Lightweight Render Pipeline’ asset created


Register the ‘Lightweight Render Pipeline’ asset

Select ‘Edit > Project Settings…’ to open the setting window.

Project Settingsウィンドウを開く

Open the ‘Project Settings’ window


Register the ‘Lightweight Render Pipeline’ asset created earlier with the setting window.

Lightweight Render Pipeline アセットを登録

Register the ‘Lightweight Render Pipeline’ asset


It’s a long sequence, but we have now completed the introduction of  ShaderGraph.

Create Shader Graph

Let’s actually create a shader graph.


Create shader-graph asset

Right-click on the Project window and select ‘Create > Shader > Unlit Graph’ to make the asset of shader graph.

Since we just need to add colour this time, select ‘Unlit Graph’.

Unlit シェーダーグラフを作成

Create ‘Unlit Shader Graph’


The shader graph created


Open shader graph

Double-click this shader graph to open the shader-graph editor window.

It displays the shader graph with just one ‘Unlit Master’ node placed.


The shader-graph editor window


Attach the shader graph to a board

Right-click the shader graph and select ‘Create > Material’ to create a material.


Create a material


Attach the created material to an object.

This time I attached the material to the board created by selecting ‘Create > 3D Object > Plane’ in the Hierarchy window.


Attach the material to a board


Result – The material attached

Change the colour

You can see the Colour pin on the Unlit Master node. It is the information about the colour to output to the final stage.

Let’s set ‘Color’ to green and click ‘Save Asset’ in the top-left corner of the window to save.

Unlit Masterノードの色を変える

Change the colour of the Unlit Master node


The board has also been coloured in green.


The result – the colour has been changed

Display Texture

Next, let’s display the texture.

Add UV node

Hit the space key on the shader-graph window, enter ‘uv’ and press the Enter key.

Add UV node


A UV node has been added.


UV node


In the same way, create the ‘Sample Texture 2D’ node and connect the UV node with the Unlit node as shown below.

Assign a texture to the ‘Sample Texture 2D’ node.


The shader graph to display a texture

Once the shader graph was saved, the colour of the texture is applied to the board and it should look like the shown below.


The appearance of the board

Port shader graph to ShaderLab

Next, let’s port this shader graph to ShaderLab.

Once it’s ported to ShaderLab, you can upload it to STYLY.

Create Unlit Shader

Firstly, select ‘Create > Shader > Unlit Shader’ in the Project window to create an Unlit shader file.


The code of the created shader is shown below.


The code to calculate the colour in Unlit Shader

The following code actually generates the colour.

This process extracts the colour from the texture, applies ‘fog’ to it and then output it as the final colour.


Output the texture colour as it is

Modify the above code as shown below.

It extracts the colour from the texture and output it, which is the same as the shader graph shown below.


The shader graph to display the texture


The relation between the Unlit shader and the shader graph

i.uv is the UV coordinate, which corresponds to the UV node in the shader graph.
The tex2D() function is the one to extract the colour at each uv position of the texture, which corresponds to the Sample Texture 2D node in the shader graph.
The ‘return’ command returns the value of the colour, which corresponds to the Colour pin on the Unlit Master node.

The relation between ShaderGraph and ShaderLab


Example #2: Generate Noise pattern

Let’s display a noise pattern like this:

Shader Graph

You can make a noise pattern by setting up the shader graph as shown below.


The shader graph to generate a noise pattern


Port the node to ShaderLab partially

Each node of the shader graph is implemented by the shader code, so you can use exactly the same function on ShaderLab by copying the code.
Right-click the node and select ‘Open Document’ to see the code.


If you open the documentation of the ‘Simple Noise’ node, the following documentation will be opened in the web browser.


In the documentation, you will find the following shader code.

This is the shader code of ‘SimpleNoise’.

Copy and paste the code of SimpleNoise

By pasting the above shader code in the .shader file, ‘Noise’ is ‘enabled’ but cannot actually use it in the current state.

So, to make it usable, make the last eight lines into a function and define the undefined variables (UV and Scale).


Then call this function from the frag function in ShaderLab to display ‘Noise’.

So now it’s completed.


The whole shader code

The whole shader code is shown below.


Example 3:  Make scrolling stripe pattern


Scrolling stripe pattern


The shader graph shown blow generates a scrolling stripe pattern.

Port the stripe shader graph to ShaderLab

Let’s port this stripe shader graph to ShaderLab.


Display the ShaderLab code generated by the shader graph

Firstly, right-click the Unlit master node and select ‘Show Generated Code’.

It displays the shader code converted from the shader graph.


The actual shader code generated is shown below.


This shader code works with ‘Scriptable Render Pipeline’ available in Unity2018 or later.

Therefore, it doesn’t work in Unity2017 and cannot be uploaded to STYLY either.


So now I explain how to port this shader code to Unity2017.4.0f1 and makes it uploadable to STYLY.


Find the part equivalent to the flag function in the generated code

As you scan the shader code generated by ‘Show Generated Code’, you will find the PopulateSurfaceData function.


Paste the code of this PopulateSurfaceData function in the frag function.

Copy and Paste ‘Unity_Add_***’ functions

Copy and paste the following four functions used in the generated code.


Delecte ‘SurfaceDescription’

Delete the line of ‘SurfaceDescription surface = (SurfaceDescription)0;’

Modify the argument

The argument of the frag function is ‘i’ at the moment. Change it into ‘IN’.

Before the modification

After the modification


Modify the reference name of uv

It’s defined as ‘uv’ in v2f, so modify the following line to rename it ‘uv0’.

Before the modification

After the modification


Modify the variable type of uv

Since uv is defined as float2 for IN, change the variable type in the left side of the expression from float4 to float2.

Before the modification

After the modification

Correct the way to refer to uv element

You can access each element of float2 or float4 by the following syntax.


Since the uv value is float2 this time, the z and w element don’t exist.

Therefore delete the code shown below.


Modify the return statement

Currently, it returns the colour and the alpha value stored with the properties. But, since it needs to return the colour information this time, delete the lines shown below.

And, modify the return statement so that it returns the value of ‘surface.Color’.

The frag function after the modification

After all the modifications above, the frag functions should be as follows.

The whole shader code

After porting, the whole shader code should be as follows.


Example4: the Noise effect


Display vertical noise pattern and horizontal noise pattern alternately


The shader graph to display vertical noise pattern and horizontal noise pattern alternately


Port to ShaderLab

After poring the Noise shader above to Shaderlab, the code should be as follows.


How to upload an asset from Unity to STYLY

Please refer to the instruction from the link below to learn how to upload an asset from Unity to STYLY.