Upgrade your browser if you can see this.

How does it work?

This demo shows that it is possible to render a 3D object defined as nothing but a boolean function (i.e. "is this (x,y,z) coordinate in the solid?"). While most algorithms for rendering operate on either triangle meshes, compositions of mathematically-defined shapes, or SDFs, this algorithm can work well on any boolean function. So how exactly does it work?

This demo uses ray casting to render each pixel of the object. In other words, for each pixel, it shoots out a ray from the camera towards the object, sees where the ray first hits the object, and uses the normal to the surface at that point to compute the brightness. It starts by rendering a low-resolution image (which can be done quickly), and then asynchronously fills in a higher-resolution version of the rendering.

Ray collisions are found using a simple line search followed by a binary search. First, points along the ray are sampled every epsilon (default 0.01) distance. Once the solid returns true for some point along the ray, a binary search is conducted along the epsilon-length segment of the ray to find exactly where the ray first hits the solid.

Once a point on the surface of the solid has been accurately found, a more complicated search is performed to calculate the normal to the surface. This algorithm uses two runs of a simple bisection search method to find two vectors which are tangent to the surface. It then takes the cross product of these two vectors to get a vector pointing in the direction of the normal.

All of this code is available on GitHub.