A rendering engine created using WebGPU that implements the sphere tracing algorithm with signed distance functions to march rays across the scene. The current implementation supports rendering opaque objects alongside transparent ones. Phong lighting is used to luminate the scene with single scattering utilized to shade transparent volumes.
A simple camera has been implemented to allow for using WASD to move along the x and y directions and using EQ to move along the z direction. You can orbit the camera by clicking and dragging the mouse on the canvas.
To run the build, simply run npm start from the root folder after conducting a simple clone of the project. Then navigate to http://127.0.0.1:8080/.
Ensure that you have WebGPU enabled on your browser. This might require running the application using Chrome Canary.
Some of the great learning resources that I've used for technical help and motivation:
- The offical WebGPU Samples
- Inigo Quizel's plethora of amazing blog posts and shadertoy samples of ray marching
- Raymarching Video Tutorial by the GetIntoGameDev youtube channel
- Michael Walczyk's blogpost on raymarching
- Chris Wallis' blogpost on ray marching transparent volumes