All content in this course uses:

Understanding Shader Graph

In this tutorial, you'll learn about Unity's 

 tool and how to navigate its interface. You'll explore the 

, the building blocks of shader creation. By the end of this tutorial, you'll be comfortable navigating 

and be ready to start building your own shaders.

By the end of this tutorial, you'll understand the following:

is and why it's useful for shader creation.

 is Unity's visual shader authoring tool. Traditionally, if you wanted to create your own custom shaders, you’d need to manually create it using code in languages like HLSL

, you create shaders by connecting nodes in a graph-based interface. This makes shader creation accessible to artists, designers, and programmers alike.

 as building blocks: each node performs a specific function, like sampling a texture, multiplying values, or applying a mathematical operation. By connecting these nodes together, you create the logic that defines how your shader works.

 is a very powerful tool, but in some cases when creating very complex shaders you might need to create your own 

package is installed in your project. The package is already included in this course project’s assets, but if you’re working on your own project and don’t have it installed, follow these instructions on how to 

install a package via the Package Manager

What is Shader Graph?

We recommend you create a sample shader graph to follow the guidance in the next steps.

Rename the new shader graph “SampleShader”.

You might get prompted with a dialog window asking you if 

 assets should open upon creation. If so, select 

window is where you build your shaders visually. It's a dedicated editor window that contains all the tools you need to create, edit, and preview your shader effects. The

window is divided into several key areas:

Understanding these areas and how they work together is essential for working efficiently in 

. In the following steps, you'll explore each area in detail.

 The exact layout may vary depending on your Unity version and personal workspace arrangement, but all these elements will be present whenever you're working in 

The Shader Graph window

window and provides access to essential actions and settings you'll use throughout shader creation.

: Saves your current shader graph. You can also use the shortcut 

 On the right side, you’ll find three buttons (

) that enable or disable these areas when you select them.

: Opens the official Unity documentation for 

 also displays the name of your shader graph file, helping you confirm which shader you're currently editing.

Shader Graph Toolbar

 is by default located on the left side of the

 window. This is where you define properties that can be adjusted in the 

 window and reused throughout your shader.

become adjustable parameters in any material that uses your shader. For example, if you create a 

, anyone using a material from the shader can change that property in the

window without modifying the shader itself.

: Different data types for different purposes (colors, floats, textures, etc.).

 is essential for creating flexible, reusable shaders. Instead of hardcoding values directly into nodes, you create properties that can be adjusted per-material, making your shaders more versatile and easy to modify.

The Blackboard

 window. This is where you'll spend most of your time building shader logic by placing and connecting nodes.

 functions like a canvas where you can do the following:

menu. Then, move them around to arrange them clearly.

: Click and drag from a node's output port to another node's input port.

: Group nodes together by selecting them and right-clicking and selecting

 Select a connection between two nodes, right-click and select 

. This creates a subdivision in the connection line that you can move to organize the graph more clearly.

) and left-click and drag to pan around. Scroll to zoom in and out.

 key to focus on the node or node group you have selected. Press the 

 key to zoom out and frame the entire logic you have created.

) that show the flow of data through your shader. Data flows from left to right: from output ports on the left side of nodes to input ports on the right side of other nodes.

As your shaders become more complex, keeping your 

 organized is important. Group related nodes together, use straight connection lines when possible, and don't be afraid to spread things out for clarity.

 If you're using a trackpad, you can pan by holding 

The Workspace

 window is typically located in the lower-right of the 

window. This preview shows a real-time, 3D visualization of your shader as you build it.

The preview is incredibly useful because it updates automatically as you work. Every time you connect a node, change a value, or modify your shader graph, the preview immediately reflects those changes. This instant visual feedback helps you understand what each node does and how your shader is developing.

Click and drag in the preview to rotate the model and view the shader from different angles.

is not working properly or not updating in real time with your changes, first check your node connections. If everything looks correct, save your changes using 

 window of the shader, and then reopen it.

To change the preview model, right-click over the 

 window. You can then select one from several mesh options like a 

