Tips, Shader, STYLY, Unity,

Introduction

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.
ShaderGraph

ShaderGraph

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

https://github.com/UnityTechnologies/ShaderGraph_ExampleLibrary

https://github.com/rngtm/ShaderGraphExample

 

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.

https://docs.unity3d.com/ja/2018.1/Manual/GettingStartedInstallingHub.html

 

Install Unity2018.3 from Unity Hub
Unity2018.3以降のバージョンのDownloadをクリック

Click the Download button of Unity2018.3 or later

 

Doneを選択してダウンロード・インストール開始

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’.

Advancedをクリック

Click ‘Advanced’

 

Install ‘ShaderGraph’ and ‘Render-Pipeline.Lightweight’.
ShaderGraphと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.

LWRPアセットを作成

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ノード

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.

https://github.com/Unity-Technologies/ShaderGraph/wiki/Simple-Noise-Node

 

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.

https://styly.cc/ja/manual/unity-asset-uploader/

 

かもそば

・職業はUnityエンジニア(2018年現在) ・面白そうと思ったものにはすぐに手を出すが、飽きることが多い器用貧乏 ・カフェで作業するのが好き

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.