Steren's labs

“What if web pages looked more like real life?”

I've gone down the rabbit hole of rendering web pages using ray tracing, without sacrificing the interactivity and accessibility of the page and created rtx-on.js:

This is a "drop-in" library, by default, page elements with box shadows will be transformed into raised element and receive proper ray-traced shadows. I added options to customize the background element and the list of raised elements, as well as the ability to change the light position on click. Implementing dark mode was easy: because the lighting is physically realistic, all I had to do was to dim the light intensity.

As you can see in the video below, the page stays fully interactive: the text can be selected, links are clickable, elements resize when the window is resized, and the page DOM can be inspected in DevTools.

See the rtx-on.js demo website and more examples: example.com or steren.fr.

For the ray tracer itself, I am using webgl-path-tracing, a WebGL path tracing library developed in 2010 by Evan Wallace that I enriched a bit (transformed into a module). I had never done shader programming. I learnt a lot by reading and modifying Evan's code. I find it fascinating.

Check out rtx-on.js and its sources on GitHub