Unity Shader Graph CHEAT SHEET

This is a visual cheat-sheet for the Unity Shader Graph. This tool is used to create custom shaders material in Unity, a popular game engine.

unityshadercomputer graphicsvisual effects

Sections

Cards

#Shader Graph Nodes

We are using SAIT to indicate the output type is "same as the input type". {.col-span-2}

#1. Attributes

Positioning

Position

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector3 Provides vertex position
{.left-text}

-	-
/	No inputs

-	-
`Vector3`	Provides vertex position

{.shortcuts .marker-round .cols-2}

Normal

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector3 Provides surface normal
{.left-text}

-	-
/	No inputs

-	-
`Vector3`	Provides surface normal

{.shortcuts .marker-round .cols-2}

World Position

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector3 World space position
{.left-text}

-	-
/	No inputs

-	-
`Vector3`	World space position

{.shortcuts .marker-round .cols-2}

Object Position

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector3 Local space position
{.left-text}

-	-
/	No inputs

-	-
`Vector3`	Local space position

{.shortcuts .marker-round .cols-2}

Screen Position

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector4 Screen space position
{.left-text}

-	-
/	No inputs

-	-
`Vector4`	Screen space position

{.shortcuts .marker-round .cols-2}

Camera Position

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector3 Camera world space position
{.left-text}

-	-
/	No inputs

-	-
`Vector3`	Camera world space position

{.shortcuts .marker-round .cols-2}

Timing

Time

Inputs
- - -
  / No inputs
{.left-text}

-	-
/	No inputs

Outputs

-	-
`Float`	Time (T) - The total elapsed time since the start of the shader
`Float`	Sin Time (T/8π) - A sine wave based on time
`Float`	Cos Time (T/8π) - A cosine wave based on time
`Float`	Delta Time - Time passed between the previous frame and the current frame

{.left-text}

{.shortcuts .marker-round .cols-2}

#2. Math Operations

Basic Math

Add

Inputs
- - -
  Float
  Vector First value
  Float
  Vector Second value
{.left-text}
Outputs
- - -
  SAIT Sum of the two inputs
{.left-text}

-	-
`Float` `Vector`	First value
`Float` `Vector`	Second value

-	-
SAIT	Sum of the two inputs

{.shortcuts .marker-round .cols-2}

Subtract

Inputs
- - -
  Float
  Vector Minuend
  Float
  Vector Subtrahend
{.left-text}
Outputs
- - -
  SAIT Difference of the two inputs
{.left-text}

-	-
`Float` `Vector`	Minuend
`Float` `Vector`	Subtrahend

-	-
SAIT	Difference of the two inputs

{.shortcuts .marker-round .cols-2}

Multiply

Inputs
- - -
  Float
  Vector
  Matrix First value
  Float
  Vector
  Matrix Second value
{.left-text}
Outputs
- - -
  SAIT The product of the two inputs
{.left-text}

-	-
`Float` `Vector` `Matrix`	First value
`Float` `Vector` `Matrix`	Second value

-	-
SAIT	The product of the two inputs

{.shortcuts .marker-round .cols-2}

Advanced Math

Power

Inputs
- - -
  Float Base
  Float Exponent
{.left-text}
Outputs
- - -
  Float Result of base raised to the power of the exponent
{.left-text}

-	-
`Float`	Base
`Float`	Exponent

-	-
`Float`	Result of base raised to the power of the exponent

{.shortcuts .marker-round .cols-2}

Sqrt

Inputs
- - -
  Float Input value
{.left-text}
Outputs
- - -
  Float Square root of the input
{.left-text}

-	-
`Float`	Input value

-	-
`Float`	Square root of the input

{.shortcuts .marker-round .cols-2}

Abs

Inputs
- - -
  Float
  Vector Input value
{.left-text}
Outputs
- - -
  SAIT Absolute value of the input
{.left-text}

-	-
`Float` `Vector`	Input value

-	-
SAIT	Absolute value of the input

{.shortcuts .marker-round .cols-2}

Dot Product

Inputs
- - -
  Vector3
  Vector4 First vector
  Vector3
  Vector4 Second vector
{.left-text}
Outputs
- - -
  Float Dot product result
{.left-text}

-	-
`Vector3` `Vector4`	First vector
`Vector3` `Vector4`	Second vector

-	-
`Float`	Dot product result

{.shortcuts .marker-round .cols-2}

Cross Product

Inputs
- - -
  Vector3 First vector
  Vector3 Second vector
{.left-text}
Outputs
- - -
  Vector3 Cross product result
{.left-text}

-	-
`Vector3`	First vector
`Vector3`	Second vector

-	-
`Vector3`	Cross product result

{.shortcuts .marker-round .cols-2}

