website articles
raymarching distance fields
In 2008 I made some experiments in raymarching again, inspired by distance field optimizatios for parallax mapping, Alex Evan's work (2006) and also the classic quaternionic Julia set tracing algorithms such as Keenan Crane's (2005) and the original paper by Sandin, Hart and Kauffman (1989) and my own experiments improvement to the previous (2001). But this time, instead of baking the distance fields on textures or compute them through complex dynamics, I decided to push the technique a bit see how far it could go with simple mathematical distance fields. As a result I created half a dozen images using this technique alone without any other method involved, some of which made it into demoscene productions, like this four.



A raymarched procedural signed distance field, step by step modeling, shading and ligthing


Raymarching of distance field proved super powerful for creating rich images with complex shapes procedurally and interesting efficient lighting effects in a minimal amount of code. Not only the actual content creation code modeling was small, but the actual renderer itself, the whole technical setup to sinthetize images was ridiculously compact comparing to a mesh based rasterizer or raytracer. So, the exercise became really fruitful and I produced 5 images in 2008 alone that I presented to the "4 kilobyte Procedural Image" category of different demo partys across Europe. Those images where created in the many cores of the CPU in a tile based manner. Later that same year, 2008, I gave a presentation about the technique, which you can find here, which became relativelly influencial to some of the youngest demosceners who didn't know about the technique and wanted to jump into the art of procedural modeling.

