BUILDSENIOR

Build a Shader Playground

120 minutes

0 completed

webglglslcreative-codingshader

Description

Build a live GLSL shader editor with real-time preview, uniforms, and preset management.

Requirements

Split-pane: code editor on the left, WebGL preview on the right

Live recompilation as you type (debounced, ~300ms)

Built-in uniforms: u_time, u_resolution, u_mouse

Shader error display with line numbers

At least 5 preset shaders (plasma, raymarching, fractal, water, fire)

Fullscreen preview mode

Copy shareable URL with encoded shader

Use WebGL2 with a fullscreen quad. The editor can use CodeMirror, Monaco, or a simple textarea with syntax highlighting.

Custom uniform inputs (color pickers, sliders)

Screenshot/GIF export

Vertex shader editing alongside fragment shader

You will be guided through MCP setup before the timer starts