spherelinks/Docs
Editor

Shader Graph System

The Shader Graph is a node-based visual material editor built into the Properties panel. It lets you create custom PBR materials for any object without writing GLSL code.

5 min readUpdated March 2, 2026

The Shader Graph is a node-based visual material editor built into the Properties panel. It lets you create custom PBR materials for any object without writing GLSL code.

Opening the Shader Graph

Select any mesh object in the scene. In the Properties panel, scroll to the Material section and click Open Shader Graph. A floating panel opens with the node canvas.

Node types

  • Output — The single output node every graph must have. Accepts Base Colour, Normal, Roughness, Metalness, Emissive, and Opacity inputs.

  • Colour — A constant RGBA colour picker.

  • Texture — Samples a texture map. Supports Base, Normal, Roughness, Metalness, and Emissive map types.

  • Math — Performs arithmetic on input values (Add, Subtract, Multiply, Divide, Power, Mix, Step, Smoothstep).

  • UV — Outputs the mesh UV coordinates with optional tiling and offset controls.

  • Time — Outputs elapsed time in seconds, useful for animated effects.

  • Normal — Outputs the object's surface normal in world or view space.

  • Fresnel — Outputs a view-angle falloff value, ideal for rim lighting effects.

Connecting nodes

Drag from an output socket (right side of a node) to an input socket (left side of another node). Connections are typed — coloured sockets indicate compatibility. Delete a connection by right-clicking it and choosing Remove.

Editing node properties

Click any node to see its configurable properties in the side panel of the Shader Graph. For example, the Texture node lets you pick the map type and upload an image; the Math node lets you choose the operation and a constant second operand.

Compiling and previewing

The shader compiles automatically whenever the graph changes. The result is applied to the mesh in the viewport in real time. If the graph contains an error (e.g. a type mismatch), a warning banner appears at the top of the Shader Graph panel.

Default graph

Every new object starts with a minimal default graph: a grey Colour node connected to the Base Colour input of the Output node. This is equivalent to a flat diffuse material.

Pro tip: Connecting a Time node through a Sin/Cos Math node to Emissive creates a pulsing glow effect with no code required.

Ready to try it?

Start building in 3D today

Generate your first 3D model from an image in minutes.

Get started free