Introduction to the Amplify Shader Editor

確認済のバージョン: 5.6

-

難易度: 中級

The Amplify Shader Editor

Creating shaders can seem very intimidating but it doesn’t have to be. One simple solution is to make the code visual. The Amplify Shader Editor (or ASE for short) is a visual environment for creating shaders. In the ASE, we can work in a familiar visual development environment which allows us to easily create Materials and effects using simple drag and drop operations.

In this tutorial we will create a rocky Material using Triplanar Mapping (please see the appendix below for more information) combined with Tessellation and Displacement to add additional detail. In the ASE, the final shader setup and output will look something like this:

Believe it or not, these rocks are simple Unity spheres sharing the same Material. This sounds difficult but it’s not.

So, let's begin!

Preparing for this tutorial

First:

  • Create a new, empty Unity Project

To complete this tutorial we will also need to download and import:

Create an ASE Shader

The first step to creating our Material is to create an ASE Shader. Like with any other Unity shader we can use the context sensitive window to do this:

  • Right-click on the Project window
  • Select Create > Shader > Amplify Surface Shader

This will create a new shader asset in our Project window.

The first thing we should do is rename our new shader and open it in the ASE.

  • In the Project window, right-click on the new shader
  • Select Rename
  • Rename the new shader "MyTriplanarShader"
  • With the shader selected, choose Open in Shader Editor from the Inspector window or double click the shader in the Project window to open the Shader Editor window

It is worth noting that the name of the shader in the Project window does not match the name in the Inspector window until we edit the shader in the ASE.

With the ASE open, we can see a window known as the ASE canvas. The ASE canvas contains an Output Node, which represents the selected shader's outputs.

Set up the Output Node

Detailed information about the currently selected node is shown in the Node Property Panel to the left of the ASE canvas.

By default, the Node Property Panel will display the details about the Output Node. The current Shader Name will be set to the name of the default asset we created, which was "MyEmptyShader". Before we continue, we should change this name value to match our current shader asset name.

When we edit the value of the Shader Name field, we can set both the name of the shader and its location in the drop-down menu of shaders that appears in the Inspector window when we edit a Material. For example, if we change the name of this shader to "ASETutorial/MyTriplanarSample", the shader will be named "MyTriplanarShader" and will appear in the drop-down menu in a category named "ASETutorial".

To save changes to the shader, we need to click the Update button in the menu bar of the ASE canvas.

  • Rename the shader to "ASETutorial/MyTriplanarSample"
  • Save the changes by clicking the Update button

We can now create a Material for our shader.

  • Navigate to the Project window
  • Right-click on our shader asset:, named "MyTriplanarShader"
  • Choose Create > Material

This will create a new Material which will be named based on the name of our shader in the ASE. This Material will use a custom inspector, so it will look different from the Standard Shader in the Inspector window.

In order to make changes to our shader and Material, we will open the shader in the ASE. The preferred work mode is Material Mode, because it allows us to simultaneously edit the shader and tweak Material properties in real-time.

  • Double-click on our Material to open the shader in the ASE and automatically set it to Material Mode.

Now we will need to adjust some settings to make our shader a tessellated, triplanar displacement shader.

  • Set the Shader Model to 4.6

  • Enable Tessellation
  • Open the Tessellation fold out to reveal the detailed settings

The Phong option forces the new tessellated faces to be slightly modified according to the mesh normals.

  • Enable Phong
  • Set the Phong Strength to 1

Changing the Type to Distance-based allows for objects closer to the camera to get more detail than objects further away. The amount of tessellation and how distance affects tessellation is set by the Tess, Min and Max values.

Tess sets the maximum amount of tessellation. Min is the distance to the Camera, in meters, at which tessellation is at its maximum. Max is the distance to the Camera, in meters, towards which tessellation gradually decreases.

Let's now set these values:

  • Set Tess to 7
  • Set Min to 1
  • Set Max to 5

Nodes

It’s time to place some nodes. Nodes are how we control the details of our shader. There are many different types of nodes that perform many different functions and these can be chained together with connections. For this example we will be using only four node types:

Triplanar Sampler, which samples a texture using Triplanar Mapping. Vertex Normal, which outputs the current vertex normal. Multiply, which multiplies two inputs together and outputs the final value. Float, which represents a single float value

Let's start by creating our Triplanar mapping. We need to create three Triplanar Sampler nodes: one to define the Albedo channel, another to define the Normals and the last one to be a Displacement map to displace the mesh vertices.

To create these nodes, use the Context Palette.

  • Right-click on the canvas in empty space
  • Type Triplanar in the search box
  • Select the Triplanar Sampler node by left clicking it

This will create a new Triplanar node.

