@woosh/shade

Shade is a WebGPU 3D graphics engine — deferred rendering, PBR materials, real-time global illumination, postprocessing, and a software ray tracer that works on every WebGPU-capable browser.

→ Demos, full feature list, and licensing at shade.company-named.com.

Install

npm install @woosh/shade

Usage

The "hello, cube" of computer graphics — a lit box on a black canvas:

import { Renderer }              from "@woosh/shade/renderer/Renderer.js";
import { create_frame_loop }     from "@woosh/shade/renderer/create_frame_loop.js";
import { PerspectiveCamera }     from "@woosh/shade/camera/PerspectiveCamera.js";
import { Scene }                 from "@woosh/shade/scene/Scene.js";
import { Mesh }                  from "@woosh/shade/scene/Mesh.js";
import { BoxGeometry }           from "@woosh/shade/geometry/BoxGeometry.js";
import { StandardShadeMaterial } from "@woosh/shade/material/StandardShadeMaterial.js";
import { DirectionalLight }      from "@woosh/shade/light/DirectionalLight.js";

const renderer = new Renderer();
await renderer.initialize();
document.body.appendChild(renderer.canvas);

const scene = new Scene();

scene.add(Mesh.from(new BoxGeometry(), new StandardShadeMaterial()));

const light = new DirectionalLight();
light.forward = [0.5, -1, 0.5];
scene.add(light);

const camera = new PerspectiveCamera();
camera.transform.position.set(0, 1.5, -3);
camera.transform.lookAt({ x: 0, y: 0, z: 0 });

create_frame_loop(dt => {
    renderer.resize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.render(camera, scene, dt);
});

All entry paths route to a single bundled file at runtime; subpaths exist purely for ergonomics and IntelliSense.

Runtime assets

Alongside bundle.js, the package includes a few binary files your bundler needs to serve from the same URL prefix:

• assets/textures/*.bin — required at startup
• avif_dec.wasm — required only if you call load_environment_avif

The engine resolves these via new URL("./asset", import.meta.url), which webpack 5 and most modern bundlers handle without configuration.

Vite

Vite's dependency pre-bundler rewrites import.meta.url and breaks that resolution. Exclude the package from pre-bundling so the original URLs survive:

// vite.config.js
export default {
    optimizeDeps: {
        exclude: ['@woosh/shade']
    }
};

License

Free to try. Free for non-commercial use. Commercial licenses for shipping products are available — see shade.company-named.com/licensing for current terms.

This package may not be used as AI training data. See LICENSE and NOTICE for the full terms.