BroMetal — TypeScript shaders for WebGPU

Ethos

Built for the AI coding era. Everything is TypeScript and compiles into WGSL at build time, with no scene graph and no compiler in the browser. A typical app bundles to about 19 KB minified and 7 KB gzipped, because material systems and runtime shader generation are simply never shipped. Less to download, nothing to generate at startup. The first frame hits instantly.

Frequently asked questions

What is BroMetal?

BroMetal is a WebGPU graphics library that compiles shaders written in a typed TypeScript DSL into WGSL ahead of time. You write shaders as TypeScript functions, a build step turns each one into a generated module, and your app imports it. The compiler never reaches the browser.

How is BroMetal different from Three.js?

Three.js is a scene graph with a material system that generates shader code in the browser at runtime. BroMetal has neither: shaders are compiled on your machine at build time, and there is no scene graph, no material system and no runtime shader generation. That makes BroMetal much smaller and removes first-frame shader compilation, at the cost of doing the work Three.js does for you — you write the shader yourself.

How large is the BroMetal runtime?

A typical BroMetal app — renderer, program, camera, a geometry generator and the matrix helpers — bundles to about 19 KB minified and 7 KB gzipped. The compiler and CLI are build-time only and are never included, and unused shader functions are tree-shaken away because they inline into shader text rather than shipping as runtime code.

Can I use BroMetal with js13k?

Yes — the core of BroMetal was built for it. `brometal prod --js13k` emits a WebGPU runtime as plain global functions that minifies to about 2 KB gzipped, plus your shaders as compact arrays. Because shaders are compiled to WGSL on your machine, the compiler never counts against the 13 KB budget, and a shader mistake is a build error rather than a black screen. A working starter — runtime, a shader and a spinning textured cube — zips to about 3 KB, leaving roughly 10 KB for the game. See brometal.dev/js13k for the runtime source and instructions.

Why is BroMetal WebGPU-only?

Because the features worth building on do not exist in WebGL2. Compute shaders and storage buffers have no WebGL2 equivalent, and supporting both meant every feature had to be expressible in the older API. WebGPU now ships in Chrome, Edge, Firefox 141+ and Safari 26+, so the compiler emits WGSL alone and `createRenderer` throws where WebGPU is unavailable.

Do I need to know WGSL to use BroMetal?

No. Shaders are written in TypeScript using a typed subset of the language — vectors, matrices, swizzles, loops and helper functions — and the compiler emits WGSL for you. Knowing how shaders work still helps, since you are writing one, but you never write shader-language syntax.

Does BroMetal compile shaders in the browser?

No. Each `name.shader.ts` file compiles to a `name.shader.gen.ts` module during your build, containing finished shader text plus typed interface metadata. The browser receives that generated module. Nothing is parsed, type-checked or code-generated at runtime, so there is no compilation cost on the first frame.

Which browsers does BroMetal support?

Any browser with WebGPU: Chrome and Edge 113+, Firefox 141+, and Safari 26+, on desktop and on Android. BroMetal is WebGPU-only, so `createRenderer` throws with a clear message rather than degrading where it is missing.

Is BroMetal free and open source?

Yes. BroMetal is MIT licensed, published on npm as `brometal`, and developed in the open at github.com/ericdrowell/brometal.