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;
      }
      

      3. 3. Save the file in your project directory, for example, Assets/Shaders/CustomPosition.hlsl.

      4. 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)