In this article, I will show how to install ‘Amplify Shader Editor’ asset, a node-based shader editor, and give a simple example of its application.
If you have an idea for a shader effect but cannot find how to start making it, I recommend this asset.
- 1 What is ‘Amplify Shader Editor’?
- 2 How to install Amplify Shader Editor
- 3 Basic operations
- 4 Simple examples
- 5 Import to STYLY
What is ‘Amplify Shader Editor’?
Amplify Shader Editor is one of Unity’s editor extensions for shader editing.
Of course, you can use a shader language such as HLSL, to edit a shader in Unity. But, you could create a shader more with visually intuitive operations by using a node-based editor. ‘Amplify Shader Editor’ is a prime option of such editors.
Learn shaders with the node-based approach
In Amplify Shader Editor, you can write shaders by connecting nodes, which is more visually intuitive.
The advantage of node-based shader editor is that you can easily understand the basic structure of the shader because you can build it up without the hassle of coding the shader. In particular, a great advantage of Amplify Shader Editor is that any modifications you made are immediately reflected on the scene, so you can repeat your experiments quickly.
You will be able to try your own way to build a shader by referring to many sample scenes, learning how to build a shader and repeating your experiments.
Differences from other shaders
In addition to ‘Amplify Shader Editor’, there are other node-based shader editors such as Shader Graph, Shader Forge. In particular, Shader Forge introduced from Unity2018 is free and so versatile that you can create a variety of shader effects.
On the other hand, Amplify Shader Editor is expensive but, referring to many sample demos and ones shared in the community, it helps you to create elaborate expressions. It is getting popular as its user interface and functions offer good usability. You can also use conventional Rendering Pipeline (Forward Rendering, Deferred Rendering and etc.) in Amplify Shader Editor.
In addition, as Shader Forge is only supported by Unity2018 or later, I recommend using Amplify Shader Editor when you need to use the version earlier than Unity2017 for VRChat etc.
How to install Amplify Shader Editor
I briefly explain how to install ‘Amplify Shader editor’.
Purchase on Asset Store
You can buy it on Unity Asset Store (They sometimes sell it for half price in the sale).
Import to Unity
After downloading, import it to Unity.
Create a new shader and material
Firstly, create a new shader and material. When you want to edit with Amplify Shader Editor, you can create a new shader by right-clicking the Project window and selecting ‘Create > Amplify Shader > Surface’. The Amplify Shader Editor’s edit screen is also launched at the same time. You can relocate this edit screen to match the Unity’s layout used.
I also created a Material by right-clicking the created shader and selecting ‘Create > Material’. If you applied this material beforehand, you could check the result of the edited shader immediately.
Add and connect a node
We actually add a node and edit the shader here. You can add a node by clicking ‘□’ in the top right corner of the screen or using the list that appears by right-clicking the screen. Drag the target node (the colour node in the example below) to add to the edit screen.
You can also add it by using the shortcut. The node with ‘[number]’ on the right of its name (ex. ‘Color’ in the example below) can be added by clicking on the edit screen with the shortcut key held down. I explain the detail in ‘Basic nodes’ later.
You can connect nodes by connecting ‘Input’ and ‘Output’. This time I connected ‘Output (RGB)’ of the colour node to ‘Input (Albedo)’ of the master node. If you want to disconnect it, you can do it from the ‘Output’ side.
The master node is a node to accept the output of the shader you edit. Put ‘Green’ into the base colour ‘Albedo’, save and apply the change to the material by pressing the yellow button in the top left corner). Then the colour of the cube will change. In this way, you can easily check how the change affected the result.
The node property of the output node
When you create a new shader and open the edit screen, you will find one node placed by default. This is the output node all the node will be connected to eventually.
Now, let’s check the node property of the output node. Left-click the node to open the node property on the left of the edit screen (you can switch between ‘hide’ and ‘unhide’ by clicking ‘□’ in the top left corner). Each node has different content of the node property. In particular, the node property of the output node allows you to edit the important parameters for the basic functions of the shader.
You can learn the basic information of nodes and how to use them in the official wiki of Amplify Shader Editor (Amplify Shader Editor/Nodes). I pick up some basic nodes from it here.
Texture Sample Node (Shortcut: ‘T’) is a node to import Texture to the shader. You can place a new ‘Texture Sample Node’ simply by dragging Texture onto the Edit screen. The input’s UV port, for example, can be connected with the output of ‘Texture Coordinate【U】‘ to make the UV shared by multiple Textures.
Constants and Properties
The following nodes are used to input values.
Abs Node returns the absolute value of ‘Input(Float)’.
The Lerp node linearly interpolates between A and B based on the Alpha value. Alternatively, it can be written as ‘( ( 1 – I) * A + I * B )’. It basically allows you to blend A and B by using the Alpha value. As seen in the following screenshot, you can also use it to blend two Textures into a natural ground surface.
The Step node returns 0 if B<A and 1 if B>=A.
You can easily try creating various expressions by making good use of various nodes.
The colour sensitive to the viewing angle
This shader calculates the difference between the world coordinates of each pixel and the ones of the camera and outputs its unit vector as the colour information to change the colour every time you change the position of the camera.
The sequence in the Edit screen is as follows. Firstly, right-click the Edit screen to open the list and create ‘World Space Camera Pos Node’ and ‘World Position Node’ from it. Next, left-click the screen with the ‘S’ key held down to add ‘Subtract Node’. Connect its input with the coordinates (Vector3) of the ‘World Space Camera Pos Node’ and ‘World Position Node’ you created earlier. Finally, add the Normalize node by left-clicking with the ‘N’ key held down, connect it with the output of the Subtract Node and connect the returned unit vector to the Emission of the Output node to complete the shader.
Keep the water surface level with the ground
Next, change the Blend mode of the Output node into ‘Transparent’ to render transparency. By using the Step node introduced earlier, make the part above the object’s pivot (the centre or CoG) transparent. In this way, you can easily create the water surface constantly level with the ground regardless of the angle of the object.
‘Opacity’ controls how transparent the object looks. In this example, it turns green if the Step node returns 1 (i.e. the coordinates of the vertex is below the pivot) and it turns transparent if the Step node returns 0 (i.e. the coordinates of the vertex is above the pivot). In addition, you can make the water surface more realistic by adjusting the y coordinate of ‘Transform Position’ or applying the sine function before sending it to the Step Node.
Amplify Shader Editor has a lot of official shader samples. In addition to applying them to other projects, you can also learn the design concept to create a new shader by looking into them on Amplify Shader Editor.
Import to STYLY
I imported the design examples and the sample shaders to STYLY.
※How to create STYLY account: https://styly.cc/manual/styly-account-create/
※How to publish the Scene: https://styly.cc/manual/scene-create-tutorial/
In this article, I have introduced ‘Amplify Shader Editor’, from its installation to a simple way to use it.
I hope it will help you to edit shaders by yourself.