TypeGPU

TypeGPU is a modular and open-ended toolkit for WebGPU, with advanced type inference and the ability to write shaders in TypeScript.

const neighborhood = (a: number, r: number) => {
  'use gpu';
  return d.vec2f(a - r, a + r);
};

//
// #1) Can be called in JS
//
const range = neighborhood(1.1, 0.5);
//    ^? d.v2f

//
// #2) Used to generate WGSL
//
const main = () => {
  'use gpu';
  return neighborhood(1.1, 0.5);
};

const wgsl = tgpu.resolve([main]);
//    ^? string

//
// #3) Executed on the GPU (generates WGSL underneath)
//
root.createGuardedComputePipeline(main).dispatchThreads();

Table of contents:

• :gear: TypeGPU as a foundation
• :jigsaw: TypeGPU as a piece of the puzzle
• :book: TypeGPU for libraries
• Documentation
• What’s next?
• Projects using TypeGPU
• Repository structure

:gear: TypeGPU as a foundation

We provide an abstraction that solves the most common WebGPU hurdles, yet does not restrict you in capability. You can granularly eject into vanilla WebGPU at any point. This means that, when building your app with TypeGPU, lock-in is not a concern!

The low-level nature of TypeGPU and it’s mirroring of WGSL (WebGPU Shading Language) syntax in TypeScript means that learning TypeGPU helps to learn WebGPU itself, with fewer frustrations.

The Getting Started and Fundamentals guides are a great starting point for new projects!

:jigsaw: TypeGPU as a piece of the puzzle

Our type-safe APIs can be used together, or in isolation. This makes partial application into existing apps just a few lines of code away, no matter the complexity of your app!

We wrote a comprehensive resource on ways TypeGPU can improve your existing codebase.

Pick and choose which parts of TypeGPU you’d like to incorporate into your existing app!

:book: TypeGPU for libraries

When creating a type-safe WebGPU library, one can expect to encounter at least one of the following problems:

• Serializing/deserializing data.
• Dynamically generating parts of the WGSL shader.
• Complex type inference.

If implemented from scratch, interoperability with other libraries (ones that have a different focus, solve different problems) can be near impossible without going down to untyped WebGPU land, or copying data back to JS. Moreover, to keep up with demand from users, they can be tempted to go out of scope of their initial use-case, even though another library already solves that problem.

TypeGPU can be used as an interoperability layer between use-case specific libraries!

Let’s imagine @xyz/gen is a library for procedural generation using WebGPU compute shaders, and @abc/plot is a library for plots and visualization using WebGPU.

import { tgpu } from 'typegpu';
import gen from '@xyz/gen';
import plot from '@abc/plot';

// common root for allocating resources
const root = await tgpu.init();

const terrainBuffer = await gen.generateHeightMap(root, { ... });
//    ^? TgpuBuffer<WgslArray<WgslArray<F32>>> & StorageFlag

// ERROR: Argument of type 'TgpuBuffer<WgslArray<WgslArray<F32>>>' is
// not assignable to parameter of type 'TgpuBuffer<WgslArray<F32>>>'
plot.array1d(root, terrainBuffer);

// SUCCESS!
plot.array2d(root, terrainBuffer);

We can pass typed values around without the need to copy anything back to CPU-accessible memory! Let’s see an example of how we can construct a type-safe API:

import type { StorageFlag, TgpuBuffer, TgpuRoot } from 'typegpu';
import { d } from 'typegpu';

// We can define schemas, or functions that return schemas...
const HeightMap = (width: number, height: number) =>
  d.arrayOf(d.arrayOf(d.f32, height), width);

// ...then infer types from them
type HeightMap = ReturnType<typeof HeightMap>;

export async function generateHeightMap(
  root: TgpuRoot,
  opts: { width: number; height: number },
): Promise<TgpuBuffer<HeightMap> & StorageFlag> {
  const buffer = root
    .createBuffer(HeightMap(opts.width, opts.height))
    .$usage('storage');

  const rawBuffer = root.unwrap(buffer); // => GPUBuffer

  // Here we can do anything we would usually do with a
  // WebGPU buffer, like populating it in a compute shader.
  // `rawBuffer` is the WebGPU resource that is backing the
  // typed `buffer` object, meaning any changes to it will
  // be visible in both.

  return buffer;
}

Planning to create a WebGPU library? Reach out to us! We’d love to work with you to enrich the ecosystem with type-safe WebGPU utilities!

Documentation

We created a set of guides and tutorials to get you up and running fast. Check out our Official Docs!

What’s next?

• Join the Software Mansion Community Discord to chat about TypeGPU or other Software Mansion libraries.

Projects using TypeGPU

Libraries:

• Redraw - a 2D graphics library built on top of WebGPU, with support for vector feathering and advanced vector-based effects.
• Vivarium - Modern, intuitive, WebGPU-powered toolkit for creating your own cellular automata
• wayfare - A modular game engine built on top of TypeGPU & Koota
• typegpu-shader-canvas - a high-level library that sets up a canvas for you, so you can focus on delivering pixels with TypeScript functions
• lilgpu - Lil wrapper to toy with WebGPU, powered by TypeGPU
• fisheye.js - A JavaScript library for correcting fisheye, or barrel distortion, in images in the browser
• @pmndrs/glyph - A typography engine for web graphics, with font baking, Unicode shaping, paragraph layout and batched text rendering

Apps:

• Screen Studio - macOS screen recorder with automatic zoom and smooth animations for product demos, tutorials, and social media videos.
• Shaders v3 - A visual design platform for creating production-ready WebGPU effects
• ComfyUI - An open-source tool for creating generative AI
• Lumen Apeiron by deluksic & Komediruzecki
• Bone Tide (Web) (App Store) (Google Play) - A horde survival game by Konrad Reczko
• GFX Computer - A WebMCP-enabled video editor, powered by TypeGPU

Demos:

• Apollonian Circles by deluksic
• Strange Forms by Logan Zartman
• WebGPU Stable Fluids by Logan Zartman
• Plasma Garden by Alex Wayne
• Glowout by Alex Wayne
• MeloSkia - A music-game demo to highlight RN-Skia capabilities by Kim Chouard

Repository structure

Packages:

• packages/typegpu - The core library.
• packages/typegpu-color - A set of color helper functions for use in WebGPU/TypeGPU apps.
• packages/typegpu-noise - A set of noise/pseudo-random functions for use in WebGPU/TypeGPU apps.

Tooling:

• packages/unplugin-typegpu - Plugin for your favorite bundler, enabling TypeGPU shader functions to be written in JS.
• packages/tgpu-gen - CLI tool for automatic TypeGPU code generation.

Internals:

• packages/tinyest - Type definitions for a JS embeddable syntax tree.
• packages/tinyest-for-wgsl - Transforms JavaScript into its tinyest form, to be used in generating equivalent (or close to) WGSL code.
• packages/tgpu-wgsl-parser - WGSL code parser.
• packages/tgpu-dev-cli - Development tools for packages in the monorepo.

Apps:

• apps/typegpu-docs - The documentation, examples and benchmarks webpage.
• apps/infra-benchmarks - Headless benchmarks.

TypeGPU is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

Made by @software-mansion and community 💛