Topics2 min read

Raytracing Demo

Real-time raytraced Cornell box and advanced lighting techniques.

Reading Time
2 min
Word Count
182
Sections
5
Try It Live

Remix the technique

Use the playground as a lab: swap constants, trim passes, and see which parts of the effect are structural versus just polish.

Open Technique Lab

This page demonstrates real-time raytracing techniques implemented entirely in fragment shaders. No 3D geometry is used - everything is computed mathematically by casting rays from the camera through each pixel.

Path Traced Cornell Box

A path-tracing style renderer with an orbiting camera, soft shadows, and color bleeding from the walls.

Cornell Box with Boxes

Adding the classic two boxes to the scene using raymarching with signed distance functions.

Reflective Spheres

Adding reflections to the raytracer with two spheres of different materials.

Animated Light

Dynamic lighting with a moving light source and orbiting sphere.

How Raytracing Works

These demos use raymarching with signed distance functions (SDFs). For each pixel, we cast a ray from the camera and step along it, checking the distance to the nearest surface. When close enough, we've found a hit and can calculate lighting.

Performance

Raymarching is computationally expensive. The demos above use 60-80 steps per pixel. In production, you'd optimize with bounding volume hierarchies, early termination, and lower step counts where possible.

See Also

  • dot - Essential for lighting calculations
  • normalize - Creating unit vectors for rays
  • reflect - Computing reflection directions