Wireframe – Issue 20, 2019

wfmag.cc \ 39

Live coding and ray marching

Toolbox

// Total distance is keeping track of how
// much the ray has traveled
// thus far.
totalDistance += dist;

// If we hit an object or are close enough
// to an object,
if (dist < smallNumber){
// return the distance the ray had to
// travel normalized so be white
// at the front and black in the back.
return 1. - (vec4(totalDistance) /
maxDist);

}

if (totalDistance > maxDist){

return vec4(0.); // Background color.
}
}

return vec4(0.);// Background color.
}

// main is a reserved function that is going
// to be called first
void main(void)

{

// We are redefining the UV coordinates

// (aka texcoords) to be 0,0 in the

// middle of the screen this is because its

// easier to work with the camera at

// (0,0) instead of (0.5,0.5) for the SDFs

vec2 uv = -1. + 2. * v_texcoord;

// Unfortunately our screens are not square

// so we must account for that.

uv.x *= (resolution.x / resolution.y);

vec3 rayOrigin = vec3(uv, 0.);

vec3 camOrigin = vec3(0., 0., -1.);

vec3 direction = camOrigin + rayOrigin;

// This reserved variable is what we must

// set the final color to

gl_FragColor = trace(rayOrigin, direction);

}

If everything works out, you should see

something like Figure 3. It will vary a bit across

screens with different resolutions.

I hope that you find this tutorial useful

in learning about this new direction of

rendering. You can find this code and the

next steps you can take to learn more about

live coding, shading, and ray marching

at charstiles.com/raymarching.

 The visual part of an AV

set with {arsonist}.