Koko Shaders

Writing your first shader

Koko Shaders is a live GLSL playground. Code your shader entry logic inside the mainImage function in the editor pane:

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx);
    fragColor = vec4(color, 1.0);
}

Press COMPILE or hit Ctrl+Enter (or Cmd+Enter on macOS) to instantly render the shader outputs on the preview canvas on the left.

Uniforms & Channels

Utilize built-in uniforms to drive motion, viewport scaling, and interactivity:

iResolution: Dimensions of rendering viewport in pixels (vec3)
iTime: Live playback elapsed time in seconds (float)
iFrame: Accumulating frame counter integer (int)
iMouse: Mouse drag coordinates (vec4)

Bind input textures to iChannel0–iChannel3 using selectors at the bottom of the editor. Texture choices include random Noise, Keyboard status buffer, and the procedural Cubemap A skybox.

Multipass Simulations

Split complex shader logic across multiple renders using offscreen passes:

Buffer A–D: Rendered sequentially offscreen before the final frame. Double-buffering allows passes to read their own output from the previous frame to carry out simulations.
Common: Put shared equations, functions, and definitions here. Common code is automatically prepended to every other active pass.

Click the + button next to the pass tabs to add new buffers to your shader playground.

Keyboard Shortcuts

`Ctrl/Cmd + Enter` or `Ctrl/Cmd + S`	Compile code & Save autosave draft
`Alt + Space`	Play / Pause playback render
`Alt + R`	Rewind playback time to 0 and clear buffers
`Tab` / `Shift + Tab`	Indent / Dedent selection blocks