Custom GLSL Shaders
Write custom fragment shaders, including ISF and Shadertoy compatibility, for advanced visual effects.
Write custom fragment shaders for advanced visual effects or generative patterns.
Opening the Editor
Click the Custom GLSL tab in the parameters sidebar to open the shader editor.
Modes
- Global Post-FX — Your shader processes the final composited output (like a custom post effect)
- Per-Layer Generator — Your shader replaces the selected layer's noise generator
Writing Shaders
The editor provides a GLSL fragment shader environment with these built-in uniforms:
| Uniform | Type | Description |
|---|---|---|
uTime | float | Current animation time |
uResolution | vec2 | Canvas resolution in pixels |
uMouse | vec2 | Normalized mouse position (0–1) |
uTexture | sampler2D | Current composite texture |
Auto-Detected Parameters
Any uniform float, vec2, vec3, vec4, or int you declare in your shader is automatically exposed as an interactive slider in the Shader Parameters section below the editor.
In per-layer generator mode, uTexture (or iChannel0 in Shadertoy shaders) contains the composite output of all layers below the current one, so you can write shaders that process existing generator output.
Shadertoy Compatibility
The editor auto-converts common Shadertoy conventions:
iResolution→uResolutioniTime→uTimemainImage(out vec4, in vec2)→ standardmain()
ISF (Interactive Shader Format) Mode
The editor supports ISF-spec shaders. Click the ISF toggle button in the toolbar to enable ISF mode.
ISF shaders use a JSON metadata header at the top of the file defining inputs with types, ranges, and defaults:
/*{
"DESCRIPTION": "My ISF Generator",
"INPUTS": [
{ "NAME": "speed", "TYPE": "float", "DEFAULT": 1.0, "MIN": 0.0, "MAX": 5.0 },
{ "NAME": "mode", "TYPE": "long", "DEFAULT": 0, "VALUES": [0, 1, 2], "LABELS": ["A", "B", "C"] },
{ "NAME": "tint", "TYPE": "color", "DEFAULT": [1.0, 0.5, 0.0, 1.0] },
{ "NAME": "enabled", "TYPE": "bool", "DEFAULT": true },
{ "NAME": "center", "TYPE": "point2D", "DEFAULT": [0.5, 0.5] },
{ "NAME": "inputImage", "TYPE": "image" }
]
}*/Supported ISF input types:
- float — Slider with MIN/MAX/DEFAULT from JSON
- bool — Checkbox toggle
- long — Dropdown menu with LABELS/VALUES
- color — Color picker with alpha slider
- point2D — X/Y coordinate sliders
- image — Maps to the composite texture input
ISF built-in variables: TIME, RENDERSIZE, isf_FragNormCoord, FRAMEINDEX
ISF texture functions: IMG_NORM_PIXEL(tex, uv), IMG_PIXEL(tex, px), IMG_SIZE(tex)
Shader Presets
The toolbar includes a Presets dropdown for saving and loading your own shaders.
- Click Save to save the current shader code as a named preset
- Select a preset from the dropdown to load it
- Click Del to remove a user preset
- Presets persist across sessions via localStorage
Controls
- Auto-compile — Shaders recompile automatically after 500ms of inactivity
- Compile button — Manual compile (also Ctrl+Enter)
- Reset — Restore the default shader
- Tab — Inserts 4 spaces for indentation
Shader code is saved to localStorage per mode.