🔮

Rendering & Computer Graphics

From the z-buffer to Monte Carlo path tracing — the algorithms that produce every pixel on every screen. Explore ray marching, SDF geometry, and volumetric effects.

3 simulations GLSL · WebGL 2 Ray Marching · SDF · Fractals

Category Simulations

Real-time graphics algorithms in WebGL 2 / GLSL

Rendering is just solving the light transport equation — tracing where photons come from before they hit the camera. Rasterisation is a fast approximation; ray tracing is the physically correct answer; ray marching lets you render geometry defined by equations instead of triangles.

✨
★★★ Advanced
GPGPU Particle System
Hundreds of thousands of particles updated entirely on the GPU via ping-pong float textures. Pick a behaviour — curl noise, N-body attractors, boids or Lorenz — and orbit the swarm.
Three.js GPGPU GLSL Particles
🌀
★★☆ Moderate
Fractal Explorer
GPU-accelerated Mandelbrot and Julia sets rendered by the fragment shader's escape-time algorithm. Infinite zoom with smooth colouring bands.
GLSL Escape-Time Smooth Colouring
🔮
★☆☆ Beginner
Kaleidoscope Shader
Fragment shader mirrors and repeats UV space with n-fold symmetry. Polar coordinate tricks and fract() create infinitely tiling patterns.
GLSL UV Tricks Symmetry
🌈
★★☆ Moderate
Rainbow (Mie Scattering)
Physically-based rainbow rendered by tracing sunlight through spherical water droplets. Snell's law, internal reflection, and wavelength dispersion.
GLSL Mie Scattering Optics
💡
★★★ Advanced
Ray Marching & SDF
Sphere tracing signed distance fields: render any geometry with a formula in a fragment shader. Soft shadows, ambient occlusion, and smooth boolean ops.
GLSL Ray Marching SDF
🌑
★★★ Advanced
Path Tracing
Unbiased Monte Carlo light transport. Each pixel fires multiple random rays that bounce until they hit a light. Progressive refinement each frame.
WebGL 2 Monte Carlo BRDF
🎨
New★★☆ Moderate
Procedural Textures
Noise-based marble, wood, cloud, fire, Voronoi and lava textures generated entirely in GLSL — no image files, infinite resolution, animatable parameters.
GLSL Perlin Noise Worley

Key Concepts

Algorithms behind every rendered pixel

Ray Marching
Cast a ray from the camera; advance it by the minimum SDF value at each step (sphere tracing). Guaranteed to reach the surface without overshooting. Enables rendering of fractals, infinite repetition, and procedural geometry with no mesh data.
Signed Distance Field
A function sd(p) returning the distance to the nearest surface — negative inside, positive outside. Primitives combine with min (union), max (intersection), and smin (smooth blend). Any geometry is one formula away.
Monte Carlo Rendering
Approximate the rendering integral ∫ L(x, ω) dω by averaging N random ray samples. Error ∝ 1/√N. Importance sampling — shooting more rays toward bright regions — dramatically reduces variance.
BRDF
Bidirectional Reflectance Distribution Function: ratio of outgoing radiance in direction ωₒ to incident irradiance from ωᵢ. Lambertian BRDF = 1/π (perfectly diffuse). Microfacet BRDFs (GGX) model glossy metals and dielectrics.

Learning Resources

Articles and references for graphics programmers

Reference GLSL Cheatsheet Types, built-in functions, uniforms, precision qualifiers, and common shader patterns including SDF primitives and noise. → Article Ray Marching & SDF Techniques Sphere tracing algorithm, SDF primitives, smooth boolean operations, soft shadows, AO, and normals from SDF gradient. → Article Ray Tracing Algorithm From pinhole camera to path tracing. BVH acceleration, refraction (Snell’s law) and Fresnel reflectance. →
All articles →

About Rendering & Computer Graphics Simulations

Ray tracing, shaders, particles, and real-time rendering — explored

Rendering and computer graphics simulations demonstrate the algorithms that produce images from mathematical descriptions of 3D scenes. Ray-tracing demos trace primary rays from a virtual camera through each pixel, compute Phong and physically-based BRDF shading, and extend paths for reflections, refractions, and soft shadows. WebGL shader playgrounds expose the GLSL code running on the GPU for every drawn fragment.

Particle-system simulations implement emitters, forces, and blending modes to produce fire, smoke, sparks, and nebula effects. Procedural texture generators use Perlin noise, Worley noise, and fractal Brownian motion to create seamless tileable materials. These techniques are the foundation of modern real-time game engines, film VFX pipelines, and scientific visualisation software.

Each simulation in this category is built with accuracy and interactivity in mind. The underlying mathematical models are the same ones used in academic research and professional engineering — just made accessible through a web browser. Changing parameters in real time and observing the results is one of the most effective ways to build intuition for complex scientific and engineering concepts.

Key Concepts

Topics and algorithms you'll explore in this category

Interactive ModelReal-time browser simulation with live parameter controls
WebGL / Canvas 2DHardware-accelerated rendering in the browser
Mathematical FoundationDifferential equations and numerical integration
Open SourceMIT-licensed code — inspect, fork, and learn
No Install RequiredRuns directly in Chrome, Firefox, Safari, Edge
Educational FocusBuilt to explain the underlying science clearly

Frequently Asked Questions

Common questions about this simulation category

What is ray marching and how does it differ from ray tracing?
Ray tracing intersects rays with explicit geometry (triangles, spheres). Ray marching instead steps a ray forward in small increments and evaluates a Signed Distance Field (SDF) at each step — the SDF tells how close the ray is to any surface, so you can take larger steps safely (sphere tracing). This allows rendering of procedural shapes, fractals, and smooth boolean combinations without any mesh data.
What is a Signed Distance Field (SDF)?
An SDF is a mathematical function sd(p) that returns the distance from point p to the nearest surface — negative inside the object, positive outside, zero on the surface. Combining SDFs with min() gives union, max() gives intersection, and smooth-min() gives a soft blend between shapes. Every shape in the Ray Marching simulation is defined by a few lines of GLSL math rather than thousands of triangles.
How does path tracing produce photorealistic images?
Path tracing is an unbiased Monte Carlo method: for each pixel, it fires multiple rays into the scene, bouncing them off surfaces according to the BRDF (bidirectional reflectance distribution function) until they hit a light source. Averaging thousands of such paths gives a physically accurate solution to the rendering integral. Error decreases as 1/√N where N is the sample count — more samples means less noise.
How are procedural textures generated without image files?
Procedural textures are computed entirely in the GPU fragment shader using noise functions. Perlin noise produces smooth organic variation; Worley (cellular) noise creates cell-like patterns for stone and skin; fractal Brownian motion (fBm) layers octaves of noise for clouds and marble. Because they are mathematical functions evaluated per pixel, they scale to infinite resolution and can be animated by passing time as a uniform.

Other Categories