When a node is selected, the details of that node will be shown in the Shader Editor's Property Panel:

Next we need two more Triplanar nodes, to make a total of three.

  • Left-click the first Triplanar node to select it
  • With the node selected, duplicate it using Ctrl+D on Windows or Cmd+D on MacOS
  • Repeat the above step to create another duplicate node

This will create two new Triplanar Sampler nodes.

The two duplicate nodes could be in the same position in the ASE canvas, so simply click on the top-most node and drag it into a new position. Each node should be placed in a position where they don't interfere with each other's input or output ports. The nodes should not overlap and should have clear space around them, as seen in the image below. It is worth noting that the position of the nodes does affect functionality, but poor positioning may make it harder to see the nodes, access their ports or make connections between them.

Next we need to add our textures to our nodes. Each of the three nodes will hold one of the three Albedo, Normal and Displacement textures we need for the final shader.

We assign textures to nodes using the node's Texture property. When the node is selected, we can set this value in the Property Panel. We can also set this value directly on the node, without having to select the node first.

  • Assign the texture named carvedlimestoneground1_Base_Color to the first node's Texture field, either by dragging the texture from the Project window or by clicking on the Texture field and selecting the texture in the asset picker
  • Assign the texture named carvedlimestoneground1_Normal to the second node's Texture field, either by dragging the texture from the Project window or by clicking on the Texture field and selecting the texture in the asset picker
  • Assign the texture named dissolve-guide to the third node's Texture field, either by dragging the texture from the Project window or by clicking on the Texture field and selecting the texture in the asset picker

Please note: The texture "dissolve-guide" texture can be found in AmplifyShaderEditor > Examples > Community > Dissolve Burn

Each node must have a unique name assigned to Texture > Name in the Property Panel. Rename the nodes' texture name:

  • Set the first node's Texture Name to Albedo
  • Set the second node's Texture Name to Normal
  • Set the third node's Texture Name to Displacement

To identify the nodes within the ASE we can also set the nodes' Parameters > Name. Set the value for each the node's Parameter Name as follows:

  • Set the first node's Parameters Name to Albedo Triplanar Sampler
  • Set the second node's Parameters Name to Normal Triplanar Sampler
  • Set the third node's Parameters Name to Displacement Triplanar Sampler

Now we need to set the mapping and the reference space for the nodes. We are going to use spherical and world mapping. Spherical mapping utilizes a single texture and assigns it to all planes used by the Triplanar Sampler. World space defines the mapping of the textures to be world dependent. This allows the effect of our Material being mapped differently according to where the object is placed in the world. Moving the object in world space will remap the textures as the object moves.

  • On each of the three nodes, set Parameters > Mapping to Spherical
  • On each of the three nodes, set Parameters > Space to World

Finally, we must indicate that the node we named Normal Triplanar Sampler uses a normal map.

  • On the node named Normal Triplanar Sampler, enable Parameters > Normal Map

We now need all Triplanar Nodes to share the same Tiling and Falloff values. To do this we will create two new Float nodes.

Instead of using the Context Menu, this time we will create our two Float nodes by using the keyboard shortcut:

  • Hold down the "1" key
  • With the "1" key held down, left-click on the ASE canvas to create a Float node
  • Repeat the above step to create a second Float node

Next, we must set both new Float nodes to be Shader Properties, and then set their property values. This can be done either in the Property Panel when the node is selected or on the nodes themselves.

  • Select the first node
  • Set the node's Type to Property
  • Set the node's name to Tiling
  • Set the node's value to 0.36
  • Select the second node
  • Set the node's Type to Property
  • Set the node's name to Falloff
  • Set the node's value to 1.56

Now let's connect our nodes together.

To create connections we simply click and hold the left mouse button on a node Port and drag a wire to another node Port on a different node. We can only connect an Output Port to an Input Port or an Input Port to an Output Port. Trying to connect two Input Ports or two Output Ports will fail. Depending on the port, it is possible to have more than one connector connected to a node's port.

We will now connect the Tiling and Falloff nodes to all Triplanar Tiling and Falloff Inputs Ports.

  • On the Tiling node, click and drag from the Output Port to the Tiling Input Port on the Albedo Triplanar Sampler node to create a connection
  • Repeat this process from the Tiling node to the Normal Triplanar Sampler node
  • Repeat this process from the Tiling node to the Displacement Triplanar Sampler node

  • On the Falloff node, click and drag from the Output Port to the Falloff Input Port on the Albedo Triplanar Sampler node to create a connection
  • Repeat this process from the Falloff node to the Normal Triplanar Sampler node
  • Repeat this process from the Falloff node to the Displacement Triplanar Sampler node

