Skip to content
Ray Marching WebGL Demo cover image

Ray Marching WebGL Demo

  • WebGL
  • GLSL
  • Computer Graphics
  • Real-Time Rendering

Problem

Ray marching with signed distance functions (SDFs) is a powerful technique for rendering implicit surfaces that can’t be trivially rasterised. The challenge was building a compelling, interactive demo that runs at 60 FPS in the browser with no native plugins.

Approach

All geometry is defined analytically via SDFs in a GLSL fragment shader. Soft shadows are computed with secondary ray marches; ambient occlusion is estimated from nearby SDF samples. Procedural terrain uses layered domain-warped noise functions.

Results

FeatureDetail
FPS (Chrome, RTX 3080)60
FPS (Chrome, integrated GPU)30–45
Geometry100% SDF-based
Shader LOC~350

Fully interactive: mouse controls camera, scroll adjusts fog density.


This is a placeholder project entry. Replace with real content in Phase 8.

Tech Stack

  • JavaScript
  • WebGL
  • GLSL
GitHub Play