RadianceLightweight, reactive WebGL library

✨ Simple API ​

Radiance takes care of the WebGL boilerplate, so you can focus on your shader.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

🪶 Lightweight ​

The lightest way to render a simple shader, after vanilla WebGL.

↺ Reactive ​

Radiance automatically re-renders the canvas when uniforms are updated, or when the canvas is resized.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

🛠️ Fully typed ​

Radiance provides type-safety for everything, including uniforms.

const { uniforms } = glCanvas({
  canvas,
  fragment,
  uniforms: {
    uPointer: [0, 0], 
  },
});

uniforms.uPointer = 42; // Type 'number' is not assignable to type 'number[]'.