8588670d-a826-549c-8bf0-8004c67103f0:6udFvAlfFjsjj7eis1b8Ru

Introduction

Creating the Shader Graph

Finishing the SampleGraph

Conclusion

Shader Graph: Time Node

ShaderGraph Time Node.mp4

Eventually you will want to create a shader that animates continuously or at certain points in time. Whatever the goal, you will use the Time node to achieve this. The Time node allows you to access multiple time variables to work with within the shader. In this tutorial, you will learn to adjust and manage animations in Shaders.

Games

Film

Automotive

Make a Flag Wave with Shadergraph

Mtree - tree creation related content

Mobile Game Development Features--Companion Tutorials (2019.2)

Mobile Game Development Features--Companion Tutorials (2019.1)

Introduction to LWRP and Shader Graph for 2D Games--Companion Tutorials (2019.2)

Core Features 2019.1--Companion Tutorials (2019.1)

Look Development in the Lightweight Render Pipeline--Companion Tutorials (2019.2)

Game Design Curricular Framework Resources  

AI, ML Curricular Framework Resources 

This tutorial has been verified using Unity 2019 LTS and Shader Graph 7.3.1


Eventually you will want to create a shader that animates continuously or at certain points in time. Whatever the goal, you will use the Time node to achieve this. The Time node allows you to access multiple time variables to work with within the Shader.

To begin, let’s create a Shader to use as an example.

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

3. Open the new Shader graph you just created.

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

4. Type in Time and click the result that matches.

5. You will now have a Time node sitting in your graph (Figure 01).

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

The Time node provides access to various Time parameters in the Shader. This node has five outputs:

Sine Time: Provides the Sine of Time value.

Cosine Time: Provides the Cosine of Time value.

Delta Time: Provides the current frame time.

Smooth Delta: Provides the current frame time smoothed.

Let’s make use of the Time node by creating a Panning Texture.

1. Create a Tiling and Offset node and a Sample Texture 2D node.

2. Take the Time pin from the Time node and plug it into the Offset input of the Tiling and Offset node.

3. Take the Out pin of the Tiling and Offset node and plug it into the UV input of the Sample Texture 2D node.

4. Select a Texture for the Texture input of the Sample Texture 2D node.

5. Plug the RGBA pin of the Sample Texture 2D node into the PBR Master node.

The result is a Panning Texture going from the top-right corner to the bottom-left corner (Figure 02).

The PBR [Physically Based Renderer] Master node is the final node of any Shader. It’s the node that all shaders feed through to be rendered out. The Master node comes with a small preview at the bottom to show you the final live result.

Figure 01: Time Node

Figure 02: A graph that uses Time to offset UV’s

To finish your Shader, you’ll need to save your Asset:

1. In the top-left corner of your PBRGraph, click the Save Asset button (Figure 03).

2. Create a new Material in your Project window by right-clicking to select Create > Material.

3. In the Material window, select the Shader drop-down and select the Shader you created (Figure 04).

4. Apply the Material to an object in your Scene (Figure 05).

Figure 03: Shader Graph Toolbar

Figure 04: Material Shader Selection

Figure 05: New Shader applied to an object in the Scene

Use the Time node when you want an object to animate continually or for Shaders that rely on time in their operation. Experiment with animating gradients, colors, Textures, and other nodes that can be changed by time to make unique Shaders.

Shader Graph: Time Node

1. Introduction

2. Creating the Shader Graph

3. Finishing the SampleGraph

4. Conclusion

Complete this tutorial