Trigonometry

Sin

Inputs
- - -
  Float Input in radians
{.left-text}
Outputs
- - -
  Float Sine of the input
{.left-text}

-	-
`Float`	Input in radians

-	-
`Float`	Sine of the input

{.shortcuts .marker-round .cols-2}

Cos

Inputs
- - -
  Float Input in radians
{.left-text}
Outputs
- - -
  Float Cosine of the input
{.left-text}

-	-
`Float`	Input in radians

-	-
`Float`	Cosine of the input

{.shortcuts .marker-round .cols-2}

Interpolation

Lerp

Inputs
- - -
  Float
  Vector Start value
  Float
  Vector End value
  Float
  Vector Interpolation factor (T)
{.left-text}
Outputs
- - -
  SAIT Interpolated result
{.left-text}

-	-
`Float` `Vector`	Start value
`Float` `Vector`	End value
`Float` `Vector`	Interpolation factor (T)

-	-
SAIT	Interpolated result

{.shortcuts .marker-round .cols-2}

Step

Inputs
- - -
  Float
  Vector Threshold
  Float
  Vector Input
{.left-text}
Outputs
- - -
  SAIT Step result
{.left-text}

-	-
`Float` `Vector`	Threshold
`Float` `Vector`	Input

-	-
SAIT	Step result

{.shortcuts .marker-round .cols-2}

#3. Color Processing

Basic Color Manipulation

Color

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector4 RGBA color value
{.left-text}

-	-
/	No inputs

-	-
`Vector4`	RGBA color value

{.shortcuts .marker-round .cols-2}

Add Color

Inputs
- - -
  Vector4 First color
  Vector4 Second color
{.left-text}
Outputs
- - -
  Vector4 Sum of the two colors
{.left-text}

-	-
`Vector4`	First color
`Vector4`	Second color

-	-
`Vector4`	Sum of the two colors

{.shortcuts .marker-round .cols-2}

Multiply Color

Inputs
- - -
  Vector4 First color
  Vector4 Second color
{.left-text}
Outputs
- - -
  Vector4 Product of the two colors
{.left-text}

-	-
`Vector4`	First color
`Vector4`	Second color

-	-
`Vector4`	Product of the two colors

{.shortcuts .marker-round .cols-2}

Lerp Color

Inputs
- - -
  Vector4 Start color
  Vector4 End color
  Float Interpolation factor (T)
{.left-text}
Outputs
- - -
  Vector4 Interpolated color
{.left-text}

-	-
`Vector4`	Start color
`Vector4`	End color
`Float`	Interpolation factor (T)

-	-
`Vector4`	Interpolated color

{.shortcuts .marker-round .cols-2}

Color Adjustment

Saturation

Inputs
- - -
  Vector4 Input color
  Float Saturation factor
{.left-text}
Outputs
- - -
  Vector4 Adjusted color
{.left-text}

-	-
`Vector4`	Input color
`Float`	Saturation factor

-	-
`Vector4`	Adjusted color

{.shortcuts .marker-round .cols-2}

Contrast

Inputs
- - -
  Vector4 Input color
  Float Contrast factor
{.left-text}
Outputs
- - -
  Vector4 Adjusted color
{.left-text}

-	-
`Vector4`	Input color
`Float`	Contrast factor

-	-
`Vector4`	Adjusted color

{.shortcuts .marker-round .cols-2}

Hue

Inputs
- - -
  Vector4 Input color
  Float Hue shift amount
{.left-text}
Outputs
- - -
  Vector4 Color with shifted hue
{.left-text}

{.shortcuts .marker-round .cols-2}

Invert Colors

Inputs
- - -
  Vector4 Input color
{.left-text}
Outputs
- - -
  Vector4 Inverted color
{.left-text}

{.shortcuts .marker-round .cols-2}

Replace Color

Inputs
- - -
  Vector4 Input color
  Vector4 Target color
  Vector4 Replacement color
{.left-text}
Outputs
- - -
  Vector4 Color with replaced values
{.left-text}

{.shortcuts .marker-round .cols-2}

White Balance

Inputs
- - -
  Vector4 Input color
  Float Temperature value
  Float Tint value
{.left-text}
Outputs
- - -
  Vector4 Adjusted color
{.left-text}

{.shortcuts .marker-round .cols-2}

Channel Operations

Channel Mixer

Inputs
- - -
  Vector4 Input color
  Float Red channel multiplier
  Float Green channel multiplier
  Float Blue channel multiplier
{.left-text}
Outputs
- - -
  Vector4 Modified color
{.left-text}

{.shortcuts .marker-round .cols-2}

#4. Texture Processing

Sampling

Sample Texture

