GLSL Sphere Marching

Project Description

Sphere marching is a technique in ray marching that helps render scenes with implicit surfaces, especially useful for complex shapes or those defined by mathematical formulas.

Technologies Used

#ThreeJS#GLSL

Process

I implemented the following in the fragment shader to render onto a full screen quad:

Signed Distance Function (SDF): A function that calculates the distance from any point in space to the surface you want to render. For a sphere, this is simply the difference between the point's distance to the sphere's center and the sphere's radius.

Ray Marching: Imagine shooting rays out from the camera into the scene. Sphere marching iteratively samples points along each ray using the SDF.

Sphere Bounding: At each sample point, the SDF tells you how far you are from the surface. Sphere marching uses this distance to estimate the biggest sphere that can fit around the current position on the ray. This helps determine the next step size along the ray.

Surface Intersection: By taking these larger steps guided by the SDF, sphere marching efficiently marches the ray closer to the surface. The iteration stops when the SDF indicates you're close enough to the surface (within a threshold).

Results

The results were quite nice and I've also added an orbital camera that is controlled by the mouse to change viewing angles.