GLSL Fragment Shader Playground - Online WebGL Art

What is a GLSL Fragment Shader?

A GLSL fragment shader (also called a pixel shader) is a program that runs on the GPU and determines the color of each pixel on the screen. It's written in GLSL (OpenGL Shading Language) and executes in parallel for every pixel, making it incredibly fast for creating real-time visual effects, generative art, and procedural textures.

What uniforms are available in this playground?

Three uniforms are automatically provided: uniform float u_time (elapsed time in seconds), uniform vec2 u_resolution (canvas resolution in pixels), and uniform vec2 u_mouse (normalized mouse position, 0-1 range). Declare these at the top of your shader to use them.

How do I get started with shader art?

Start with the Gradient preset and experiment by changing numbers and colors. The basic pattern is: get the UV coordinates with gl_FragCoord.xy / u_resolution, then use mathematical functions like sin(), cos(), and length() to create patterns. Try the Wave, Plasma, and Kaleidoscope presets to see different techniques in action.

Is this tool compatible with Shadertoy?

Our playground uses a similar paradigm but with simpler uniforms. Shadertoy's iTime corresponds to our u_time, iResolution to u_resolution, and iMouse to u_mouse. To port a Shadertoy shader, rename the uniforms and replace mainImage(out vec4 fragColor, in vec2 fragCoord) with void main() using gl_FragColor and gl_FragCoord.

What browsers support WebGL and this playground?

All modern browsers support WebGL, including Chrome (version 9+), Firefox (version 4+), Safari (version 8+), and Edge (version 12+). Mobile browsers on iOS and Android also support WebGL. If you see a WebGL not supported message, try updating your browser or enabling hardware acceleration in your browser settings.

How do I debug shader compilation errors?

Compilation errors appear in the red error panel below the editor. The error message includes the line number where the issue was detected. Common errors include missing semicolons, undeclared variables, and type mismatches. Remember that GLSL is case-sensitive and requires strict typing. Use Ctrl+Enter (or Cmd+Enter on Mac) to manually trigger compilation.

Can I use textures or images in my shader?

This playground is designed for pure procedural shaders without external textures. However, you can create texture-like effects using noise functions, gradients, and mathematical patterns. For advanced use with textures, consider tools like Shadertoy or desktop applications like Bonzomatic or KodeLife.

How do I save or share my shader creations?

You can copy your shader code using the Copy button in the toolbar, then paste it into a text file or share it with others. You can also download a PNG screenshot of the current render using the Camera button. To resume work later, simply paste your saved code back into the editor.

Precision Qualifiers

Always declare precision highp float; at the top of your fragment shader for the best visual quality on all devices.

Time-based Animation

Use u_time with sin() and cos() to create looping animations. Multiply by different frequencies for varied motion speeds.

UV Coordinates

gl_FragCoord.xy / u_resolution gives normalized coordinates (0-1). Subtract 0.5 to center the origin for rotation effects.

Mouse Interaction

u_mouse provides normalized coordinates. Use length(uv - u_mouse) to create effects that follow the cursor.