Inputs
- - -
  Texture (sampler) Texture input
  Vector2 UV coordinates
{.left-text}
Outputs
- - -
  Vector4 Color data from the texture
{.left-text}

{.shortcuts .marker-round .cols-2}

Inputs
- - -
  / No inputs
{.left-text}
Outputs
- - -
  Vector2 UV coordinates
{.left-text}

{.shortcuts .marker-round .cols-2}

Manipulation

Tiling Offset

Inputs
- - -
  Vector2 Tiling values
  Vector2 Offset values
{.left-text}
Outputs
- - -
  Vector2 Modified UV coordinates
{.left-text}

{.shortcuts .marker-round .cols-2}

Distortion

Inputs
- - -
  Float Distortion strength
  Vector2 UV coordinates
{.left-text}
Outputs
- - -
  Vector2 Warped UV coordinates
{.left-text}

{.shortcuts .marker-round .cols-2}

Parallax

Inputs
- - -
  Texture (sampler) Input texture
  Vector2 UV coordinates
  Float Depth value
{.left-text}
Outputs
- - -
  Vector2 Adjusted UV coordinates
{.left-text}

{.shortcuts .marker-round .cols-2}

#5. Effects

Visual Effects

Fresnel Effect

Inputs
- - -
  Vector3 View direction
  Float Power of the effect
{.left-text}
Outputs
- - -
  Float Fresnel effect value
{.left-text}

{.shortcuts .marker-round .cols-2}

Dissolve

Inputs
- - -
  Texture (sampler) Input texture
  Float Dissolve threshold
{.left-text}
Outputs
- - -
  Vector4 Dissolve effect output
{.left-text}

{.shortcuts .marker-round .cols-2}

Reflection

Reflection

Inputs
- - -
  Vector3 Incident direction
  Vector3 Surface normal
{.left-text}
Outputs
- - -
  Vector3 Reflected direction
{.left-text}

{.shortcuts .marker-round .cols-2}

#Custom Function Node

Steps to Create a Custom Function Node

Step 1: Add Custom Function Node in Shader Graph
- Right-click in Shader Graph and choose "Create Node" > "Custom Function".
- Choose between "String" (for inline HLSL code) or "File" (for an external HLSL file).
Step 2: Configure the Node in Shader Graph
- Set the name of the node.
- If using "File", ensure the external HLSL file name exactly matches the function name defined in the HLSL file. This ensures the function is correctly referenced in the Shader Graph pipeline.Example : If the file is named CustomFunction.hlsl , the function inside it should also be named CustomFunction .
Step 3: Add Inputs/Outputs in Shader Graph
- Define the required Inputs and Outputs for the custom function in Shader Graph. These will automatically generate ports for you to connect other nodes.Example :
  - Inputs: Float (time), Vector3 (position)
  - Outputs: Vector3 (new position)
  In the custom HLSL code, the in and out parameters correspond to these inputs and outputs:
  - in represents the data coming into the function (e.g., time, position).
  - out defines the return value (e.g., modified position).
Step 4: Write HLSL Code
- If using the "String" option:
  - Directly write the HLSL code inside the custom function node editor in Shader Graph.
  - Ensure that the in and out parameters match the inputs and outputs you defined in Shader Graph.
  - Example of inline code (using "String" mode):
```
float3 CustomPosition(in float time, in float3 position, out float3 newPosition) {
  newPosition = position + float3(sin(time), cos(time), 0.0);
  return newPosition;
}
```
- If using the "File" option:
  - Write the HLSL code in an external .hlsl file and reference the file in Shader Graph.
  - Example of an external HLSL file (using "File" mode):
    1. 1. Create an HLSL file named CustomPosition.hlsl.
    2. 2. Write the custom function inside the file. The in and out parameters should match the Shader Graph inputs and outputs.
```
float3 CustomPosition(in float time, in float3 position, out float3 newPosition) {
  newPosition = position + float3(sin(time), cos(time), 0.0);
  return newPosition;
}
```
    1. 3. Save the file in your project directory, for example, Assets/Shaders/CustomPosition.hlsl.
    2. 4. Link the file in Shader Graph:
    - In the Custom Function Node, switch to "File" mode and reference CustomPosition.hlsl.
Step 5: Use the Node in Shader Graph
- Connect the custom function node’s input ports to other nodes, such as Time and Position, to feed data into the custom function.
- Connect the output port to apply the function result in the Shader Graph pipeline.
- Example Pipeline :
  - Inputs: Time (as a float) and Position (as a vector)
  - Outputs: Modified Position (vector with new position)
  This would make the custom node update an object's position based on time in the shader.

{.marker-timeline .shortcuts}

#Also see

Unity Shader Graph documentation (docs.unity3d.com)
Tianle Yuan's Unity Visual Effect notes (yuantianle.com)