TypeGPU Kit

Building blocks for TypeGPU.
Interchangeable by design. Use what you want and fill the gaps with your own code.

npm i @typegpu/kit

The kit draws the frame on the right. Scroll to see it built.

Take it apart

The stack is built again a module at a time, from the bottom up.

The stack is whole. Drag a number, or click a plate or a module's name to take it out.

Each code block adds a module to this flock. With WebGPU, the stack beside it shows each module's output.

1kit.tablethe birds, a row each

const birds = table.create(root, Bird, { capacity: CAPACITY });
const rows = Array.from({ length: 448 }, () => birds.add(bornAt()));

2who is near whom

const cells = grid.create(root, {
  ...birds.live(), low: LOW, size: AIR, sight: 1.4, item: Seen,
  position: Bird.position.pipe(birds.inject()),
  itemOf: seenOf.pipe(birds.inject()),
});
const steering = createSteering(root, birds, cells, {
  sight: 1.4, rules: { flock, orbit, huddle },
});

3the sun's shadow

const shadow = {
  size: 1024, extent: 20, filter: 4, enabled: () => has('shadow'),
} as const;
const sunDirection = degreesUp(26);

4a sun, and a lamp in one bird of eight

const lamps = createLamps(root, birds, {
  range: 1.0, intensity: 0.8,
});
const light = lighting.create(root, {
  settings: { ...LIT, sunDirection },
  shadow,
  points: { light: lamps.light, candidates: cells.candidates() },
});

5kit.passeslit colour, normals and depth

const scene = passes
  .create(root, screen, { hdr: passes.color, normals, depth: passes.depth }, {
    clear: [0.01, 0.011, 0.013, 1], label: 'scene',
  })
  .pipe(view.inject())
  .pipe(light.inject());
const chevrons = birdsDrawing(root, birds, lamps, { length: 0.50 });
const shown = [scene.add(groundDrawing(30)), scene.add(chevrons)];
const cast = [light.shadow.add(chevrons)];

6the lamps' glow

const glow = bloom.create(root, {
  source: () => screen.textures.hdr, levels: 5, bright: lampGlow,
  settings: { threshold: 1.2, knee: 0.4 },
});

7kit.finishthe graded frame

const print = dither(root, { cell: 1, levels: 32 });
const final = finish.create(root, {
  format: 'rgba8unorm', source: () => screen.textures.hdr,
  glow,
  grade: print.grade,
  settings: { glowIntensity: 0.35, vignette: 0.25, dither: 0 },
});

What it is

TypeGPU Kit provides GPU modules in one package, @typegpu/kit. It uses TypeGPU in WebGPU browsers and React Native. Each module borrows your root and records into the passes you give it. You own the loop, frame and canvas. How the kit works sets it beside plain WebGPU and TypeGPU.

A rule of your own

The steering takes a 'use gpu' function that computes force from a bird and its neighbours. Pick a rule and drag its number.Pick one to read it.

// Separate from nearby birds, align and move towards the flock
const flock = (me: Seen, near: Near) => {
  'use gpu';
  const along = near.heading - me.velocity;
  const toward = near.centre * 1.0;
  return near.away * 1.1 + along + toward + airAt(me) * 1.6;
};

// Follow a ring and avoid nearby birds
const orbit = (me: Seen, near: Near) => {
  'use gpu';
  const out = d.vec3f(me.position.x, 0, me.position.z);
  const from = std.max(std.length(out), 1e-3);
  const around = d.vec3f(-out.z, 0, out.x) / from;
  const back = (out / from) * ((4.0 - from) * 3);
  return (around * 4 - me.velocity) * 2 + back + near.away;
};

// Slow down near neighbours and move towards them
const huddle = (me: Seen, near: Near) => {
  'use gpu';
  const crowded = std.saturate(near.mates / 6);
  const wanted = airAt(me) * (4 * (1 - crowded));
  const closer = near.centre * (crowded * 3);
  return (wanted - me.velocity) * 2 + closer + near.away * 0.6;
};

const steering = createSteering(root, birds, cells, { rules: { flock } });

Modules

Core36

module

shader

workgroup

cpu

platform

tool

Rendering13

module

shader

Post-processing7

module

shader

tone

Particles2

module

Text4

module

cpu

typeset

tool

bake

Assets3

module

cpu

gltf

Point at a module to see the modules it takes and the modules that take it. A dotted line means the taken module also fills accessors in the taker's shaders.

Examples

Jelly world

A ray-marched jelly slider on a tray, until a critter pulls the lever and a candy world grows around it.

dynamicResolution
profiler
baker
font

Classroom

Blender's Classroom, its daylight and lamps baked on a second uv set, sunbeams through its dust.

history
images
taa
bindings

Falling sand

Sand, water and lava falling cell by cell through a cave lit by its own glow.

events
inject
particles
tone

Ocean

A near gale at dusk: FFT waves, foam on the crests and a low sun under the deck.

mipmaps
exposure
history
memo

Censer

Incense smoke curls from a swinging censer, simulated and lit on the GPU.

memo
materials
meshes
lighting

Every example opens full-screen and includes a GPU debug panel.

We are Software Mansion

A software company built around improving developer experience and bringing the innovative ideas of our clients to life. Do you have a software project we can help you with?

Hire us