Do I need to know C or graphics programming to use this?

GLSL is its own small C-like language, so basic loops, conditionals and float math will look familiar to anyone who has touched C, Java or JavaScript. The preset shaders are commented, which is usually enough to start tweaking values without prior GPU experience.

Why does my shader compile but the preview is just black?

Common causes are: writing to `gl_FragColor` outside the main function, returning `vec3` instead of `vec4`, or dividing by zero in a noise function. Open the browser console — WebGL prints helpful warnings even when the compile itself succeeds.

Can I sample a texture or feed in my own image?

Yes — click Upload Image in the preview toolbar to bind any PNG or JPG as `sampler2D u_texture`. A companion `u_hasTexture` float flips to 1.0 once the image loads so your shader can branch on whether a texture is bound, the same pattern Shadertoy uses for its channel inputs.

What WebGL version does this use?

WebGL 1 with GLSL ES 1.0. That means `varying` instead of `in/out`, `gl_FragColor` instead of a named output, and no integer textures. Shaders written for WebGL 2 or desktop OpenGL 3+ will need light syntax changes to run here.

Is anything sent to a server?

No. Compilation and rendering happen on your GPU through the browser. The shader source never leaves the page; if you close the tab without copying, the code is gone.

WebGL Shader Playground

Write and preview GLSL shaders in real time

AutoSpeed1.0x0 FPS

Preset

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec2 m = u_mouse / u_resolution;

  // Animated gradient with mouse interaction
  float d = distance(uv, m);
  float wave = sin(uv.x * 10.0 + u_time * 2.0) * 0.5 + 0.5;
  float pulse = smoothstep(0.4, 0.0, d);

  vec3 col1 = vec3(1.0, 0.45, 0.2);  // orange
  vec3 col2 = vec3(0.85, 0.3, 0.5);  // rose
  vec3 col3 = vec3(0.2, 0.1, 0.05);  // dark

  vec3 color = mix(col3, col1, wave * uv.y);
  color = mix(color, col2, pulse * 0.8);
  color += 0.05 * sin(u_time + uv.xyx * 20.0);

  gl_FragColor = vec4(color, 1.0);
}

Uniforms

float u_time

vec2 u_resolution

vec2 u_mouse

int u_frame

sampler2D u_texture

float u_hasTexture

sampler2D u_noise

Upload an image to bind u_texture. u_hasTexture is 1.0 when an image is loaded, 0.0 otherwise.

u_noise is a built-in 256×256 tileable noise texture — sample it for organic patterns without writing hash functions. u_frame counts rendered frames since the last compile.

What is WebGL Shader Playground?

Write GLSL vertex and fragment shaders and see the rendered output instantly via WebGL. No local setup needed. Use it to learn shader programming, prototype effects, or try out GPU-accelerated graphics.

Built-in uniforms include `u_time` for animation, `u_resolution` for canvas size, `u_mouse` for pointer position, `u_frame` for the rendered frame count and a ready-made `sampler2D u_noise` tileable noise texture. Upload any image to bind it as `sampler2D u_texture` so your fragment shader can sample it directly. Ten preset shaders (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), an animation-speed slider, a live FPS readout, an auto-compile toggle, a pause control to freeze the timeline, a shareable URL that round-trips the entire source, and a PNG export of the live frame round out the toolkit.

How to use

Write or paste your GLSL fragment shader code into the editor. A default shader is already loaded.
The live preview updates as you type. Built-in uniforms include time, resolution, and mouse position.
Export your shader as a PNG screenshot or copy the code to use in your own WebGL projects.

When to use

Learning GLSL syntax without setting up a C++ or Three.js project locally.
Prototyping a fragment-shader effect before porting it into a game engine or website.
Generating animated background screenshots for portfolios, slides or social posts.

Result

A game developer prototyping a water ripple effect writes a fragment shader with sine waves and the time uniform. The preview panel shows the animated result updating live.

FAQ

Do I need to know C or graphics programming to use this?: GLSL is its own small C-like language, so basic loops, conditionals and float math will look familiar to anyone who has touched C, Java or JavaScript. The preset shaders are commented, which is usually enough to start tweaking values without prior GPU experience.
Why does my shader compile but the preview is just black?: Common causes are: writing to `gl_FragColor` outside the main function, returning `vec3` instead of `vec4`, or dividing by zero in a noise function. Open the browser console — WebGL prints helpful warnings even when the compile itself succeeds.
Can I sample a texture or feed in my own image?: Yes — click Upload Image in the preview toolbar to bind any PNG or JPG as `sampler2D u_texture`. A companion `u_hasTexture` float flips to 1.0 once the image loads so your shader can branch on whether a texture is bound, the same pattern Shadertoy uses for its channel inputs.
What WebGL version does this use?: WebGL 1 with GLSL ES 1.0. That means `varying` instead of `in/out`, `gl_FragColor` instead of a named output, and no integer textures. Shaders written for WebGL 2 or desktop OpenGL 3+ will need light syntax changes to run here.
Is anything sent to a server?: No. Compilation and rendering happen on your GPU through the browser. The shader source never leaves the page; if you close the tab without copying, the code is gone.

WebGL Shader Playground

What is WebGL Shader Playground?

How to use

When to use

Result

FAQ

Related Tools

3D Box/Package Mockup

3D Scatter Plot

3D Terrain Viewer

3D Product Showcase

3D Text Creator

360 Image Viewer

WebGL Shader Playground