Ray marching part 2: DE operations and CSG
Tags: graphics, tutorial
Published: 2020-09-28 16:33:08

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:
{% post ramislicer/ray-marching-the-unappreciated-cousin-of-ray-tracing-1iad %}

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.
![The three basic boolean operations, union, difference, and intersection (or intersrction according to this image)](https://www.simlab-soft.com/3d-products/docs/help/9/composer/English/imgs/drex_boolean_operations_group_custom_2.png)

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:
```glsl
// 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):
```glsl
float _distance = sphereDE(current_pos, vec3(0.0), 1.0);
```
And change it so it uses `sceneDE()`:
```glsl
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`:
```glsl
// 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()`!
```glsl
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:
```glsl
// a and b are NOT interchangeable
float opDiff(float a, float b) {
    return max(-a, b);
}
```
Adjust `sceneDE()` to use the difference operator:
```glsl
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:
```glsl
// a and b are interchangeable
float opIntersect(float a, float b) {
    return max(a,b);
}
```
And use it:
```glsl
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.](https://www.shadertoy.com/view/3dtyz2)

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](https://iquilezles.org/www/articles/distfunctions/distfunctions.htm) (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:
```glsl
// 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:
```glsl
vec3 opTranslate(vec3 pos, vec3 moves) {
    return pos - moves;
}
```
Alright! Now we can use all of these in the scene DE:
```glsl
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!](https://www.shadertoy.com/view/wdtyRj)
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.