, or even your own models that you’ve imported to the project.

Different preview models help you test how your shader behaves on various surface types. For example, a texture might tile perfectly on a plane but stretch awkwardly on a sphere.

 window constantly to verify your shader is looking as expected before applying its material to GameObjects in your scene.

Main Preview window

 is typically located on the right side of the 

. This is where your shader's logic ultimately connects. The

 defines the final output and determines how Unity renders your material.

. Each sub-stack is in charge of changing different aspects of the geometry. Each sub-stack can contain several 

 that control different aspects of your shader's appearance, for example:

: Controls transparency (if transparency is enabled).

 If your sub-stacks are empty or not all 

 mentioned are visible by default, you can add or remove blocks depending on what properties your shader needs.

Select the block node you want to remove.

Only blocks that have connections actually affect your final shader. An unconnected block won't do anything, but it's still good practice to remove blocks you're not using to keep your graph clean.

 is where everything comes together. All the node networks you create in the 

 to open Unity’s official documentation.

The Master Stack

window is typically located on the right side of the 

When you select a node, this section displays the attributes and configuration options specific to that node type.

While your nodes define the logic of your shader, the 

 control the global shader properties that affect how Unity renders the material. Some 

 you’ll use during this course include the following:

When you first create your shader graph, you choose this attribute (

, etc.). It defines the default rendering settings for materials that use this shader, such as how the shader interacts with lighting, transparency, and rendering.

You can choose whether a property appears in the 

When you create a property, by default it’s set to 

. After saving the shader and returning to the

 window, you’ll see that property available in the material’s 

 window, where its values can be adjusted for that material.

These settings affect the technical rendering behavior of your shader. For example, if you're creating a glass material, you'd set 

. If you're creating a double-sided fabric, you'd set 

You don't need to fully understand all these settings right now. As you create different shader types in this course, you'll learn when and why to adjust specific 

Graph Inspector window

Nodes are the fundamental building blocks of 

. Every shader you create is made by placing nodes in the 

 and connecting them together to create logic.

 (on the left side): Where data enters the node

 (on the right side): Where processed data exits the node

 (in the middle): Settings specific to that node. However, not all nodes have exposed parameters that you can edit.

Data flows through your shader graph from left to right. You connect a node's output port to another node's input port, passing data along the chain until it reaches the

Node inputs and outputs indicate the type of data they use in two main ways: First, through color coding. Different colors represent different data types, such as colors, floats, or vectors. Second, through a number that indicates the size of the data. For example, a 

 in its output because it returns an output with four channels (

 in its output because it returns only two values.

This is important because some nodes require inputs of a specific type and size to perform their operations correctly. These visual cues help you quickly understand and track what kind of data is flowing through your nodes.

 Not all nodes can be connected to each other. Connections depend on whether the output of one node and the input of the other node use compatible data types. In some cases, 

can automatically convert between compatible types (for example 

, include a small preview window that displays the result of the node’s output. This preview helps you visually understand the type of data the node is producing while you build your shader.

 visualizes its components as colors in the preview. In these previews, the 

component as green. When both components are active at the same time, the colors combine and appear yellow, and when both values are zero the preview appears black.

These previews are useful for quickly identifying how values are changing and which vector channels are active as data flows through the graph.

 The preview color is used for visualization inside the node preview and does not directly represent the actual color that the shader will render.

Sometimes while building a shader, you may realize that certain nodes would be better exposed as a property that can be adjusted in the 

window. Instead of deleting the node and creating a new property, you can convert the node directly into a property.

Right-click on the specific property or value field on the node.

The node automatically connects to this new property.

Converting the node into a property adds it to the

, and makes it now accessible in the material’s 

Understanding nodes and properties

You've completed this tutorial. You now understand how to navigate the 

 window and each one of its components. You’ve completed 

and are ready to start creating your own 

You’ve also completed this unit and learned the basics of shaders and Shader Graph. This unit is part of the 

course, which is organized into multiple units that explore different shader techniques, we encourage you to check out our other units.

Unity バージョン 6.3