@dotdotdash/stunner-core

High-performance cinematic WebGPU renderer for the web. Clustered PBR lighting, full post-processing stack, dynamic textures, and a source-only TypeScript API that bundles straight into your Vite or webpack app — no separate build step.

Features

• Clustered forward rendering — 1000+ dynamic point/spot/directional lights
• PBR G-buffer pipeline — metallic-roughness, normal maps, emissive, AO
• Post-processing stack — TAA, DLAA, bloom, depth-of-field, SSAO, fog, color grading, tone mapping, motion blur
• Dynamic textures — render-to-texture from an offline camera; Canvas 2D drawing into texture
• glTF 2.0 loader — meshes, materials, skins, morph targets, animations
• Fluid simulation, LOD, mesh subdivision/displacement, environment maps
• Source-only TypeScript — tree-shakes cleanly through Vite/webpack

Requirements

A browser with WebGPU support (Chrome 113+, Edge 113+, Safari 18+). Must be served from a secure context (HTTPS or localhost).

Install

npm install @dotdotdash/stunner-core

Optional addons:

npm install @dotdotdash/stunner-draco       # Draco-compressed glTF
npm install @dotdotdash/stunner-usd fflate  # USD / USDZ loader
npm install @dotdotdash/stunner-react       # React HUD component

Quick start

import { RendererEngine, Camera } from '@dotdotdash/stunner-core';
import type { RenderScene } from '@dotdotdash/stunner-core';

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const engine = new RendererEngine();

await engine.initialize(canvas);

const camera = new Camera();
camera.setLocation([0, 1, 5]);
camera.lookAt([0, 0, 0]);
engine.setCamera(camera);

const scene: RenderScene = {
  meshes: [],
  lights: [],
};
engine.setScene(scene);

function loop(t: number) {
  engine.render({}, t / 1000, 16, 0);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Vite configuration

Stunner ships TypeScript source. Add path aliases so Vite transforms the package files as part of your app:

// vite.config.ts
import path from 'node:path';

export default {
  resolve: {
    alias: {
      '@dotdotdash/stunner-core': path.resolve('./node_modules/@dotdotdash/stunner-core/src'),
    },
  },
};

Documentation

Full API and architecture documentation ships inside the package under node_modules/@dotdotdash/stunner-core/documentation/. Start with context.md for a routing guide to all topics.

License

MIT