Ray Marching Study

Overview

This project is a focused study of ray marching fundamentals using Three.js and custom GLSL shaders.

• No visual effects or shader art experiments
• The goal was to understand the pipeline from first principles

Idea

Instead of rendering meshes, the scene is defined entirely by Signed Distance Functions (SDFs).

Each pixel reconstructs a ray from the camera and marches through space to determine if it intersects something.

This helped me to understand:

• Camera projection and its inverse
• Screen space → world space ray reconstruction
• SDF
• Why ray marching works

What I Built

• A camera near-plane aligned screen quad
• Custom vertex + fragment shader pipeline
• Per-fragment ray reconstruction using:
  • projectionMatrixInverse
  • matrixWorld
  • camera position
  • This converts: Screen → Camera Space → World Space

Understanding this transformation chain was a major focus of the study.

2. Signed Distance Function (SDF)

The scene is defined as:

float scene(vec3 p)

For any point p, it returns:

• 0 → on surface
• > 0 → outside object
• < 0 → inside object

Example (sphere):

return length(p) - radius;

This is what makes ray marching possible.

3. Ray Marching Algorithm

The ray equation:

r(t) = origin + t * direction

We step forward using the SDF:

t += distance;

Because the SDF guarantees a minimum safe distance, we never step through geometry.

This continues until:

• We hit (distance < epsilon)
• Or exceed max distance

Rendering Flow

• CPU: submits a full-screen plane (screen-aligned quad).
• Vertex shader: forwards UV coordinates to the fragment stage.
• Fragment shader:
  • Reconstructs a view ray
  • Evaluates scene(p) (combination of SDF primitives)
  • Marches along the ray until hit or miss
  • Computes lighting and outputs the final color