Fork me on GitHub

GPU Shader Experiments

Real-time procedural 3D scene generation using ray marching and distance field (also known as 'sphere tracing') accelerated rendering techniques.

Distance Field - Lighting, shadows, AO and camera animation. High-resolution render with anti-aliasing and depth-of-field effect.

Distance Field - Waves - plane deformation, simple reflections.

Fractal - real-time 3D Sierpinski triangle fractal formula from here. High-resolution render with anti-aliasing.

Mandelbulb - real-time 3D mandelbulb fractal - with cool animation of the fractal power factor - formula from here. High-resolution render with anti-aliasing.

Mandelbox - explore the strange world of the mandelbox! Another very cool 3D fractal in real-time, see this thread for more info.

Mandelcube - Borg Cube?! Outside a more solid looking version of the mandelbox fractal.

Mengersponge - Inside the menger sponge fractal - a three-dimensional analog of the Sierpinski carpet, apparently.

Mengersponge 2 - A modified menger sponge cube - idea and original formula from IQ. This one looks nice with anti-aliasing on - and isn't too slow considering it's real-time!

Trefoil Knot - a set of interesting knot shapes - play with the parameters to create different variations.

Trefoil Knot 2 - on a classic checkerboard floor material with noise texture on the knot surface, plus real-time depth-of-field effect when anti-aliasing is enabled.

Distance Field - Alien Lake - plane deformation with noise textures, reflections and post effects.

Animated CSG shape - animation of various cut out shapes.

Polyhedra Playground - lots of shape possibilities using the 'cut and fold' icosahedral polyhedra generation technique.

Polyhedra Playground 2 - more advanced combination of 'cut and fold' - generates more elaborate shapes. High-resolution render with anti-aliasing and depth-of-field effect.

Polyhedra Playground 3 - textured polyhedra shapes shown as faces, vertices and segments.

Distance Field - Glows - trying out sub-surface scattering glow effects. High-resolution render with anti-aliasing and depth-of-field effect.

Distance Field - Columns - more sub-surface scattering glow effects on larger objects, with some wizzy camera animation.

Distance Field - Mountains in the sunset - several techniques combined and refined, including real-time fractal noise based terrain generation, natural lighting and height based fogging. Inspiration is again from IQ's amazing work. High-resolution render with anti-aliasing.

Distance Field 1 - my first effort once I got the technique working! Pretty basic compared to the others here, but you have to start somewhere right?

Lots of code/ideas for these demos come from reading and experimenting with techniques from the following resources:

Ray Marching Toolbox thread (

Ray Marching Beginners thread (

The general technique is explained from page 21 onwards in the above PDF link. If you want to understand this stuff read through the PDF and links above!

...but they don't work on my machine!

These Web-GL demos work best on Linux or Mac which have good native OpenGL support. Follow these instructions to get them working in Chrome or FireFox in Windows. E.g. in FireFox about:flags enable webgl-prefer-native-gl=true and also webgl-force-enabled=true.