Shader Graph Getting Started: Visual Shader Editor in s&box

s&box Shader Graph is a visual scripting language that compiles to shader code. Accessible to beginners and useful for rapid prototyping by experienced shader developers.

Editor Layout

Create a new Shader Graph asset and double-click to open. The editor has 4 sections:

1. Preview — Real-time shader output with configurable model/lighting


2. Properties — Inspector for shader or selected node properties


3. Graph — Node workspace ending with a "Material" output node


4. Output — Errors, warnings, console, undo history, and node palette

Creating Nodes

Right-click in the Graph or drag from the Palette. Nodes connect via typed inputs/outputs.

Input/Output Types (Color-Coded)

• Float (Green) — Single floating-point value
• Float2 (Purple) — Two-component vector (UVs, screen position)
• Float3 (Blue) — Three-component vector (positions, normals, RGB)
• Float4/Color (Yellow) — Four-component vector (RGBA)

Creating a Material

Save the Shader Graph to generate a compiled .shader file. Right-click it and select "Create Material" to instantly create a material using your custom shader.