Mandelbrot Fractal — Infinite Zoom
The Mandelbrot set is the classic "first fractal" — an infinitely complex shape generated by iterating a simple equation. Our WGSL implementation uses smooth iteration coloring and animated zoom to produce hypnotic, endlessly deep visuals.
The core math is surprisingly simple: for each pixel, iterate z = z² + c and color based on how quickly the value escapes to infinity. With smooth coloring, each frame becomes a vibrant palette of gradients that pulse and shift as the camera zooms deeper into the fractal boundary.
Ethereal Smoke — Fluid Noise Simulation
This effect layers multiple octaves of Simplex noise to create organic, flowing smoke that drifts and swirls across the canvas. Each layer moves at a different speed and scale, producing a convincing sense of depth and turbulence.
The technique is called fractal Brownian motion (fBm) — a staple of procedural graphics. By stacking noise functions with increasing frequency and decreasing amplitude, you can generate everything from clouds and fire to marble textures and alien landscapes.
Particle Galaxy — Orbital Star Systems
A swirling galaxy of particles, each following its own orbital path around a gravitational center. The effect combines trigonometric spirals with distance-based brightness to create a convincing star field.
What makes this special: the entire simulation runs in a single fragment shader. No vertex buffers, no particle systems — just math applied per-pixel. Each "star" is a bright point calculated by testing the pixel's position against spiral arm equations. The result is silky smooth at 60fps, even with thousands of visible points.
Raymarched World — 3D Without Meshes
Raymarching is a rendering technique that creates 3D scenes entirely through math — no 3D models, no meshes, no geometry buffers. Instead, you define shapes as mathematical distance functions and march rays through the scene pixel by pixel.
Our gallery example renders a complete 3D world with rolling hills, ambient occlusion, soft shadows, and atmospheric fog — all computed in real-time on the GPU. The Signed Distance Function (SDF) approach also makes it trivial to combine shapes: unions, intersections, and smooth blends become one-line operations.
This technique is a favorite of the demoscene community and is increasingly used in game development for volumetric effects, terrain rendering, and procedural worlds.
Aurora Borealis — Procedural Light Curtains
The northern lights, recreated entirely in WGSL. This shader simulates the characteristic curtain-like waves of aurora borealis using layered sine waves, domain warping, and carefully tuned color gradients that shift from emerald green to violet.
The technique uses domain warping — feeding the output of one noise function as the input to another — to create the organic, flowing motion that makes auroras so mesmerizing. Combined with vertical falloff and additive blending, the result is a stunning natural phenomenon rendered in real-time.
What Makes These Effects Possible?
All five effects run entirely on the GPU via WebGPU — no JavaScript animation loops, no Canvas 2D, no external libraries. The GPU executes the shader for every pixel in parallel, which is why you get buttery smooth 60fps even with complex mathematical operations.
WebGPU's advantages over WebGL — explicit pipeline control, compute shaders, better memory management — make it possible to push these effects even further. Read our in-depth WebGPU vs WebGL comparison to understand why. And if you're just starting out, our beginner tutorial will get you writing shaders in minutes.
Want to create your own?
Fork any gallery shader into the playground and start experimenting. Upgrade to Pro for HD exports and private saves.