Expressive WebGPU — a tiny, teachable WebGPU library.
beam-gpukeeps Beam's "make data, then draw it" aesthetic while honestly exposing WebGPU's real model — every Beam verb maps 1:1 to a real WebGPU call, and every handle exposes its raw object.
Beam is not a renderer or a 3D engine. It's a small, honest wrapper over the WebGPU API that gives you a terse, schema-driven way to build renderers — with first-class TypeScript types and hand-authored WGSL shaders that Beam never rewrites.
The whole surface is five nouns and two verbs:
| Noun | Wraps |
|---|---|
Beam (device) | GPUAdapter + GPUDevice + canvas context |
Pipeline | GPURenderPipeline + derived layouts |
| resources | persistent GPUBuffer / GPUTexture / sampler |
Bindings | the data you hand one draw (→ GPUBindGroup) |
Pass / Target | a render pass / render-to-texture attachment |
…and the verbs frame(cb) (open the per-frame encoder, run draws, submit) and
draw(pipeline, bindings).
import{Beam}from'beam-gpu'importwgslfrom'./hello.wgsl?raw'constbeam=awaitBeam.gpu(document.querySelector('canvas')!)consttri=beam.pipeline({
wgsl,vertex: {position: 'vec3',color: 'vec3'},uniforms: {tint: 'vec4'},})constverts=beam.verts(tri.schema.vertex,{position: [-1,-1,0,0,1,0,1,-1,0],color: [1,0,0,0,1,0,0,0,1],})constindex=beam.index({array: [0,1,2]})constuniforms=beam.uniforms(tri.schema.uniforms,{tint: [1,1,1,1]})beam.frame(()=>{beam.clear([0,0,0,1]).draw(tri,{ verts, index, uniforms })})See DESIGN.md for the full design rationale, and
packages/beam/reference-api.d.ts for the
complete public type surface.
A WebGPU-capable browser (Chrome/Edge 113+, Safari 18+, recent Firefox).
packages/beam/ the library (npm: beam-gpu)
examples/ the gallery — runnable WGSL/WebGPU examples (Vite MPA)
docs/ the documentation site (VitePress, English + 简体中文)
DESIGN.md the locked API design + type-surface contract
pnpm install
pnpm --filter beam-gpu build # build the library (+ .d.ts)
pnpm --filter beam-gpu test# unit tests (schema / std140 packing)
pnpm dev # run the examples gallery (Vite)
pnpm docs:dev # run the docs site (VitePress)pnpm add beam-gpuMIT © Yifeng Wang