Shader
Run a custom WGSL or GLSL fragment or compute shader.
What it does
Runs your own WGSL or GLSL code on the GPU, either as a per-pixel fragment shader or as a full compute shader. Wire an image into Content In and the shader processes it; leave Content In unconnected and the shader generates an image from scratch.
A @param comment in the code becomes a live control on the node with no separate wiring, for example // @param float brightness 0.0 2.0 1.0 "Brightness control". Built-in uniforms for resolution, time and frame number are available to every shader.
When to use it
An existing shader, written in WGSL or GLSL or for Shadertoy or ISF, dropped straight into the graph.
Procedural generators with control over every pixel: noise, patterns, fractals, no image input.
Per-pixel effects the built-in Effect nodes do not cover.
Artist-tunable controls on shader code, added with a
@paramline.
| Parameter | Type | Default | What it does |
|---|---|---|---|
content_in | Raster | — | — |
language | String | "WGSL" | Shader language: WGSL (native) or GLSL (transpiled). One of: WGSL, GLSL. |
shader_type | String | "Fragment" | Fragment: per-pixel with texture sampling. Compute: full GPU access with storage textures. One of: Fragment, Compute. |
wgsl | String | "DEFAULT_FRAGMENT_SHADER" | Custom shader code with @param definitions |
use_canvas_size | Boolean | true | Use canvas size for output when no input is connected |
width | Number | 512 | Output width in pixels (generator mode) |
height | Number | 512 | Output height in pixels (generator mode) |
position | Vec3 | (0, 0, 0) | Translation (X, Y, Z) |
rotation | Vec3 | (0, 0, 0) | Rotation in degrees (X, Y, Z) |
scale | Vec3 | (1, 1, 1) | Scale (X, Y, Z) |
anchor | Vec3 | (0, 0, 0) | Pivot offset (X, Y, Z) — rotation/scale orbit this point |
opacity | Number | 1 | Layer opacity (0 = transparent, 1 = opaque). Editable, wirable, keyframable. |
Gotchas
Shader code written for Shadertoy or in ISF format is detected and converted automatically. Where detection fails, the code runs as plain GLSL or WGSL instead, which may not match what the source expected. The log records the result.
Width and Height apply only in generator mode, with no image wired into Content In and Use Canvas Size off. With an image connected, or with Use Canvas Size on, the output resolution follows the input or the canvas.
Compute shaders get full GPU access, including storage textures and arbitrary writes. Fragment shaders are restricted to per-pixel sampling and output. Use Compute only where the effect needs that access. Most image effects run as Fragment, and more predictably.
Worked example
Add a Shader node. Leave Content In unconnected to work as a generator.
Open the shader code editor and write your WGSL, adding an
@paramline for anything that should be a live control, for example a colour or a brightness value.Turn off Use Canvas Size and set Width/Height for a specific output resolution instead of following the canvas.
Wire an image into Content In to process existing footage instead of generating from nothing.
See also
Hydra · Visual Plugin · Attribute Wrangle · Rasters (images)