Unity Shader Graph

Shader Graph Nodes {.cols-2}

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

1. Attributes {.cols-2}

Positioning {.row-span-2}

Position - provides vertex position

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

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

Normal - supplies surface normal direction

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

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

World Position - returns the object's world space position

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

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

Object Position - returns the object's local space position

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

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

Screen Position - returns the object's screen space position

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

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

Camera Position - returns the camera's world space position

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

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

Timing

Time - outputs various time-related values

Inputs
- | - | - | | --- | --------- | | / | No inputs |
{.left-text}
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 {.cols-2}

Basic Math

Add - adds two values

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

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

Subtract - subtracts one value from another

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

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

Multiply - multiplies two values

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

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

Advanced Math {.row-span-2}

Power - raises input to a power

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

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

Sqrt - square root of input

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

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

Abs - outputs absolute value

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

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

Dot Product - calculates dot product between two vectors

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

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

Cross Product - calculates cross product between two vectors

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

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

Trigonometry

Sin - outputs sine of input

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

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

Cos - outputs cosine of input

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

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

Interpolation {.row-span-2}

Lerp - linear interpolation between two values

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

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

Step - creates a step between two thresholds

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

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

3. Color Processing {.cols-2}

Basic Color Manipulation

Color - provides a constant color value

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

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

Add Color - adds two color values

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

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

Multiply Color - multiplies two color values

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

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

Lerp Color - interpolates between two colors

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

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

Color Adjustment {.row-span-2}

Saturation - adjusts the saturation of input color

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

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

Contrast - adjusts contrast of input color

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

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

Hue - shifts the hue of the input color

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 - inverts the input color

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

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

Replace Color - replaces a specific color in the input with a new 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 - adjusts the white balance of input color

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 - modifies color channels independently

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 {.cols-2}

Sampling

Sample Texture - retrieves color data from 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}

UV - provides UV coordinates for texture mapping

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

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

Manipulation {.row-span-2}

Tiling Offset - adjusts tiling and offset of texture

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

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

Distortion - warps the surface of the object

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

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

Parallax - simulates depth using parallax mapping

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 {.cols-2}

Visual Effects {.row-span-2}

Fresnel Effect - creates a glow effect on object edges

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

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

Dissolve - generates a dissolve transition effect

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

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

Reflection {.row-span-2}

Reflection - reflects based on surface normal direction

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 {.col-span-2}

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 {.cols-1}

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