rtx-on.js

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.