WebGL Ray Tracing

The past couple of weekends I’ve been trying out some WebGL powered rendering that can be embedded into my website. Above is a little something I coded up, made by ray marching implicit surfaces using distance fields (after being inspired but some of the content over at shader toy). I recommend viewing it in a Chrome browser, but any browser that supports WebGL should do. Currently, it doesn’t work on Edge or IE browsers which tend to have a hard time with WebGL support, as evident with the shadertoy site that has the same trouble.

I’ve done a few things with ray tracing/marching techniques previously but it really is a joy to work with when you get it down, allowing you to focus on the rendering without needing explicit models, textures or lots of boiler plate code to create great looking scenes.

The above implementation is only a little over 100 lines of code in a pixel shader. Other then that, WebGL requires a tiny bit of initialisation code and there’s a pass-through vertex shader, and that’s it. So far, WebGL seems great and I’m tempted to make a basic little game with it to embed at some point.

For anyone wanting to do something similar I’d recommend the Atom text editor with plugins for GLSL syntax highlighting and a nifty little plugin called Browser-Plus that allows you to use an integrated web browser that will auto-refresh when you save code changes. Using a split screen setup it was a great way to immediately see changes as I coded them without having to mash F5 over and over.