Shader Playground (GLSL)

About Shader Playground (GLSL)

Write GLSL fragment shaders and see them rendered live on a fullscreen WebGL quad — Shadertoy-style. Comes with built-in uniforms (iTime, iResolution, iMouse), a starter gallery, FPS readout, and frame screenshot export. Pure WebGL 2 in your browser, no library, no upload. Compile errors highlight inline so you can iterate fast.

How to Use Shader Playground (GLSL)

Create, test, and export live WebGL fragment shaders using built-in GLSL uniforms and real-time rendering.

1. 1

   Open the Shader Playground editor

   Launch the tool to access the live GLSL editor and the fullscreen WebGL rendering quad.

2. 2

   Write or paste your GLSL code

   Input your fragment shader code into the editor using standard uniforms like iTime, iResolution, and iMouse.

3. 3

   Debug and iterate using inline errors

   Check for highlighted compile errors in the editor and monitor the FPS readout to optimize your shader performance.

4. 4

   Interact with the live shader preview

   Use your mouse to manipulate the iMouse uniform and observe how the visuals react in real-time.

5. 5

   Export your shader as a PNG

   Use the frame screenshot export feature to save a high-quality image of your rendered shader output.

Estimated time: PT2M

Frequently Asked Questions

Related Articles

Shader Playground: Live GLSL Fragment Shader Editor

Learn how to create WebGL graphics with Shader Playground (GLSL). Write fragment shaders, use iTime uniforms, and export PNG screenshots in real-time.