WebGL-based Ray-Tracing Renderer

Last modified at: | Links: GitHub URL
WebGL-based Ray-Tracing Renderer

This project was my exploration into ray tracing techniques implemented directly in web browsers using WebGL. I built this renderer to deepen my understanding of both real-time graphics programming and GPU-accelerated rendering pipelines.

For more information, please check my GitHub repository!

Project Info

  • Name: WebGL-based Ray-Tracing Renderer
  • Type: Personal Study Project
  • Tech Stack: TypeScript, Babylon.js, WebGL, GLSL
  • Development Period: September 2024

Implementation Details

Ray Tracing Implementation

  • Implemented ray-object intersection algorithms
  • Created shader-based rendering of shadows and reflections
  • Built a complete rendering pipeline using WebGL and GLSL

Acceleration Structure

  • Implemented a Bounding Volume Hierarchy (BVH) for efficient ray casting
  • Applied Surface Area Heuristic (SAH) for optimal tree construction
  • Used texture-based data structures for GPU-friendly memory access