ccb9b448-92be-50a5-ab79-f95ff14f53ce:zx7pohSEomVRos4yXEq9o5

Shadergraph: Sine

Creating the Shader Graph

Next steps

Sine waves are useful and versatile when it comes to shaders and animation. With sine waves, you can create an illusion of vegetation moving in the ambient wind, or creating rolling waves across the ocean. In this tutorial, you will learn to use the Sine node to create Custom Shaders.

Games

Film

Automotive

Shadergraph

This tutorial has been verified using Unity 2019 LTS and Shadergraph 7.3.1

Sine waves are useful and versatile for Shaders and animation using the Sine Shader Graph node. For example, you can use sine waves to create an illusion of vegetation moving in the wind, or rolling waves in the ocean. A sine wave is useful because its curve can be used to oscillate a parameter, such as speed. As the curve rises and falls, a smooth increase and decrease in speed will occur. This natural motion makes sine waves popular with animation in Shaders, such as when applied to physical animations and for animating a color changing for more complex solutions.

To begin, create a Shader to use as an example:

1. Right-click in your project and select Create > Shader > PBR Graph.

3. In the new window that opens, right-click and select Create Node.

4. Type the word Sine and click the result that matches.

You will now have a Sine node in your graph (Figure 01). 

The Sine node provides access to a single input and output.

In: This takes a dynamic vector as its input value.

Out: This returns a dynamic vector as its output value.

An example of using the Sine node is to create peaking waves for your Shader. To do this:

1. Create an Absolute node and plug your Sine Out to the Absolute In.

2. Create a One Minus node, and plug the Absolute into its input.

3. Create a Power node and plug the One Minus into the A input (Figure 02). 

Because the Sine node uses World Space and time to generate a sine wave, you need to use an absolute node to flip the negative values. The One Minus node then inverts these values so that the wave tips are at the top (Figure 03). 

Here, you have a peaked sine wave that you can apply to a more complex Shader, such an ocean. 

Figure 01: Sine node

Figure 02: Nodes to create a peaked sine wave.

Figure 03: The sine wave representation after each operation.

The Sine node is a fundamental and useful node for building more complex Shaders that deal with animation, such as grass sway, foliage, or ocean waves. Why not try to make a simple ocean Shader with the knowledge of how to use the sine wave to create those much-needed wave peaks? 

Shadergraph: Sine

1. Shadergraph: Sine

2. Creating the Shader Graph

3. Next steps

Complete this tutorial