@shader-core/engine

The renderer and layer compositor behind Shader Core. WebGL2 and GLSL ES 3.0. Zero runtime dependencies.

import { compose, createRenderer } from '@shader-core/engine';
import { primitives } from '@shader-core/layers/primitives';
import { definition as gradient } from '@shader-core/layers/gradient';
import { definition as grain } from '@shader-core/layers/grain';

const renderer = createRenderer({
  canvas: document.querySelector('canvas')!,
  stack: [{ layer: gradient }, { layer: grain, blend: 'multiply' }],
  prelude: primitives,
  values: [{ colors: { colorA: '#05070d', colorB: '#4338ca' } }, { params: { intensity: 0.3 } }],
});

renderer.setValues([{}, { params: { intensity: 0.6 } }]); // a uniform; no recompile
renderer.dispose(); // releases the GL context, not just its objects

A stack of layers becomes one program in one pass — no framebuffers. The program cache is keyed on the stack's shape, so changing a value never recompiles and returning to a shape you have used is free.

What it does for you

It runs inside other people's products, so most of the work is not drawing:

• Pauses off-screen and while the tab is hidden.
• prefers-reduced-motion renders exactly one frame and never animates.
• Honours Save-Data; caps device pixel ratio and total pixels on modest hardware.
• Falls back to a static frame rather than stutter below 30fps.
• dispose() releases the GL context itself via WEBGL_lose_context, not only its objects — browsers cap live contexts at roughly 8–16.
• Compile errors are reported against the layer file and line you wrote, not against the generated program.

Colours are converted to linear space on the way in, so blending is correct by construction. #808080 uploads as 0.216, not 0.502.

Licence

Free to use, including commercially. The credit comment stays in shader source you copy. See LICENSE.md.