# BroMetal: Typed shaders compiled at build time to WebGPU

> Source: <https://brometal.dev>
> Published: 2026-08-02 11:55:59+00:00

# BroMetal

“Write TypeScript. Lift Shaders. Ship Shredded.”

Typed shaders compiled at build time — WebGPU, no compiler in the browser.

[Install](https://www.npmjs.com/package/brometal)

## 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.
- 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.