As soon as the GPUs became more advanced and they finally gor to support conditional branching in their shader architectures, all these techniques became implementable in the GPU directly with equally minimal amount of rendering code and setup. As other demosceners started creating amazing 4 kilobytes demos as real-time raymarched distance fields, the expectations for the quality of the images grew and so did my interest in keeping pushing my own skills. This page is a collection of some of those (real-time) images that I created over the last decade, sorted from newest to oldest. Most of them come with a link to the source code and a realtime version that runs on your web browser. Beware that this same shaders copy-and-pasted to a native C++ GL executable run usually about 2 times faster (the browser GLSL to HLSL translator imposes some penalties, but I'm okey paying those for the sake of maximing reach for the art work).

Some more technical info in this website on how the images were made:

Modeling articles: Lighting articles:
Distance Functions Better Terture Inteporlation
Soft Shadows Beetter Fog
Texturing when raymarching Filtering Procedural Patterns
Soft Minimum Simple Pathtracing
Value Noise Derivatives Outdors Lighting

This website contains quite a few other relevant articles, I only listed the main ones here, so go, browse and explore them to learn more.


greek temple, 2017



This image was born a a live coding improv session for the studens of UPenn, although I spend a couple of days working after the live coding was done. The temple is made of basic domain repetition of 6 or 7 boxes and cylinders. The most intersting bit is probably the lack of global illumination - instead, the rich bounce lighting in the temple is achieved by colorzing the relevant areas by hand positioned colors. Also, for the sake of an interesting composition, the light direction and that lits the ocean and terrain is different than the direction of the light that lits the temple. The source code in here: https://www.shadertoy.com/view/ldScDh and the Youtube video is here: https://www.youtube.com/watch?v=j5cctu1XGF0.
fractal cave, 2016



The was a menger sponge fractal with some variations and a heavy domain distortion. The image was path-traced though the raymarching in the signed distance field. The source code in here: https://www.shadertoy.com/view/Xtt3Wn.
rainforest - 2016



This was an attempt to raymarch a signed distance field of a tree-populated terrain. Trees are mere spheres with some basic noise displacement distributed on a voronoi pattern. The most interesting part is the heavy use of analytical derivatives of noise to compute fast normals and slopes, which helped a lot speed up the raymarching process of both terrain (the bigger the slope, the smaller the step size - you can read on the Lipschitz constant). The source code is here: https://www.shadertoy.com/view/4ttSWf and the Youtube version of it here: https://www.youtube.com/watch?VqYROPZrDeU.
snail, 2015



The Snail was one of my all time favoirute images, because it looks good and tells a little story. It was mostly a modeling exerise, by using simple distance functions blended together smoothly. The shell was interesting to make, and the translucent feeling of the snail itself took me a while to get right. The source code in here: https://www.shadertoy.com/view/ld3Gz2 and the Youtube video is here: https://www.youtube.com/watch?v=__G43hELHL0. You canalso see the creation process of the image in the video at the begining of this article.
elephants - 2016



Since the Snail worked so well, I tried to make elephants too, with the same exact techniques. This proved to be more difficult, and the results are only mediocre. In particular, the modeling was difficult to make for me by just typing formulas, so I left it unfinished and only added detail that would be seen from this camera angle. The trees are sllipsoids with some domain distortion, and the terrain a distance field to a plane with displacement. The source code is here: https://www.shadertoy.com/view/4dKGWm and the Youtube version of it here: https://www.youtube.com/watch?vga8FZzv5GE.
sculpture III, 2015



Just like Sculpture II below, this was an (domain) deformed sphere through here. The distortion was made with four octaves of sine waves. The source code in here: https://www.shadertoy.com/view/XtjSDK and the Youtube video is here: https://www.youtube.com/watch?v=30SK2aO7b6U.
arlo - 2015



This was mostly a procedural modeling exercise with signed distance field. By using simple distance functions blended together smoothly, I was able to replicate the main character of Pixar's movie The Good Dinosaur. I didn't have time to pose it in a more interesting action, so he's looking foward and stiff. The most interesting part in this drawing was the use of ray differentials to do proper texture filtering in a raymarching context. The source code is here: https://www.shadertoy.com/view/4dtGWM and the Youtube version of it here: https://www.youtube.com/watch?yMpG6qEb8js.
eve arrives, 2015



Eve was my first attempt at modeling an actual character. And I chose her because she is simple - she's made of basic ellipsoids and sphere that are smooth blended together. The background detail is done with domain repetition of one box. The source code in here: https://www.shadertoy.com/view/llsXRX and the Youtube video is here: https://www.youtube.com/watch?v=8qzkME-3Dq8.
mushroom - 2015



For this drawing I tried to create rocks by a technique that I saw the user TDM use for one of his shaders: start with a sphere and cut bigger spheres of it to create a semi sharp rock. It worked more or less fine, I got some interesting rocks. The source code is here: https://www.shadertoy.com/view/4tBXR1 and the Youtube version of it here: https://www.youtube.com/watch?gA6g4XWPjI8.
antialias, sort of - 2014



This was an attempt to antialiasing the screen-space edges of the raymarched distanece fields. By usign ray differentials, one can estimate how much of the pixel footpring (pixel frustum) does approximatelly intersect the geometry, given that at each marching step we heave the distance to the closest surface. That was used in this image to compute partial coverage per near-intersection, and them they were all composited fron to back to give the correct smooth image without edge pixelixation. The source code in here: https://www.shadertoy.com/view/llXGR4.
sculpture II - 2014



This was another quick experiment on domain distoriton through here. In this case, a sphere got distorted by a sine wave of a sine wave of a sin wave of a sin wave... of a sin wave. The result: a beatuful shape. The source code is here: https://www.shadertoy.com/view/4ssSRX and the Youtube version of it here: https://www.youtube.com/watch?c6EwLCIhaxs.
canyon - 2014



A simple terrain in this case. Some bits are floating in the air since it was defined as a true 3D field, not as a height-map based distance field. Adding white snow on a red/yellow terrain alwats works and it's a cheap way to get good results without doing much effort on actual shading/texturing/surfacing. The source code in here: https://www.shadertoy.com/view/MdBGzG and the Youtube video of it here: https://www.youtube.com/watch?v=Jf9MlYtkJM0.
worms - 2014



This one was improvised over a night, and it featured some domain repetition with only three cylinders modeled, and domain distgortion to make them curve along the vertical axis. The source code is here: https://www.shadertoy.com/view/XsjXR1 and the Youtube version of it here: https://www.youtube.com/watch?v=wT6-rLSm3a4.
fish swimming - 2014



The interesting asped of this signed distance field image is the way the texturing was done. Since there are no meshes or vertices for the modeling of the fish, there is no place to store UV coordinates that can deform with the model itself. Hence, the texturing needs to be done differently. In this case I was able to make the animation of the fish invertible such that each point on the surface would be able to know where it came from in the res pose of the fish and do the noise and pattern lookups there. That way the textures didn't swim on the surface of the fish as they did in the Insect drawing below. The fish did swim actually, with some simple sine waves and noise. The source code in here: https://www.shadertoy.com/view/ldj3Dm and the Youtube video of it here: https://www.youtube.com/watch?v=9EMTquFBr8Q.
dolphin - 2014



This was my attempt at doing water splashes. That was done by doing some displacement of the water plane with an exponential shape based on the proximity of the dolphin to the water. Indeed, the signed distance field representation can be used beyond finding marching and shadow or occlusion computation - in this case helps the water know about the dolphin. The dolphin itself was made with a few cylinders and some other smoothly blended primitives. The source code is here: https://www.shadertoy.com/view/4sS3zG and the Youtube version of it here: https://www.youtube.com/watch?v=Hx0LjmxFp78.
woods - 2013



In this case a simple camera rotation was enough to hide the domain repetition of the trees. The interesting part is that I had to fake the lighting to the point of bending the light itself along the depth of the drawing: the direction of the sun light is different in the foreground and in the background (interpolated between those two poses). Tha allowed me to get the patch of light in the red mushroom by the camera and the nice side lighting in the tree in the background. Modeling wise, the trees are cylinders with an exponentially decaying radious along its axis, all smoothly blended together with the smooth minimun formula, and some noise on top as a displacement. The source code in here: https://www.shadertoy.com/view/XsfGD4.
rounded voxels - 2013



This was an exercise to integrate together fast ray-casting though a regular grid and raymarching inside the grid cells. Basically, the ray marches quickly though a volumetric regular grid, which can be done efficiently with a few additions and integer mask operations, and when found a grid cell to be not empty, a raymarcher takes over to find the intersection of the signed distance field degining the rounded boxes. If no intersection happens, the control is returned to the grid marcher. The source code is here: https://www.shadertoy.com/view/4djGWR and the Youtube version of it here: https://www.youtube.com/watch?v=FkT8nIwol5U. You can also see this 360 video of the same shader with a slightly different cube distrivution: https://www.youtube.com/watch?v=3EXNrPHG6Lg.
volcanic - 2013



This was a serious attempt at getting some decent outdoors lighting wihtout resorting to global illumination. I wrote an article about it here. Modeling was based mostly on value noise, and there's also some smoke added as a second raymarching pass. The code is here https://www.shadertoy.com/view/XsX3RB and a Youtube pre-rendered version of it here: https://www.youtube.com/watch?v=QfvzfWgW6H4.
wavy - 2013



This was an attempt to pretty colors. It used some domain deformation through wrapping like the one I described here, but in 3D and with only one level of indirection (the rendering is slow enough as it is). The source code is here: https://www.shadertoy.com/view/ldX3zS.
angels - 2013



Angels used some basic domain repetition to create many flying creatures despite I only had one. The differences in the animations between the different creatures was made by taking the cell id to offset the animation formula (which was based on cosine waves). The creatures themselves were made with some simple fractal recursion of ellipsoids. The code is here https://www.shadertoy.com/view/lssGRM.
insect - 2013



This shader was one of the first to use the smooth minimun formula to blend shapes together (legs and body). It also performs some analytic inverse kinematic to position the legs automatically in the terrain without simulation or integration. The source code is here: https://www.shadertoy.com/view/Mss3zM and a Youtube video here: https://www.youtube.com/watch?v=HaQ_KWAVR60.
piano - 2013



This was an exercise in combining true lighting with painted lighting. By "painted" I mean that it wasn't computed though shadow casting or pathtracing, but that it color was injected artificially in specifig areas and objects in the scene to convey ("fake") expensive lighting effects. For example, some of the light in the bottom part of the wall was added artificially, and the window from which the light comes in doesn't exist, but was shaped by hand with the formula of a square. On the other hand, this drawing performed true reflections. The code is here https://www.shadertoy.com/view/ldl3zN.
rocks - 2013



This drawing was based on a voronoi pattern again, like Leizex (see below), and was mostly an exercise on shading simple rocks. However it's interesting to see how now this could be done in realt-time in the GPU while Leizex (2008) wasn't real time at all!Source code here: https://www.shadertoy.com/view/MsXGzM.
fruxis - 2012



I made this one for the Trsac Demo party. It was my raymarched procedural distance field that was implemented in the GPU (GLSL).It was also my first to use a pathtracer (using this algorithm).
cell - 2013



This was my first procedural signed distance field exercise in Shadertoy (WebGL) (you can find the source code here: https://www.shadertoy.com/view/Xdl3R4).

The interesting bit was my attempt to fake the subsurface scattering of light by raymarching inside the volume of the geometry to measure thickness.
leizex - 2008



This was a one day production. I wanted to check how it is to directly raymarch a three dimensional voronoi pattern. Ir did work, although it was very slow.

Again shading is fake, there is no light source, neither there is ambient occlusion or anything. Colors are procedurally asigned to points in space.
bridge - 2009



This is a sketch really, but it never got completed, due to the lack of artistic inspiration at the time. The intereseting part is probably the technique used for creating the grass, which is a voronoi based bombing approach.
slisesix - 2008



This image was the first image I generated by signed distance field raymarching technique.

It contained smooth blending of geometric primitives, domain repetition and soft shadows. It won the 1st prize of 4 Kilobytes Procedural Graphics of Euskal Party 2008 in Spain. I also made a small video of the scene that you can grab here or watch directly here in youtube.
organix - 2008



Organix won the 1st position at the Function Demoparty in Hungary. It was CPU computed and it took about 40 seconds to render in a standard machine back then at 1280x720 resolution. Needles to say this is raltime these days in the GPU.

The interesting part is taht the lighting is fake, in the sense that shadows and ambient occlusion are procedurally painted on the geometry, not computed by raycasting or anything similar.