WebGL + GLSL + Three.js

Shader Lab

Exploring the art of GPU programming. Particles, noise, waves, and visual effects rendered in real-time with WebGL shaders.

Experiments

23 shaders
Particles

GPGPU Particle System

Thousands of particles computed on the GPU using render targets. Interactive cursor attraction and organic motion.

Three.js GPGPU FBO
Noise

Procedural Noise Gradients

Simplex and Perlin noise combined with color gradients. Organic, flowing patterns generated in real-time.

GLSL Simplex Perlin
Waves

Animated Wave Mesh

Vertex displacement creating smooth wave animations. Inspired by ocean surfaces and audio visualizers.

Vertex Shader Displacement
Dissolve

Dissolve Effect

Objects disintegrating into particles with emissive edges. A classic game effect recreated with shaders.

Fragment Shader Noise
Ray Marching

SDF Ray Marching

Signed distance functions rendered without polygons. Smooth unions, infinite repetition, and fractal geometry.

SDF GLSL Fractals
Post-Process

Post-Processing FX

Bloom, chromatic aberration, vignette, scanlines, film grain, and glitch effects combined in a single pipeline.

EffectComposer Bloom Glitch
Audio

Audio Reactive

Shaders driven by sound frequencies. Spectrum analysis, wave tunnels, particle bursts, and kaleidoscope patterns.

Web Audio FFT Microphone
Morph

Shape Morphing

Smooth transitions between different geometries using GPU-computed vertex interpolation with noise displacement.

Three.js Vertex Shader Interpolation
Fluid

Navier-Stokes Fluid

Real-time fluid dynamics simulation using the Navier-Stokes equations. Paint with velocity and watch colors swirl.

WebGL Navier-Stokes FBO
Reaction

Reaction-Diffusion

Gray-Scott model producing organic patterns like coral, cells, and fingerprints. Multiple preset patterns to explore.

Gray-Scott Organic Simulation
Black Hole

Gravitational Lensing

Raymarched black hole with accretion disk, photon sphere, and gravitational light bending. Interstellar vibes.

Ray Marching Physics Space
ASCII

ASCII Art Renderer

Real-time 3D scenes converted to ASCII characters. Brightness mapped to character density for retro terminal aesthetics.

Post-Process Retro Text
Boids

Flocking Simulation

Craig Reynolds' boids algorithm with separation, alignment, and cohesion. Emergent swarm behavior from simple rules.

AI Emergent Simulation
Clouds

Volumetric Clouds

Raymarched volumetric clouds with density-based lighting. Fluffy, realistic cloud formations drifting across the sky.

Volume Ray Marching FBM
Fire

Procedural Fire

Realistic flames using layered noise and domain warping. Includes ember particles and heat distortion.

Noise Domain Warp Particles
SSS

Subsurface Scattering

Light penetrating translucent materials like skin, wax, marble, and jade. PBR with wrap lighting and rim effects.

Three.js PBR Materials
Iridescent

Holographic Materials

Thin-film interference creating rainbow oil slick and soap bubble effects. View-dependent color shifting.

Three.js Fresnel Interference
Crystal

Gem Refraction

Chromatic dispersion splitting light into rainbow colors. Internal reflections and sparkle like real gemstones.

Three.js Refraction Dispersion
Halftone

Halftone Effect

Classic print-style dot matrix rendering. Multiple styles including dots, lines, CMYK, and crosshatch patterns.

Post-Process Print CMYK
Mandelbrot

Mandelbrot Zoom

Infinite fractal exploration with smooth coloring. Click to zoom, auto-zoom to famous locations like Elephant Valley.

Fractal Math Interactive
Ocean

Ocean Waves

Gerstner wave simulation with realistic water physics. Adjustable wave height, choppiness, and wind speed.

Three.js Gerstner Physics
Toon

Cel Shading

Cartoon-style rendering with discrete lighting bands and ink outlines. Click to cycle through vibrant colors.

Three.js NPR Outline
Terrain

Terrain Erosion

Procedural landscapes with hydraulic erosion simulation. Mountains, valleys, snow caps, and realistic coloring.

Procedural Erosion Landscape