Construct geometry and repeating patterns (fractals) using signed distance functions (sdf).
Fractals > Signed Distance Function (SDF) Fractals
Lots of things around SDF functions and fractals, there are the key things we'll talk about about here:
1. What are SDF Functions?
2. Simple SDF (WebGL/GLSF) Example (Sphere)
3. 'Flat' Fractal (2D)
4. 3D Shapes (Solid Sphere, Hollow-Sphere, Shell, ...)
5. Adding function (create more complex shapes)
6. Multiple shapes (hard way vs smart way)
7. Multiple operations to build fractals
8. Scene full of fractals
9. Limitations, challenges (soft fractals without details)
What are 'Signed Distance Functions' (SDFs)?
A signed distance function is a mathematical concept used in computer graphics to describe the distance from a point in space to the closest surface of an object, with a positive or negative sign indicating whether the point is inside or outside the object.
Takes a 'point' (usually 3d point) and returns a single number (usually a float).
For example, in 3D sphere, the signed distance function at a point (x, y, z) would be the radius of the sphere minus the distance from (x, y, z) to the center if the point is inside the sphere, and negative if it's outside.
This function is valuable in rendering techniques like ray-marching, where it helps determine intersections with objects in a scene efficiently.
The SDF function requires a single parameter for the position that it's calculating the distance so the surface - other arguments can be passed as well - such as the radius, ..
SDF WebGL/GLSL for 'Circle'
The following provides a starting point - as the examples will work with WebGL - since it's easy to write and edit interactive fragment shaders for the SDF functions (which will run in a web-browser).
The starting point isn't very exciting - but gives you your first 'sdf' function.
Output for the 2-dimensional circle SDF function. Generates a circle using 'sdf' function - each pixel checks the sdf function to see if the point is inside or outside of the shape.
if (sdf < 0.0) { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Inside the circle, color red } else { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // Outside the circle, color black } } `;
// Smooth coloring based on the number of iterations float smoothedIterations = float(iterations) + 1.0 - log(log(length(z))) / log(2.0); float colorValue = smoothedIterations / float(MAX_ITERATIONS);
// Set color: inside of the Mandelbrot set is red if (iterations == MAX_ITERATIONS) { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color for inside of the set } else { gl_FragColor = vec4(colorValue, colorValue, colorValue, 1.0); // Grayscale color for outside of the set }
// Set color //gl_FragColor = vec4(colorValue, colorValue, colorValue, 1.0); } `;
function createProgram(gl, vertexShader, fragmentShader) { const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program)); return null; } return program; }
function main() { const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); if (!gl) { console.error('Unable to initialize WebGL. Your browser may not support it.'); return; }
// Compile vertex and fragment shaders const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// Create shader program const program = createProgram(gl, vertexShader, fragmentShader); gl.useProgram(program);
function createProgram(gl, vertexShader, fragmentShader) { const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program)); return null; } return program; }
function main() { const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); if (!gl) { console.error('Unable to initialize WebGL. Your browser may not support it.'); return; }
// Compile vertex and fragment shaders const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// Create shader program const program = createProgram(gl, vertexShader, fragmentShader); gl.useProgram(program);
Without lighting the 3D sphere looks exactly the same as the 2D sphere - you can't see depth or changes in the surface - but we can write a simple function to calcualte the surface normal from the point.
To calculate the surface normal using the SDF function, you can approximate it by taking the gradient of the SDF at a given point.
vec3 getNormal( vec3 pt ) { float d = rayCast( pt ); float s = 0.01; vec3 a = vec3(pt.x + s, pt.y, pt.z ); vec3 b = vec3(pt.x, pt.y + s, pt.z ); vec3 c = vec3(pt.x, pt.y, pt.z + s); vec3 normal = normalize(vec3( rayCast(a) - d, rayCast(b) - d, rayCast(c) - d) ); return normal; }
The fragment shader code that calculates the normal for the surface using the SDF function and then use it to calculate lighting.
// Calculate surface normal vec3 n = getNormal( rayPos + rayDir*res ); vec3 lightDirection = vec3(0.0, 0.0, 1.0); // Calculate lighting intensity - angle between the normal andlight direction fragColor = fragColor * min( dot( n, lightDirection ), 1.0 );
Combining Shapes (Unions)
This is a crucial component - as you can easily add or subtract simple SDF functions to create new shapes. This is important for 'fractals' - as you'll see, it means you can combine shapes to make smaller sub-shapes.
For instance, it is possible to combine two distance fields using a simple `minimum(a,b)`` operator. As an example we could draw the union of two spheres.
Add or subtract SDF functions to construct new shapes.
This would give us two spheres with unit radius, one centered at origo, and another at `(2,0,0)`. The same way it is possible to calculate the intersection of two objects, by taking the maximum value of the fields.
Finally, if you are using signed distance functions, it is possible to subtract one shape from another by inverting one of the fields, and calculating the intersection (i.e. taking `max(A, -B)`).
Take the concept of combining objects further - apply local transforms to create amazing effects (e.g., stretch, rotate, skew and then add them together - you can also do this in a 'loop'.
Construct a 'rayCast' function which can combine multiple different sdf functions in one place (transform, add, subtract, ...).
float rayCast( vec3 position ) { float t = 0.0; // far distance t = sdfSphere(position, vec3(0.0,0,0), 1.0 );
Example of different common sdf shape functions (cube, sphere, cyclinder, capsule, torus).
Cube-Sphere Union
float rayCast(vec3 ptin) { float t = 0.0; t = sdfCube(ptin, vec3(0.0, 0.0, 0.0), vec3(1.0)); t = min(t, sdfSphere(ptin, vec3(0.0, 0.0, 0.0), 1.2)); return t; }
Union of a cube and sphere - create 'cubesphere'.
If you use 'max' - to subtract the shapes, you'll get this:
float rayCast(vec3 ptin) { float t = 0.0; t = sdfCube(ptin, vec3(0.0, 0.0, 0.0), vec3(1.0)); t = max(t, sdfSphere(ptin, vec3(0.0, 0.0, 0.0), 1.2)); return t; }
Max (subtract) cube-sphere (instead of adding).
Cube Hole (Cube Cut Cube)
Subtract a cube from a cube to hollow out the inside - initial work for later on when we'll do this recursively to build a fractal shape.
This example, the values are hard coded - for easy reading - but we can calculate the offsets and sizes later on to 'chizzel' away at a shape to make it 'fractal'.
SDF Cube - but then we position and subtract rectangles for the front, top and side - the rectangle is long and thin. Think of it, like poking a hole through the shape..
Cube in Cube (Adding and Cutting Iteratively)
Iteratively add and cut to create shapes - for example, the following adds cube and cuts out the centre.
// Note - modulus % - wasn't available till 3.0 in GL3 float mod2(float a, float b) { return a - b * floor(a / b); }
float sdfCubeCube( vec3 pt ) { float t = 1000000.0; const int Iterations = 24; const float Scale = 0.04;
float s = 1.0; for(int j = 0; j < Iterations; j++) { if ( mod2( float(j), 2.0) == 0.0 ) { t = min( t, sdfCube( pt, vec3(0), vec3(1.0)*s ) ); } else { t = max( t, -sdfCube( pt, vec3(0), vec3(1.0, 1.0, 11.0)*s) ); t = max( t, -sdfCube( pt, vec3(0), vec3(1.0, 11.0, 1.0 )*s) ); t = max( t, -sdfCube( pt, vec3(0), vec3(11.0, 1.0, 1.0 )*s) ); } s = s - Scale; } return t; }
SDF Cube in Cube
You can take the concept further by mixing on rotation - for each iteration add a small 'rotation'.
float sdfCubeCube( vec3 pt ) { float t = 1000000.0; const int Iterations = 44; const float Scale = 0.05;
if ( mod2( float(j), 2.0) == 0.0 ) { t = min( t, sdfCube( pr, vec3(0), vec3(1.0)*s ) ); } else { t = max( t, -sdfCube( pr, vec3(0), vec3(1.0, 1.0, 11.0)*s) ); t = max( t, -sdfCube( pr, vec3(0), vec3(1.0, 11.0, 1.0 )*s) ); t = max( t, -sdfCube( pr, vec3(0), vec3(11.0, 1.0, 1.0 )*s) ); } s = s - Scale; } return t; }
SDF cube in cube operations with a small rotation causing a twist and warping effect of the inner bars.
Complexity (Lots of Shapes) - 'mod'
This is all nice, but even if you can create interesting structures, there are some limitations. The above method works fine, but scales very badly when the number of distance fields to be combined increases. Creating a scene with 1000 spheres by finding the minimum of the 1000 fields would already become too slow for real-time purposes. In fact ordinary ray tracing scales much better – the use of spatial acceleration structures makes it possible for ordinary ray tracers to draw scenes with millions of objects, something that is far from possible using the “find minimum of all object fields” distance field approach sketched above.
But fractals are all about detail, and endless complexity, so how do we proceed?
It turns out that there are some tricks, that makes it possible to add complexity in ways that scales much better.
First, it is possible to reuse (or instance) objects using e.g. the modulo-operator. Take a look at the following DE:
function sdf(vec3 z) { z.xy = mod((z.xy),1.0)-vec3(0.5); // instance on xy-plane return length(z)-0.3; // sphere DE }
Example - Rotating and Repeating Cube-Spheres
// build in one is called 'mod' - but have included my own 'mymod' here - just so you can // see what it's actually doing inside the function ;) fn mymod(float x, float y) { return ( x - y * floor(x/y) ); }
t = sdfCube(pt, vec3(0.0, 0.0, 0.0), vec3(1.0)); t = min(t, sdfSphere(pt, vec3(0.0, 0.0, 0.0), 1.2));
return t; }
Mod function to create many instances of the same cube-sphere union.
Recursive Tetrahedron Fractal
Let's bring it all together - combining objects to construct fractals.
A tetrahedron may be described as a polyhedron with vertices (1,1,1),(-1,-1,1),(1,-1,-1),(-1,1,-1). Now, for each point in space, lets us take the vertex closest to it, and scale the system by a factor of 2.0 using this vertex as center, and then finally return the distance to the point where we end, after having repeated this operation. Here is the code:
d = length(z-a2); if (d < dist) { c = a2; dist=d; } d = length(z-a3); if (d < dist) { c = a3; dist=d; } d = length(z-a4); if (d < dist) { c = a4; dist=d; } z = Scale*z-c*(Scale-1.0);
Recursive subtracting tetrahedrons to construct a fractal.
Even though we do not have an infinite number of objects, like the mod - example above, the number of objects grow exponentially as we crank up the number of iterations. In fact, the number of objects is equal to 4^Iterations. Just ten iterations will result in more than a million objects - something that is easily doable on a GPU in real-time!
SDF Folding Space
When constructing fractals by iteratively combining shapes, there is a smart trick that takes advantage of 'mirroring' (or folding). This clever trick utilizes the symmetries of the fractal. For instance, if you look at the tetrahedron fractal example, you'll notice it's symetrical across certain axis - so we can use that to optimize the implementation (use folds).
Instead of scaling about the nearest vertex, we mirror points in the symmetry plane of the tetrahedron, to make sure that we arrive at the same octant of the tetrahedron - and then always scale from the vertex it contains.
Here is the code - it produces the same result - but uses folds instead - so it's more compact and efficient.
n++; } // sdf tetrahedron function return sdfTet( z ) * pow(Scale, -float(n)) - 0.01; // add 'chunky' factor
// build up tetrahendron from spheres instead of sdftet function //return (length(z) ) * pow(Scale, -float(n)) - 0.01; }
The folding operations is an interesting aspect of fractals with sdf, and builds up on 'mod' and 'combining' aspects - however, the really interesting stuff with folding happens when we throw rotations into the process. Imagine kaleidoscopic fractals - which produces fractals like the Menger Sponge.
Mixing in rotations, translations and scaling into the fold.
Lighting and SDF
Lighting helps make the fractals more beautiful - as it highlights the detail. Of course, there are more than one ways to light a scene (not just directional lighting).
Phong shading
Phong shading is a technique used to simulate the interaction between the light sources and surfaces, considering diffuse, specular, and ambient reflections, resulting in smooth shading with highlights and shadows.
Ambient Occlusion
Besides the ambient, diffuse, and specular light from Phong-shading, one thing that really improves the quality and depth illusion of a 3D scenes is ambient occlusion.
One approach is to count the number of ray steps as a very rough measure of how occluded the geometry.
Another approach is to sample the Distance Estimator at points along the normal of the surface and use this information to put together a measure for the Ambient Occlusion. This is a more intuitive method, but comes with some other shortcomings – i.e. new parameters are needed to control the distance between the samplings and their relative weights with no obvious default settings.
Glow
Glow can be added simply by mixing in a color based on the number of ray steps taken (points close to the fractal will use more ray steps, even if they miss the fractal, so pixels close to the object will glow).
Fog
Fog is also great for adding to the depth perception. Simply blend in the background color based on the distance from the camera.
Hard shadows
Hard shadows are also straight forward – check if the ray from the surface point to the light source is occluded. Hard shadows have crisply defined, sharp edges.
Soft shadows
Soft shadows are the softened shadows (feathered around the edge).
Reflections
Reflections are pretty much the same – reflect the camera ray in the surface normal, and mix in the color of whatever the reflected ray hits.
Colors
Colors can be use to visualize important information (edges or detail around a fractal).
Orbit Traps
Orbit traps is a popular way to color fractals. This method keeps track of how close the orbit comes to a chosen geometric object. Typical traps include keeping track of the minimum distance to the coordinate system center, or to simple geometric shapes like planes, lines, or spheres. In Fragmentarium, many of the systems use a 4-component vector to keep track of the minimum distance to the three x=0, y=0, and z=0 planes and to the distance from origo. These are mapped to color through the X,Y,Z, and R parameters in the ‘Coloring’ tab.
Iteration Count
The iteration count is the number of iterations it takes before the orbit diverges (becomes larger than the escape radius). Since this is an integer number it is prone to banding, which is discussed later in this post. One way to avoid this is by using a smooth fractional iteration count:
Some fractals use conditional logic inside the iteration loops (sometimes disguised as `abs` operator to avoid if statements). The Mandelbox is a good example: the sphere fold performs different actions depending on whether the length of the iterated point is smaller or larger than a set threshold. This makes it possible to keep track of a color variable, which is updated depending on the path taken.
Nutshell
Fusing signed distance functions (SDFs) with ray-tracing opens the door to a quick and powerful way to create complex interactive fractals. Combined with the processing power of the GPU; which can be executed in JavaScript using various API (like WebGL/GLSL or WebGPU/WGSL); there are no limits to what you can create!
