Our most comprehensive learning experiences

Pathway

Collections of tutorials and quizzes organized to teach a specific topic

Course

Tutorial

Create a 2D game

Build a VR Experience

2D Lighting Pixel Art

Create with Shader Graph

Unity Studio

Editor Essentials

Scripting

For Educators

Objects & Components

Materials & Shaders

Physics

Audio

AI & Navigation

Animation

All content in this course uses:

Build a Shader Graph that displaces mesh vertices along their normals using procedurally controlled noise.

Shader Graph: Vertex Displacement

In this tutorial, we’ll create a Shader Graph to displace the vertices of a mesh along their normals by an amount controlled with procedural noise. 

This tutorial was verified using Unity 2019.4.9f1 LTS and Shader Graph 7.3.1.

Unity’s Shader Graph system allows users to interactively build a Shader as a network of connected nodes. These nodes can represent data about the object to which the Material is applied, mathematical functions, procedural patterns, and more. In addition, the Shader Graph system is extensible, allowing programmers to develop custom Shader Graph nodes.

The Shader Graph system is currently compatible only with projects using the Universal or High Definition Render Pipelines. It’s included in both pipelines’ template projects. If you’re upgrading an existing project to use the HDRP or URP, use the Package Manager to install Shader Graph. Shader Graph can also be updated via Package Manager.

In this tutorial, we’ll create a Shader Graph to displace the vertices of a Mesh along their normals by an amount controlled with procedural noise.

Introduction

1. Create or load a project that uses the HDRP or URP. For this tutorial, we’re using the URP.

2. In the Project panel, right-click and select 

3. Right-click again in the Project panel and select 

 and, using the Shader drop-down at the top of the Inspector, select 

5. Using the GameObject drop-down, select 

. Assign the VertexDisplacement Material to the new Sphere.

Creating and Applying a Shader Graph

Our Shader Graph will move a vertex along its normal. The amount by which it’s moved will be determined using a procedural noise function. The position of the vertex before displacement will be used in the calculation of the noise. As we will see a bit later, the space in which we consider the vertex position affects the behavior of the noise, and thus the displacement.

2. Right-click in the Shader Graph Editor and select 

5. On the right side of the Position Node, click and drag from the socket labeled 

, Release the mouse over the socket labeled 

). This will cause the Voronoi noise node to use the position of the vertex when calculating the noise pattern.

8. Connect the Out socket of the Normal Vector and the Voronoi noise nodes to sockets A and B of the Multiply Node (

10. Connect the outputs of the Position and Multiply nodes to input sockets A and B of the Add node.

11. Connect the output of the Add node to the Vertex Position input socket of the PBR Master node.

 in the upper left corner of the Shader Graph Editor and close the window (

Building a Shader Graph

1. In the Scene view, select your Sphere and move it around. Notice that the displacement pattern is consistent—the peaks and valleys don’t change based on where the Sphere is in the Scene (

 for editing by either double-clicking it in the Project view, or single-clicking and selecting 

4. Save the Shader Graph and return to Scene view.

5. Try selecting and moving the Sphere again. Notice that the noise pattern and displacement amount depend on the world position of the vertex. The Sphere seems to be swimming through it, though there’s an unintended effect with using World Space for the Position Input. With this configuration, the world position is added to itself, doubling its distance from the World Origin.

6. Open VertexDisplacementSG for editing.

7. Right-click the connection between the Position and Voronoi nodes and select 

, and connect it to the UV input of the Voronoi node. This will cause the Voronoi noise to be calculated based on the vertex’s position in the world.

9. Set the Space of the original Position node to 

10. Once again, select and move the Sphere. Notice that the displacement pattern still stays with the world, giving the effect of a cloud changing shape as it moves through the sky, but the Sphere never moves away from the Transform gizmo.

Object vs. World Space

Finally, suppose that we want to control the strength of this effect. For this exercise, we’ll create a slider directly in the Shader Graph. In production, this slider would be replaced with a property that’s accessible via code. This adjustability allows for effects such as modulating the displacement amount by the volume of a music track for an audio visualizer.


4. To the inputs of the new Multiply node, connect the outputs of the Slider and the original Multiply node.

5. Connect the new Multiply node to an input of the Add node, replacing the original Multiply node (

6. Save any changes and close the window.

Adjusting Shader Graph Strength

This tutorial has just touched upon the power of Mesh manipulation using the Shader Graph system. Experimentation with the different nodes and settings will uncover a plethora of potential applications.

Unity Version 2019.4