Shader Playground

Shader Playground

Write and preview GLSL fragment shaders in real-time. Create stunning visual effects with WebGL. Includes preset shaders: plasma, mandelbrot, fire, raymarching

A fragment shader runs in parallel on every pixel of every frame on the GPU — for image effects, generative art, and demoscene visuals. The famous Shadertoy showcases what is possible: ray-marched landscapes, fractal animations, fluid simulations, all in a few hundred lines of GLSL. This playground lets you write GLSL fragment shaders in your browser, preview at 60fps, and includes presets for common techniques (plasma, mandelbrot, fire, signed distance functions for raymarching).

What a fragment shader actually is

  • Code that runs once per output pixel, in parallel on all pixels simultaneously. A typical 1920×1080 frame is 2 million pixel invocations; on GPU each is independent and parallel.
  • Inputs (uniforms): time, resolution, mouse position, audio, prior frame.
  • Output: one RGBA color per pixel. Written to gl_FragColor (GLSL 1.0) or to a designated output (GLSL 3.30+).
  • No side effects per pixel — pure function from inputs + position to color. Determinism = same input → same output, repeatable.
  • No control over neighboring pixels (during one pass). To access other pixels, use textures or multi-pass rendering.

Working example: a simple plasma effect

Input

Classic demoscene plasma — colored waves shifting over time

Output

#version 300 es
precision highp float;

uniform float u_time;
uniform vec2 u_resolution;

out vec4 fragColor;

void main() {
  vec2 uv = (gl_FragCoord.xy * 2.0 - u_resolution) / u_resolution.y;

  float t = u_time;
  float v = sin(uv.x * 10.0 + t);
  v += sin(uv.y * 10.0 + t * 1.3);
  v += sin((uv.x + uv.y) * 10.0 + t * 0.7);
  v += sin(length(uv) * 10.0 + t * 1.5);
  v *= 0.25;

  vec3 col = 0.5 + 0.5 * cos(vec3(0.0, 2.0, 4.0) + v * 3.14159);

  fragColor = vec4(col, 1.0);
}

What is happening:
  - uv: normalized pixel coordinates, -1 to 1.
  - v: sum of sine waves over space and time — creates the moving "plasma" pattern.
  - col: phase-shifted cosines in RGB produce smooth color rotation.

Runs at 60fps on any GPU made after ~2010.

Plasma is the "Hello World" of shaders. Once you can write this, signed-distance-function (SDF) rendering for ray-marched 3D scenes is the natural next step — Inigo Quilez's Shadertoy tutorials are the standard reference.

Common shader techniques

  • UV mapping — convert pixel position to normalized coordinates ([0,1] or [-1,1]). Foundation for everything.
  • Noise — pseudo-random per pixel. Hash functions, Perlin, Simplex, Worley noise. Used for textures, distortion, generative shapes.
  • SDFs (Signed Distance Functions) — math expression that gives distance to surface. Combine multiple SDFs (union, intersection, smooth-min) to model 3D scenes purely in code.
  • Ray marching — cast a ray per pixel, step along it, compute SDF at each step, render when close to surface. The Shadertoy method for 3D rendering without polygons.
  • Post-processing — chromatic aberration, bloom, FXAA — many "screen-space" effects run as full-screen shaders.
  • Mandelbrot / Julia sets — fractal iteration per pixel. Classic shader exercise.
  • Image effects — blur, sharpen, color grading, edge detection. Convolution kernels applied per pixel.

When to reach for this tool

  • You are learning GLSL or computer graphics.
  • You are designing background animations for a website that benefit from generative motion.
  • You are doing demoscene-style art for fun or competition.
  • You are debugging a shader from a Three.js / WebGL project and want a faster iteration loop.

What this tool will not do

  • It will not run vertex shaders for full 3D scenes. Pure fragment-shader playground; for full 3D pipeline, use Three.js / Babylon.js / raw WebGL.
  • It will not support compute shaders (GPGPU). Browser WebGL 2 has limited compute support; WebGPU (newer) does more but is not what this tool targets.
  • It will not optimize your shader. Naive ray marching can be slow; performance optimization (early-exit, distance bounds, lower precision) is the developer's responsibility.
  • It will not run all Shadertoy shaders unmodified. Shadertoy has its own buffer system and conventions; some shaders need porting.

Frequently asked questions

Is GLSL the same as HLSL?

No, but similar. GLSL is OpenGL's shading language; HLSL is DirectX's. Both are C-like, both have similar functionality, syntax differs in details (texture sampling, semantic decorations). For browser work: GLSL. For Unity / Windows: HLSL. Both compile to GPU code; the principles transfer.

What is "ray marching"?

A technique for rendering 3D scenes using signed distance functions instead of polygons. For each pixel: cast a ray, step along it, check the SDF distance at each step. When you hit a surface (SDF ≈ 0), compute lighting. Surreal forms (fractals, infinite scenes) are easy in ray marching; hard in polygon-based rendering.

Why does my shader produce different output on different GPUs?

Some floating-point operations are implementation-defined. Different GPUs / drivers handle precision, special functions (sin, cos, log) slightly differently. For pixel-perfect cross-device output, use only well-defined operations and high precision. For artistic shaders, the differences usually do not matter.

Are shaders performant?

On modern GPUs, yes — fragment shaders for full-screen effects run at hundreds of FPS at 1080p. Complex effects (ray marching with many SDFs, heavy noise) can drop to 30-60 FPS. Optimization tactics: simplify SDFs, lower precision (mediump instead of highp), early-exit ray marching.

Can I write shaders without math knowledge?

Basic shaders: yes (copy patterns, tweak constants). Advanced shaders: math knowledge essential. SDFs are geometry, lighting is dot products of vectors, smooth animation is calculus, fractals are complex math. Most pros have at least undergraduate-level linear algebra / calculus.

Where do I learn more?

The Book of Shaders (Patricio Gonzalez Vivo) — most-recommended intro. Inigo Quilez's articles (iquilezles.org) — advanced SDF and ray-marching. Shadertoy.com — see what is possible. Each shader on Shadertoy is open-source by convention; read code that inspires you.

Related tools

3D Editor

Create and edit 3D scenes in your browser. Add primitives, transform objects, adjust materials. Export to GLTF/GLB. Free online 3D modeling tool

Particle Effect Generator

Create canvas-based particle systems with presets like confetti, snow, fire, rain, stars. Adjustable parameters. Export as PNG or WebM. Free online particle effects maker

CSS Animation Builder

Build CSS keyframe animations visually with timeline editor. Create custom @keyframes. Free online CSS animation generator with live preview

SVG Path Editor

Draw and edit SVG paths visually with Bezier curves. Create icons and shapes. Free online SVG path builder with code output

Last updated · E-Utils editorial team