Trying Out Signed Distance Fields

Again with my regular irregularity of posting. I wanted to talk briefly about a topic I found interesting, and an initial proof of concept I had with that idea.

Recently, I saw NVIDIA’s real time ray-tracing demo. I’ve always been a facinated by ray-traced graphics and impressed when methods from ray-tracing can be translated into rasterization-based rendering systems.

After seeing this video, I started to look into methods on real-time ray-tracing using WebGL.

The main concept occurring here is Signed Distance Field Ray Marching. This works similar to normal ray marching, except your next point of evaluation is based on calculating your nearest distance to any object and then traversing the ray by that distanced. The “Signed” part of this is pretty simple, if your distance has a positive sign, your outside any object; however, if the sign is negative, your inside the object.

I stumbled onto this post by Jamie Wong, and this one by Íñigo Quílez(who also referenced by Wong). Both of these works proved to be a great help, and in no time I was able to develop an initial concept (Note: This concept requires a browser that supports WebGL2):

Keyboard Controls:
W, A, S, D - Movement
Left Arrow, Right Arrow - Rotate left and right.

This concept is incredibly simple. It contains two spheres, a plane, and two directional lights. Diffuse and spectacular shading are there, but at the moment no textures have been implemented.

My hope, over the next few weeks, is to update this to included textures, dynamic scenes, polygon models, reflection/refraction, denoising, and bounce lighting. The big issues here will be video memory, and how to efficiently measure the distance to all of the nearest objects.

Please feel free to try out the code for yourself: