DEV Community: Rami-Slicer

Ray marching part 2: DE operations and CSG

Rami-Slicer — Mon, 28 Sep 2020 16:33:08 +0000

In my previous post about ray marching I talked about what ray marching is and how you can do a basic implementation of it in GLSL. If you haven't read it yet, you will want to at least skim through it before following along to this one since we will be reusing the code there:

Ray marching part 1: the unappreciated cousin of ray tracing

Rami-Slicer ・ Sep 28 '20

#graphics #tutorial

In this part, we will be adding more distance estimators, some operations to manipulate these distance estimators, and learn how to combine DEs into more complex scenes.

Without further ado, let's start!

Let's start simple by learning how to combine shapes. As you may know, there are 3 basic boolean operations: Union, difference, and intersection.

To take advantage of these though, we need a way to add multiple objects. For this we can create a scene DE that allows us to use more than one DE. First we make a function for it, it'll just have a sphere for now:

// IMPORTANT: In Shadertoy this MUST be put after both the DEs and the operators. idk if it's the same for normal OpenHL
float sceneDE(vec3 pos) {
    return sphereDE(pos, vec3(0,0,0), 1.0);
}

Then find this line in the march() function (you may have used different variable names):

float _distance = sphereDE(current_pos, vec3(0.0), 1.0);

And change it so it uses sceneDE():

float _distance = sceneDE(current_pos);

Now we are ready to create the boolean functions.

Union is the simplest so let's start that. We'll create a new function, opUnion:

// a and b are interchangeable
float opUnion(float a, float b) {
    return min(a,b);
}

If you look closely, you can see that this function is basically just min(). The only reason we are defining this function is so the code is more understandable.
Now we can try it out by adding it to sceneDE()!

float sceneDE(vec3 pos) {
    return opUnion(
        sphereDE(pos, vec3(0,1,1), 1.0),
        sphereDE(pos, vec3(0,0,0), 1.0)
    );
}

If you did it correctly you should see two spheres right next to each other!

Let's try adding a difference operator next. This time we get to use the max() function:

// a and b are NOT interchangeable
float opDiff(float a, float b) {
    return max(-a, b);
}

Adjust sceneDE() to use the difference operator:

float sceneDE(vec3 pos) {
    return opDiff(
        sphereDE(pos, vec3(0,-1,-0.5), 1.0),
        sphereDE(pos, vec3(0,0,0), 1.0)
    );
}

Finally, we can add a intersection operator. It's incredibly simple, just like the union:

// a and b are interchangeable
float opIntersect(float a, float b) {
    return max(a,b);
}

And use it:

float sceneDE(vec3 pos) {
    return opIntersect(
        sphereDE(pos, vec3(0,-1,-0.5), 1.0),
        sphereDE(pos, vec3(0,0,0), 1.0)
    );
}

Now we have the three basic boolean operators! Here's a shader showcasing all three of them.

So far we've used nothing but spheres to create our scenes. I think it's about time we brought in another DE to spice things up. If you look at this page (my go-to reference for raymarching) the next DE after a sphere is the DE for a box. However, there's also another one for a box but with optional rounded edges. For flexibility's sake we'll use that one:

// Original from here: https://iquilezles.org/www/articles/distfunctions/distfunctions.htm
float roundBoxDE( vec3 p, vec3 b, float r) {
    vec3 q = abs(p) - b;
    return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0) - r;
}

Since this one doesn't have translation built in, we'll make a translation operation:

vec3 opTranslate(vec3 pos, vec3 moves) {
    return pos - moves;
}

Alright! Now we can use all of these in the scene DE:

float sceneDE(vec3 pos) {
    float u = opUnion(
        sphereDE(pos, vec3(-2.5,-1,-0.5), 1.0),
        roundBoxDE(opTranslate(pos, vec3(-2.5, -1.0, -1.5)), vec3(0.75,0.75,0.75), 0.0)
    );
    float d = opDiff(
        sphereDE(pos, vec3(0,-1,-0.5), 1.0),
        roundBoxDE(opTranslate(pos, vec3(0.0, 0.0, 0.0)), vec3(1.0,1.0,1.0), 0.0)
    );
    float i = opIntersect(
        sphereDE(pos, vec3(2.5,-1,-0.5), 1.0),
        roundBoxDE(opTranslate(pos, vec3(3.0, -0.0, 0.7)), vec3(1.0,1.0,1.0), 0.0)
    );
    return min(u,min(d,i));
}

Here's what it should look like!
Again, my fingers are getting super tired and I have other things I need to do, so I'm going to leave it off here.

Ray marching part 1: the unappreciated cousin of ray tracing

Rami-Slicer — Mon, 28 Sep 2020 02:46:19 +0000

Ray tracing

We all know about ray tracing, where you shoot out a ray for each pixel and use fancy math to recursively bounce it around and color the pixel. If you repeat this process for every pixel, you can get a lovely rendering of your scene that, if made by a talented artist, can look almost indistinguishable from real life.

Unfortunately, ray tracing has some downsides, namely that it can be insanely slow. A single frame can take hours to render, which may be fine for animated movies since their creator most likely has very powerful computers dedicated to rendering, however it's quite a nuisance for hobbyists since they usually don't have gigantic renderfarms all to themselves.

However, there is another.

Ray marching

Enter ray marching: the unappreciated cousin of ray tracing.
Ray marching is quite similar to ray tracing, however it has some interesting quirks that make it an interesting option for real-time graphics demos and games.
First, I should note that ray marching is not a replacement for rasterization nor ray tracing, it's just a cool alternative.
Alright! Let's get started.

