@typegpu/kit

TypeGPU Kit

GPU building blocks on TypeGPU, for WebGPU and React Native. Interchangeable by design: use what you want and fill the gaps with your own code. A module borrows your TypeGPU root and records into the encoder or pass you give it. You own the loop, the canvas and the pass order, and each frame submits once. The modules cover frames and clocks, scene passes, GPU tables, cameras, a neighbour grid, picking and readback, lighting and shadows, instanced meshes, glTF, post-processing, particles and text.

Documentation · Getting started · Tutorials · Examples · Module map

Install

pnpm add @typegpu/kit typegpu @typegpu/noise @typegpu/color
pnpm add -D unplugin-typegpu typescript@npm:tsover@6.0.2

Setting up a project adds the bundler plugin and React Native.

A frame

import { tgpu } from 'typegpu';
import { frames } from '@typegpu/kit';
import * as web from '@typegpu/kit/web';

const root = await tgpu.init();
const surface = web.surface(root, document.querySelector('canvas')!);

const loop = frames.create(root, (frame) => {
  const pass = frame.encoder.beginRenderPass({ colorAttachments: { view: surface.view(frame) } });
  // draw, and call modules' recording methods in the order the frame needs them
  pass.end();
});

frames.animate(loop); // one encoder and one submit per animation frame

Entries

Entry	Contents
@typegpu/kit	Every module as a namespace, such as frames, passes, lighting and bloom, and helpers exported flat.
@typegpu/kit/<module>	One module, such as @typegpu/kit/frames. On React Native, import from these.
@typegpu/kit/grid	The neighbour grid.
@typegpu/kit/geometry	TypeGPU's geometry: meshes, lines, joins and caps.
@typegpu/kit/web, @typegpu/kit/native	Canvas surfaces, pointer input, orbit controls, and web.host for running a scene on a canvas.
@typegpu/kit/scenes, @typegpu/kit/scenes/react, @typegpu/kit/runtimes	Scenes on React Native canvases, on a worklet runtime or the JS thread, and useScene.
@typegpu/kit/testing, @typegpu/kit/testing/dawn	A recording root and an offscreen surface for tests without a GPU, and Dawn roots for GPU tests.
@typegpu/kit/debug	The GPU debug panel, for any WebGPU page.
@typegpu/kit/bake	The font baker, also the typegpu-kit-bake-font command.

Required peers are typegpu, @typegpu/noise and @typegpu/color. Optional peers belong to single entries: React Native hosts need react-native, react-native-webgpu and react-native-worklets, useScene needs react, the font baker @pmndrs/glyph, and Dawn tests webgpu and vitest.

Coding agents

Point your coding agent at skills/typegpu-kit/SKILL.md in this package: the kit's rules, a task list and every module, linked to the docs as Markdown in docs/, with the examples' source. Install it with pnpm dlx @tanstack/intent@latest install, or name node_modules/@typegpu/kit/skills/typegpu-kit/SKILL.md in your own AGENTS.md.

License

MIT