Shader sandbox

The Shader sandbox is for prototyping fragment shaders. Edit GLSL in a Monaco code panel, see the result render in real time on a canvas next to the editor.

Open it

Title bar Tools menu, then Pipeline tools, then Shader sandbox.

What you edit

The editor pane runs Monaco with GLSL syntax highlighting. The default shader is a small Fourier wave demo so the canvas isn’t empty when you open the tab.

You’re editing the fragment shader only. The vertex shader is built in (a full-screen quad). This is the same shape Shadertoy uses, and most fragment-shader effects port across cleanly.

Built-in uniforms

Three uniforms are wired automatically:

• iResolution (vec2): canvas width and height in pixels.
• iTime (float): seconds since the tab opened.
• iMouse (vec4): mouse position. xy is current position (origin top-left, with y flipped to OpenGL convention). zw is the position when the mouse last clicked.

Use them like:

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0, 2, 4));
  gl_FragColor = vec4(col, 1.0);
}

Compile loop

Forge debounces compilation by 250 ms after your last keystroke. When the shader compiles cleanly, the canvas updates and the bottom pane lists the active uniforms. When it doesn’t, the bottom pane shows the GLSL compiler error in red.

The animation runs on requestAnimationFrame. The canvas resizes when you resize the panel and respects devicePixelRatio up to 2× for clean scaling on high-DPI displays.

Output

Save with the toolbar button to write the file to <project>/.forge/generated/shaders/<timestamp>.glsl (or .frag if you preferred that extension).

Notes

• WebGL2 is required. If your machine doesn’t have a WebGL2-capable GPU or driver, the canvas shows a “WebGL2 unavailable” message.
• No texture inputs. Adding texture sampler uniforms (and a way to upload reference images) is on our roadmap.
• The vertex shader is fixed. You’re prototyping fragment-stage effects, not full pipelines.