https://rtx-on.steren.fr/

GitHub

rtx-on.js

Drop the box shadow, your web pages deserve proper ray tracing.

rtx-on.js is an experimental JavaScript library that enhances web
pages by simulating in real time realistic lights and shadows using
ray tracing.

Try it

  * Toggle the "RTX ON" button at the bottom to disable/enable the
    effect.
  * Resize your browser window.
  * Resize any of the cubes.
  * Switch to light / dark mode.
  * Open DevTools and inspect this page.
  * Check it on example.com or steren.fr.

Use it

Add to your webpage:

<script type="importmap">
{
  "imports": {
    "webgl-path-tracing": "https://webgl-path-tracing.steren.fr/webgl-path-tracing.js",
    "sylvester": "https://webgl-path-tracing.steren.fr/sylvester.src.js",
    "rtx-on": "https://rtx-on.steren.fr/rtx-on.js"
  }
}
</script>

<script type="module">
import * as rtx from 'rtx-on';
window.onload = function() {
  rtx.on();
}
</script>

or install using npm:

npm install rtx-on

Customize it

By default, elements with box shadows are considered raised. You can
customize the background element and the list of raised elements. You
can also decide to allow the user to change the light position on
click.

See the GitHub README for all configuration options

Credits

Made by Steren using webgl-path-tracing, a WebGL path tracing library
developed in 2010 by Evan Wallace.