How it works

Ray marching is, as I said previously, quite similar to ray tracing. The difference is that ray marching "marches" rays along their vectors and then uses distance equations to decide how far to march the ray, or if it has intersected with an object. We can then return stuff from the marching function like the position it intersected at, how many times it marched, or how far it marched.

How to implement it

Now that you know roughly how it works, let's actually make a ray marcher. We'll use GLSL, so you'll need to set up OpenGL or use something like Shadertoy. If you don't feel like following along, here's the code on Shadertoy

First of all, we need some stuff at the top of the shader:

#version 420
// you can change #version if you want to
// the resolution, set to the window's dimensions.
uniform vec2 resolution;
// uncomment if you are going to implement a movement system
//uniform vec3 camPos;

Let's start with the simplest part, a distance estimator. Specifically, a sphere's DE:

float sphereDE(vec3 pos, vec3 spherePos, float size) {
    return length(pos - spherePos) - size;
}

This one is super simple and pretty self explanatory so I won't really explain it, however keep in mind that other DEs are more complex than this. If you don't feel like spheres are for you than here's a big list of other shapes.

Now we can write the marching function which does the actual marching!

vec3 march(vec3 origin, vec3 direction) {
    float rayDist = 0.0;
    const int NUM_STEPS = 32; // doesn't matter much right now
    const float MIN_DIST = 0.001; // threshold for intersection
    const float MAX_DIST = 1000.0; // oops we went into space

    for(int i = 0; i < NUM_STEPS; i++) {
        vec3 current_pos = origin + rayDist*direction;

        // Use our distance estimator to find the distance
        float _distance = sphereDE(current_pos, vec3(0.0), 1.0);

        if(_distance < MIN_DIST) {
            // We hit an object! This just adds a subtle shading effect.
            return vec3(rayDist/float(NUM_STEPS)*4.0);
        }

        if(rayDist > MAX_DIST) {
            // We have gone too far
            break;
        }

        // Add the marched distance to total
        rayDist += _distance;
    }
    // The ray didn't hit anything so return a color (black, for now)
    return vec3(0.0);
}

Now we have all we need to raymarch except a main function.
Let's write it:

void main( out vec4 fragColor, in vec2 fragCoord ) {
    // normalized coordinates, resolution should be the window/screens pixel dimensions.
    vec2 uv = fragCoord / resolution.xy * 2.0 - 1.0;
    uv = uv / vec2(0.6, 1.0);

    // camPos can be a uniform if you want to move around
    vec3 camPos = vec3(0.0, 0.0, -3.0);
    vec3 rayDir = vec3(uv, 1.0);

    // march!
    vec3 shaded_color = march(camPos, rayDir);

    // set the color!
    fragColor = vec4(shaded_color, 1.0);
}

And we are done! Once you've put these together, you should be able to see a circle that subtly gets lighter towards the edges.

Improvements

While what we just made was cool and all, it's not that exciting. It's monochrome, dull, and there's not much to it other than a sphere.
We cold make a struct for a ray, and then we'd be able to return all sorts of useful values:

struct Ray {float distance; vec3 endPos; float minDist; bool hit;};

So here is my final version:

const int NUM_STEPS = 32; // doesn't matter much right now
const float MIN_DIST = 0.001; // threshold for intersection
const float MAX_DIST = 1000.0; // oops we went into space

struct Ray {float totalDist; float minDist; vec3 endPos; bool hit;};

// The distance estimator for a sphere
float sphereDE(vec3 pos, vec3 spherePos, float size) {
    return length(pos - spherePos) - size;
}

Ray march(vec3 origin, vec3 direction) {
    float rayDist = 0.0;
    float minDist = MAX_DIST;

    for(int i = 0; i < NUM_STEPS; i++) {
        vec3 current_pos = origin + rayDist * direction;

        // Use our distance estimator to find the distance
        float _distance = sphereDE(current_pos, vec3(0.0), 1.0);

        minDist = _distance < minDist ? _distance : minDist;

        if(_distance < MIN_DIST) {
            // We hit an object!
            return Ray(rayDist, minDist, current_pos, true);
        }

        if(rayDist > MAX_DIST) {
            // We have gone too far
            break;
        }

        // Add the marched distance to total
        rayDist += _distance;
    }
    return Ray(MAX_DIST, minDist, origin + rayDist * direction, false);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord / iResolution.xy * 2.0 - 1.0;

    // scale the ra
    uv = uv / vec2(0.6, 1.0);

    vec3 camPos = vec3(0.0, 0.0, -3.0);
    vec3 rayDir = vec3(uv, 1.0);

    Ray marched = march(camPos, rayDir);

    vec3 color = marched.hit ? 
        vec3(marched.totalDist/pow(float(NUM_STEPS), 0.8)*4.0) : // shading
        vec3(0.0) + vec3(pow(clamp(-1.0 * marched.minDist + 1.0, 0.0, 1.0), 4.0) / 2.0); // glow

    fragColor = vec4(color,1.0);
}

Here's how it looks!
There are infinity other additions you can make like colors, CSG (boolean operations between DEs), or more shapes to play around with. However my fingers are getting really tired so I'm going to stop here.

I also highly recommend watching CodeParade's intro video about ray marching as well as his video about marble marcher, a game made with ray marching and pretty fractals.

Part 2