🔮

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.

🌀
★★☆ 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

Do these simulations require installation?
No. Every simulation runs entirely in your web browser using WebGL and Canvas 2D. Nothing to install or download — open the page and the simulation starts immediately.
Can I use these simulations for teaching?
Yes — all simulations are designed to be educational and run without an account or login. They are widely used in university lectures, high-school science classes, and self-directed learning. Embed them via iframe or link directly.
What devices do the simulations support?
All simulations work on desktop browsers (Chrome, Firefox, Edge, Safari). Many work on mobile and tablets too, though some physics-heavy simulations benefit from the GPU performance of a desktop or laptop.

Other Categories