Ray Tracing and Ray Marching in WebGL

5/2021

Introduction

Ray tracing and ray marching in WebGL.

Background

After finishing Archon, I made a few projects to experiment with ray tracing. Of these projects, my most recent (and functional) one was done in WebGL.

Features

Ray Marching

In addition to ray tracing, I implemented a raymarching renderer. While ray marching is more intensive for (mostly) the same result, it also allows you to do other cool things like merging objects together by using a 'smooth min' function. For an example of this, switch the render mode to ray marching on scene 2.

Recursive Reflections & Refractions

By using the principles of a heap, I was able to implement recursive rays for both reflections and refractions (one or the other and simultaneously). This can be best seen in scene 4 where I have the four reflective spheres from scene 2, but add a reflective and refractive sphere in front of them and behind them.

Power of Reflections & Refractions

I added a property in my materials that allow for the power/brightness of reflections and refractions to decrease exponentially by a percentage specified in the material. This allows reflections and refractions to fade as they bounce repeatedly off a surface.

Timeline

The QuasarEngine was my first introduction to 3D rendering. Since then, I continued to do more with 3D rendering. For example, I expanded on what I had learned to use a z-buffer for my Archon project, and I later followed tutorials on building a 3D engine with ray tracing.
Basic, intuitive 3D rendering
Expanded on QuasarEngine, used a z-buffer
3
Ray Tracing
3D rendering with ray tracing & ray marching

Specifications

Language(s):WebGL
Relevant Topics:Ray Tracing
Ray Marching