Now all that is left to do is connect the Albedo and Normal Triplanar Sampler nodes to our final Output node.

  • On the Albedo Triplanar Samper node, create a connection between the RGBA Output Port node and the Albedo Input Port on the final Output node
  • On the Normal Triplanar Samper node, create a connection between the RGBA Output Port and the Normal Input Port on the final Output node

Next, we need to apply a displacement to the shader. We want our displacement offset to be scaled according to the displacement magnitude and to follow the direction of the object’s vertex normal.

First, we need to take the result from the Displacement Triplanar Sampler and multiply it by a scale factor. Scale factor is a float value. Next, we need to take this output value and multiply it by the vertex normal value.

  • Create a new Float node by holding down "1" and left-clicking in the ASE canvas
  • Name this new node Scale
  • Set the node's Type to Property

Now we will set Scale to be a Ranged Float by setting different Min and Max values on the node's Properties.

  • Select the Scale node
  • In the Property Panel, set the Min property to 0
  • Set the Max property to 1
  • Set the Material Value to 0.67

Next we will need to create a Multiply node to multiply the output from the Displacement Triplanar Sampler with the Scale node we have just created. We will create the Multiply node using a new shortcut.

  • Hold down the "m" key and left-click in the ASE canvas to create a new Multiply node
  • Connect the Displacement Triplanar Sampler node's Red (R) channel to any one of the Multiplier nodes' empty Input Ports
  • Connect the Scale node's Output to any one of the Multiplier nodes' empty Input Ports

We now need to create a Vertex Normal node.

  • Right-click on the ASE canvas to open the Context Palette
  • Type "vertex" in the search box
  • Select "Vertex Normal" from the list of results to create a Vertex Normal node

Now we can take the combined output of the Displacement Triplanar Sampler and Scale factor nodes and multiply them with the output from the Vertex Normal node.

  • Hold down the "m" key and left-click in the ASE canvas to create a new Multiply node
  • Connect the first Multiply node we created to the new Multiply node
  • Connect the Vertex Normal node's XYZ Output to the new Multiply node

All that remains now is to connect this last result into the Local Vertex Offset port of the Output node. This effectively causes the object’s vertex position to slide in the direction of our displacement vector.

  • Connect the Output from the second Multiply node to the Local Vertex Offset Input port on the Output node

Here is what our final shader graph should look like:

Build the Shader

All the connections have been made. Now it is time to compile the shader.

  • Click the Update button to compile the shader

Because we are in Material Mode, all the properties will now be correctly set on our Material. Please note that Tessellation Shader properties are automatically added when Tessellation is enabled.

This is what our Material inspector looks like after we are done:

The last step will be to create a few built-in primitive 3D Objects that we can apply our new Material to.

  • In the Hierarchy window, click Create > 3D Object > Sphere to create a new sphere
  • In the Inspector window, apply the Triplanar Sample Material to the sphere
  • Duplicate the sphere a few times and move the duplicates to different positions

This is what the final result should look like when the Material is applied to several simple Unity spheres:

Pretty cool right?

Additional features

ASE has a visual preview available on all nodes. With the visual preview, we are able to visualize what each node is doing. By using the Preview Foldout Button on the node in top right corner, or hitting the the "P" key, we can enable the visual preview.

These are the displacement nodes with preview enabled:

We can also check detailed information at any time by opening our Helper Window by using the "i" button on the canvas:

The Helper window contains a large amount of detailed helper information, such as editor shortcuts, node info and more.

For more detailed information, please see the the Manual page on the Amplify Wiki for an in-depth explanation on all Amplify Shader Editor related features.

Conclusion

Being able to develop our own shaders unleashes an enormous potential in all of us. We will be able to create new custom Materials for our project according to our imagination without having to be limited to Unity builtin shaders and without having to write shader code.

We hope you’ll soon be part of our growing ASE Community and happy shader creations!

Appendix: Triplanar Mapping

Triplanar mapping is a texture coordinate generating method used to limit the problem of textures appearing stretched when a mesh is deformed. Instead of using original artist authored texture coordinates stored in the mesh (which are fixed and won't react to mesh deformation), Triplanar mapping generates three sets of new texture coordinates, using the xy, xz and yz coordinates of the pixel. After the new texture coordinates are created, the three texture values are blended depending on the normal of the pixel, for example a pixel with a normal pointed up (0,1,0) will use 100% of the xz value.

Amplify Creations

コミュニティー作者

Amplify Creations is a self-funded and independent software organization founded by video-game and visual effects professionals, passionate about creating anything from innovative computer graphics technology to groundbreaking new video-games. We strive to bring a future-proof vision and a fresh, out-of-the-box, perspective to the game development industry. Our mission is to build a mature, sustainable business that allows us to live off what we love the most: solving problems and creating experiences.