Contents

Creating a vertex displacement material with Shader Graph

Animate the vertices of a mesh over time with 3D Perlin noise by creating a Shader Graph material.

Overview

Moving the vertices of a mesh with a shader is a valuable technique to have in your shader toolbox. Using this technique, you can procedurally distort the shape of a mesh and animate it over time, all without having to author explicit frame-by-frame animations. Moving the vertices displaces them from their original positions, so this effect is known as vertex displacement, as shown in the example below:

To create a shader graph material that displaces the vertices of a mesh over time, apply a positional offset to each vertex with a Geometry Modifier node and a Noise 3D node. You can control the amplitude, scale, and rate of displacement with shader uniforms. See Loading entities with ShaderGraph materials to download a sample project containing this shader along with many others.

Prepare a displacement node graph

House the vertex displacement logic in a reusable NodeGraph by following these steps:

  1. Create a custom Shader Graph material (Insert > Material > Shader Graph).

  2. Open the Shader Graph Editor by clicking the Shader Graph button.

  3. Add a NodeGraph node by clicking the New Node button or pressing the tab key and searching for “Node Graph”.

  4. Name the NodeGraph node “Displacement”.

  5. Add a new input to the Displacement node graph by selecting it and clicking the New Input button in the Inspector.

  6. Name the new input “Position” and give it a type of Vector3 (Float).

  7. Add a new output to the Displacement node graph by selecting it and clicking the New Output button in the Inspector.

  8. Name the new output “ModelPositionOffset” and give it a type of Vector3 (Float).

The following images show the Displacement node graph and its Inspector:

Set up the geometry modifier

Add a Geometry Modifier node to offset the vertex positions by the output of the Displacement node graph:

  1. Add a Position node.

  2. Connect the output of the Position node to the Position input of the Displacement node graph.

  3. Add a Geometry Modifier node.

  4. Connect the Model Position Offset output of the Displacement node graph to the Model Position Offset input of a Geometry Modifier node.

  5. Connect the Out output of the Geometry Modifier node to the Custom Geometry Modifier input of the Outputs node.

The main shader body is as follows:

[Image]

In this example, the Space of the Position node is set to object so that the displacement effect remains consistent regardless of the model’s position, orientation, or scale in world space, but you can use world instead if you want your displacement effect to depend on these factors.

Displace the vertices

One way to displace the vertices in a mesh is by utilizing output of a Noise 3D node:

  1. Open the Displacement node graph by double-clicking it or selecting it in the Navigator.

  2. Add a Noise 3D node.

  3. Connect the output of the Position node to the Position input of the Noise 3D node.

  4. Connect the Out output of the Noise 3D node to the Model Position Offset parameter of Outputs.

The following image shows the interior of the Displacement node graph:

[Image]

You can see the result of the shader in the Shader Graph Preview window, as shown below:

[Image]

In the example shown here, the Noise 3D node generates vertex offsets with Perlin noise, which distorts the shape of the mesh in a smooth yet random manner. To distort the shape of the surface differently, you can experiment with other noise functions, such as Fractal Noise 3D or Worley Noise 3D, or you can displace the vertices with your own custom logic.

Control the amplitude of displacement

Control the degree to which the shader offsets the vertices by adjusting the Amplitude parameter of the Noise 3D node:

  1. Add a new input to the Displacement node graph of type Float and name it “Amplitude”.

  2. Add a Convert node and set its type to Convert (float vector3f).

  3. Connect the output of the Amplitude node to the input of the Convert node.

  4. Connect the output of the Convert node to the Amplitude input of the Noise 3D node.

The following image shows the interior of the Displacement node graph:

[Image]

You can increase the value of the Amplitude node to increase the amount the shader displaces the vertices by, as shown in the three examples below:

Control the scale of displacement

Control the scale at which the shader offsets the vertices by multiplying the position by a constant factor before sampling the Noise 3D node:

  1. Add a new input to the Displacement node graph of type Float and name it “Scale”.

  2. Multiply the output of the Position node by the output of the Scale node with a Multiply node.

  3. Connect the output of the Multiply node to the Position input of the Noise 3D node.

The following image shows the interior of the Displacement node graph:

[Image]

You can increase the value of the Scale node to increase the scale at which the shader displaces the vertices, as shown in the three examples below:

Displace the vertices over time

Animate the vertices by moving the position over time, following these steps:

  1. Add a Time node.

  2. Add the output of the Multiply node, multiplying the Position by the Scale to the Time with an Add node.

  3. Connect the output of the Add node to the Position input of the Noise 3D node.

The following image shows the interior of the Displacement node graph:

[Image]

The vertices of the mesh move over time, as shown below:

Control the rate of displacement

Control the rate at which the shader displaces the vertices over time by multiplying the time by a constant factor:

  1. Add a new input of type Float and name it “Rate”.

  2. Multiply the output of the Time node by the output of the Rate node with a Multiply node.

  3. Connect the output of the Multiply node to the bottom input of the Add node.

The following image shows the interior of the Displacement node graph:

[Image]

You can adjust the Rate value to control the speed of the vertex displacement animation, as shown in the three examples below:

Create uniform inputs

Back in the main graph of your shader, create uniform inputs for each of the input properties of the Displacement node — Amplitude, Scale, and Rate — so that you can adjust these properties at the material level:

Creating uniform inputs also allows you to adjust the shader properties in code with the setParameter(name:value:) method, for example.

Correct the normal directions

When displacing the vertices of a mesh, you may notice that the way the mesh reacts to lighting no longer appears correct. This is typically the result of displacing the vertex positions without also modifying the vertex normals to match. For an obvious example, apply the material to the plane mesh in the preview window and observe how flat it looks despite its vertices moving:

See Correcting normals after vertex displacement with Shader Graph for information on how you can approximate and correct the normal directions, as shown in the following video:

See Also

Shader Graph