TypeGPU | Blog

TypeGPU 0.12

Wed, 12 Aug 2026 00:00:00 GMT

Hello fellow GPU enthusiast!

Over the past 2 months, my team and I have been working on making TypeGPU useful in more places, and making it disappear a little more once your app is ready to ship. TypeGPU resources can now cross React Native runtimes, shaders can be made considerably smaller, and our experimental WebGL backend can run real TypeGPU render pipelines.

We have also added lower-level command recording APIs, asynchronous pipeline initialization, and a handful of shader code improvements. There is quite a lot to unpack, so let’s get into it!

New examples
Built with TypeGPU 0.12
Migration guide
TypeGPU on other runtimes
More control over GPU work
Smaller production shaders
Shader code ergonomics
Better warnings
Ecosystem
What’s next?

New examples

Our examples page has grown quite a bit since the last release post. There are five new demos that push TypeGPU in very different directions:

“Trippy Raymarching” - an interactive, twisting tunnel of SDF spheres, complete with enough controls to make it uniquely yours.
“OS Awards” - an interactive, physically based rendering of our Open Source Awards statuette.
“Selfie Segmentation” - real-time background replacement, with the entire inference and post-processing pipeline running in TypeGPU.
“Radiance Cascades” - a from-scratch implementation of real-time 2D global illumination.
“Radiance Cascades (with drawing)” - paint glowing shapes and watch light propagate through the scene, powered by the new @typegpu/radiance-cascades package.

The initial release of @typegpu/react also came with three smaller examples showing how TypeGPU resources fit into React components and hooks:

And there are two new examples showing the progress of our experimental WebGL fallback:

“Triangle (WebGL fallback)” - the smallest possible proof that the same TypeGPU pipeline can target something other than WebGPU.
“Caustics (WebGL fallback)” - a more demanding example combining uniforms, matrices, helper functions and @typegpu/noise.

The second one is particularly exciting. A fallback is only useful if it can render more than a triangle, and the caustics example is a nice first glimpse of where this work is heading.

Built with TypeGPU

Examples are one thing, but this release cycle also brought two complete games powered by TypeGPU 0.12 to the web and app stores.

Bone Tide

Bone Tide, created by my teammate Konrad Reczko (@reczkok), is now available on the App Store, Google Play and the web. It was written from scratch without an existing engine underneath, with both its game logic and shaders written in TypeScript. Its Expo app runs on the exact same TypeGPU engine as the web game, shared one-to-one between platforms, with only the UI ported to React.

Purrkour

Purrkour is a cozy puzzle game by Błażej Kustra in which you help cats jump across compact living rooms and find their way into boxes. It is available on the App Store and on the web.

Seeing two very different games make the leap from experiments to something anyone can download and play is an exciting milestone for TypeGPU. Congratulations to both creators on their releases!

Shaders v3

Shaders has launched v3 with an entirely new rendering engine built directly on TypeGPU. According to their release post, the new engine helped make production bundles 3× smaller on average and shader compilation up to 25× faster.

It’s awesome to see TypeGPU being adopted by a tool used to ship WebGPU effects to thousands of production websites. Congratulations to the Shaders team on the release!

Migration guide

This release removes a set of APIs that have been deprecated for a while, most notably the old pipeline builder, texture layout descriptors, .value and layout.bound.

We have prepared a detailed Migrating to 0.12 guide with before-and-after snippets for each change.

TypeGPU on other runtimes

React Native Worklets

Per-frame work in a React Native app should not have to wait for unrelated work on the RN thread. With react-native-worklets, @typegpu/react can now run its useFrame callbacks on the UI thread.

useFrame(({ elapsedSeconds }) => {
  'worklet';

  const context = ctxRef.current;
  if (!context) return;

  timeUniform.write(elapsedSeconds);
  pipeline.withColorAttachment({ view: context }).draw(3);
});

The tricky part was not moving the callback itself. It was making the resources captured by it usable on another JavaScript runtime. TypeGPU roots, buffers, textures, samplers, bind groups, layouts and pipelines can now be transferred while keeping the same underlying GPU objects and their identity.

If your app uses React Native, refer to the React Native Worklets guide for setup instructions and the rules around transferring resources.

Experimental WebGL fallback

@typegpu/gl can generate GLSL and execute a subset of TypeGPU’s render API on WebGL 2. You can try WebGPU first and fall back automatically with one function:

import { initWithGLFallback } from '@typegpu/gl';

const root = await initWithGLFallback();

This is still experimental and does not cover compute or the full TypeGPU API, but it can already run non-trivial render pipelines. The same work also lets TypeGPU functions used through @typegpu/three follow Three.js onto its WebGL backend.

More control over GPU work

Command encoders and passes

Calling .draw() or .dispatchWorkgroups() directly remains the simplest way to execute a pipeline. For cases where multiple operations should share one command buffer or render pass, TypeGPU now exposes typed command encoders and passes.

const encoder = root['~unstable'].createCommandEncoder();
const pass = encoder.beginRenderPass({
  colorAttachments: { view: context },
});

scenePipeline.with(pass).draw(sceneVertexCount);
overlayPipeline.with(pass).draw(overlayVertexCount);

pass.end();
encoder.submit();

The pass can be used from the pipeline-centric API, as above, or directly through familiar methods like pass.setPipeline(), pass.setBindGroup() and pass.draw(). TypeGPU keeps track of the state shared by both styles and only applies it when necessary.

More about command encoders and passes in the Pipelines guide.

Asynchronous pipeline initialization

Pipelines are still initialized lazily on their first draw or dispatch. Larger applications can now move that work away from the first frame by initializing them ahead of time:

await Promise.all([
  simulationPipeline.initAsync(),
  scenePipeline.initAsync(),
  postProcessingPipeline.initAsync(),
]);

initAsync() uses WebGPU’s asynchronous pipeline creation APIs and waits until compilation finishes on the device. There is also initSync() if you only want to eagerly perform the regular synchronous initialization.

For small and medium-sized shaders the difference will usually be negligible, so there is no need to initialize every pipeline manually.

One kind of buffer binding

Until now, root.createUniform(...) and buffer.as('uniform') returned two subtly different kinds of objects. In 0.12 they are both buffer bindings, with the same read, write and shader access APIs.

This also means a shorthand binding can be passed directly to a matching bind group:

const size = root.createUniform(d.vec2u, d.vec2u(800, 600));
const layout = tgpu.bindGroupLayout({
  size: { uniform: d.vec2u },
});

const bindGroup = root.createBindGroup(layout, { size });

It is a small distinction to remove, but it makes buffers much easier to move between TypeGPU’s fixed-resource and manual bind group APIs.

For type annotations, 0.12 also adds TgpuUniformBuffer, TgpuStorageBuffer, TgpuVertexBuffer and TgpuIndexBuffer. They replace verbose intersections between TgpuBuffer and individual usage flags.

Smaller production shaders

Minifying JavaScript does not make the WGSL generated at runtime any smaller. TypeGPU 0.12 adds two experimental options aimed specifically at shader code.

The bundler plugin can shorten identifiers stored in shader metadata:

typegpu({
  autoNamingEnabled: false,
  unstable_obfuscate: true,
});

The runtime can then remove comments and redundant whitespace from the generated shader:

const root = await tgpu.init({ unstable_minify: true });

These options can be enabled independently, but together they turn this:

fn coneVolume(radius: f32, height: f32) -> f32 {
  let baseArea = 3.141592653589793f * pow(radius, 2f);
  let volume = baseArea * height / 3f;
  return volume;
}

into something closer to this:

fn item(a:f32,b:f32)->f32{let c=(3.141592653589793f*pow(a,2f));let e=((c*b)/3f);return e;}

Obfuscated errors are not fun to debug, so we strongly recommend enabling these options only for production builds. The Minifying & Obfuscating Shaders guide covers the tradeoffs in more detail.

Alongside this, using the named tgpu export, flatter captured externals and an improved package build make it easier for regular JavaScript tree-shaking to remove TypeGPU code your app does not use.

Shader code ergonomics

A general-purpose bitcast

The new std.bitcast works on the CPU and the GPU, and supports scalars and vectors of equal byte size, including f16 vectors.

const floatBits = std.bitcast(d.f32, d.u32)(1);
const packedHalfs = std.bitcast(d.vec2h, d.u32)(d.vec2h(0.5, 1));

The narrower std.bitcastU32toF32 and std.bitcastU32toI32 helpers are now deprecated in favor of this API.

Private properties

Resources stored in private class properties can now be captured by shader functions. This makes it easier to keep reusable GPU modules properly encapsulated.

class Counter {
  #value = tgpu.const(d.u32, 1);

  increment = (n: number) => {
    'use gpu';
    return n + this.#value.$;
  };
}

Knowing where code is used

std.getShaderStage() returns 'vertex', 'fragment' or 'compute' during shader generation. A helper can use it to specialize itself for every stage it is called from, in the same spirit as std.getTargetShaderLanguage().

More about resolution environment helpers in the Utils guide.

Better warnings

Warnings now include a category, making it easier to tell a precision loss from a missing WebGPU feature or an internal fallback. Less important warnings are also silenced in production by default.

If a warning is expected and cannot be addressed at its source, it can be disabled explicitly:

import { warn } from 'typegpu';

warn.disable('implicit-conversion');

Calling warn.reset() restores the defaults. Silencing a warning should remain the last resort, but now there is a precise escape hatch when you need one.

Ecosystem

TypeGPU for React

@typegpu/react brings TypeGPU resources into the React lifecycle, on both the web and React Native. Hooks such as useRoot, useUniform, useBindGroup and useConfigureContext take care of creating resources, sharing them between components and cleaning them up, while useFrame provides a natural place to update and draw every frame.

Values can stay on the GPU and be updated imperatively, or follow React state through useMirroredUniform. The package also integrates with Suspense while the root is being initialized, so loading and unsupported-device states fit into the rest of your component tree.

The three React examples mentioned above are a good place to see these pieces working together. For a guided introduction and the complete hook reference, head over to the @typegpu/react guide.

2D global illumination with @typegpu/radiance-cascades

@typegpu/radiance-cascades packages a TypeGPU implementation of the Radiance Cascades technique for real-time 2D global illumination. You provide shader callbacks that describe the scene’s signed distance field and surface colors; the package owns the cascade textures and dispatches the compute passes needed to produce a radiance field.

It pairs particularly well with @typegpu/sdf: draw a scene into a texture, turn it into a signed distance field with jump flooding, and feed the result into the radiance runner. That is exactly how the interactive “Radiance Cascades (with drawing)” demo lets light react immediately to every brush stroke.

The @typegpu/radiance-cascades guide covers the basic setup, generated SDF textures, custom ray marching and output configuration.

Better pseudo-random numbers in @typegpu/noise

@typegpu/noise now uses Xoroshiro64** as its default pseudo-random number generator. It has a 64-bit state, works on both the CPU and GPU, and produces substantially better distributions than the previous default.

The package also exports the generator as XOROSHIRO64STARSTAR, a new LCG32 implementation, and utilities for hashing and scrambling seeds. If your app depends on the exact sequence produced by the old generator, the migration guide includes a compatible implementation.

What’s next?

There are many more things introduced in TypeGPU 0.12 that I haven’t mentioned. If you’re curious about the full list of changes made in TypeGPU 0.12, you can read the full 0.12.0 diff.

TypeGPU 0.11

Tue, 14 Apr 2026 00:00:00 GMT

Hello fellow GPU enthusiast!

Over the past 2 months, my team and I have been pulling on a few threads that we thought would improve TypeGPU in terms of efficiency, and as a byproduct, we actually made the APIs more convenient. We are also introducing a lint plugin to further improve the diagnostics and feedback you receive while writing TypeGPU shaders, on top of the type safety we already provide.

New examples
Migration guide
New and improved write APIs
Shader code ergonomics
Ecosystem updates
What’s next?

We have been pulling a few more threads than I mentioned here… but for those, you’ll have to wait for the next blog post 🤐.

New examples

My teammate Konrad Reczko (@reczkok) has outdone himself again, and delivered 3 new examples that push TypeGPU APIs to their limits:

“Genetic Racing” - watch a swarm of cars learn to traverse a procedurally generated race track.
“Mesh Skinning” - an animation and skinning system built from scratch in TypeGPU.
“Parallax Occlusion Mapping” - squeezing amazing depth out of just two triangles and a set of textures.

Migration guide

Deprecated APIs

The buffer.writePartial API is being deprecated in favor of buffer.patch (and here are the reasons why). To migrate, simply replace any partial write of arrays in the form of [{ idx: 2, value: foo }, /* ... */] with { 2: foo, /* ... */ }.

const buffer = root.createBuffer(d.arrayOf(d.vec3f, 5)).$usage('storage');

 buffer.writePartial([{ idx: 2, value: d.vec3f(1, 2, 3) }]);
 buffer.patch({ 2: d.vec3f(1, 2, 3) });

Stabilizing textures and samplers

One by one, we’re making our APIs available without the ['~unstable'] prefix, and this time around, it’s textures and samplers. Just drop the unstable prefix, and you’re good to go.

 const sampler = root['~unstable'].createSampler({
 const sampler = root.createSampler({
  magFilter: 'linear',
  minFilter: 'linear',
});

 const texture = root['~unstable'].createTexture({
 const texture = root.createTexture({
  size: [256, 256],
  format: 'rgba8unorm' as const,
}).$usage('sampled');

New and improved write APIs

Efficient data

When writing to a buffer with an array of vectors, it’s no longer required to create vector instances (e.g. d.vec3f()).

const positionsMutable = root.createMutable(d.arrayOf(d.vec3f, 3));

// existing overload
positionsMutable.write([d.vec3f(0, 1, 2), d.vec3f(3, 4, 5), d.vec3f(6, 7, 8)]);
// new overloads ⚡
positionsMutable.write([[0, 1, 2], [3, 4, 5], [6, 7, 8]]); // tuples
positionsMutable.write(new Float32Array([0, 1, 2, 0, 3, 4, 5, 0, 6, 7, 8, 0])); // typed arrays (mind the padding)
// and more...

Each one is more efficient than the previous, so you can choose the appropriate API for your efficiency needs. More about these new APIs here.

A better partial write

When writing to a buffer, we require the passed in value to exactly match the schema. This specifically means that updating a single field of a single array item was very costly. The buffer.writePartial API remedied that by accepting partial records for structs, and a list of indices and values to update in arrays. This works fine, but doesn’t compose well with more complex data structures:

const Node = d.struct({
  color: d.vec3f,
  // Indices of neighboring nodes
  neighbors: d.arrayOf(d.u32, 4),
});

const nodes = root.createUniform(d.arrayOf(Node, 100));

// Updating the 50th node
nodes.writePartial([
  {
    idx: 50,
    value: {
      color: d.vec3f(1, 0, 1),
      // We cannot pass [48, 49, 51, 52], as we could with nodes.write()
      neighbors: [{ idx: 0, value: 48 }, { idx: 1, value: 49 }, { idx: 2, value: 51 }, { idx: 3, value: 52 }],
    },
  }
]);

If we loosened the type to accept either partial arrays or full arrays, then we would reach an ambiguity in the following case:

const Foo = d.struct({
  idx: d.u32,
  value: d.f32,
});

const foos = root.createUniform(d.arrayOf(Foo, 2));

foos.writePartial([{ idx: 1, value: /* ... */ }, { idx: 0, value: /* ... */ }]);

We could traverse the value deeper to disambiguate, but for the sake of efficiency and being able to reuse optimizations added to buffer.write by Konrad, we chose to add a new API:

foos.writePartial([{ idx: 1, value: /* ... */ }, { idx: 0, value: /* ... */ }]);
foos.patch({ 1: /* ... */, 0: /* ... */ });

Writing struct-of-arrays (SoA) data

When the buffer schema is an array<struct<...>>, you can write the data in a struct-of-arrays form with writeSoA from typegpu/common. This is useful when your CPU-side data is already stored per-field, such as simulation attributes kept in separate typed arrays.

const Particle = d.struct({
  pos: d.vec3f,
  vel: d.f32,
});

const particleBuffer = root.createBuffer(d.arrayOf(Particle, 2));

common.writeSoA(particleBuffer, {
  pos: new Float32Array([
    1, 2, 3,
    4, 5, 6,
  ]),
  vel: new Float32Array([10, 20]),
});

More about this API can be found in the Buffers guide.

Shader code ergonomics

There have been a lot of improvements to our shader generation, mainly regarding comptime execution and pruning of unreachable branches. I will highlight some of them in the following sections.

std.range

The new std.range function works similarly to range() in Python, and returns an array that can be iterated over. When combined with tgpu.unroll, it’s now very easy to produce a set amount of code blocks.

let result = d.u32();
for (const i of tgpu.unroll(std.range(3))) {
  // this block will be inlined 3 times
  result += i * 10;
}

Generates:

var result = 0u;
// unrolled iteration #0
{
  result += 0u;
}
// unrolled iteration #1
{
  result += 10u;
}
// unrolled iteration #2
{
  result += 20u;
}

Because i is known at comptime, the i * 10 is evaluated and injected into the generated code in each block. For more, refer to tgpu.unroll documentation..

Boolean logic

Logical expressions are now short-circuited if we can determine the result early.

const clampingEnabled = tgpu.accessor(d.bool);

function interpolate(a: number, b: number, t: number) {
  'use gpu';
  let value = a + (b - a) * t;
  if (clampingEnabled.$ && value > 1) {
    // Constantly increasing, without ever going past 2
    value = 1 + (value - 1) / value;
  }
  return value;
}

Generated WGSL depending on the value of clampingEnabled:

// clampingEnabled.$ === false
fn interpolate(a: f32, b: f32, t: f32) -> f32 {
  var value = a + (b - a) * t;
  return value;
}

// clampingEnabled.$ === true
fn interpolate(a: f32, b: f32, t: f32) -> f32 {
  var value = a + (b - a) * t;
  if (value > 1) {
    value = 1 + (value - 1) / value;
  }
  return value;
}

Convenience overload for `tgpu.const` API

If you’re defining a WGSL constant using an array schema, you no longer have to duplicate the array length both in the value and in the schema. The tgpu.const function now accepts dynamically-sized schemas.

const ColorStops = d.arrayOf(d.vec3f);

const colorStops = tgpu.const(
  ColorStops(3),
  ColorStops,
  [d.vec3f(1, 0, 0), d.vec3f(0, 1, 0), d.vec3f(0, 0, 1)],
);

Ecosystem updates

There has been a lot of work outside of the typegpu package, both internally and from the community.

Lint plugin

Aleksander Katan (@aleksanderkatan) has been working behind the scenes on an ESLint/Oxlint plugin, capable of catching user errors that types cannot.

import { tgpu, d } from 'typegpu';

function increment(n: number) {
  'use gpu';
  return n++;
  //     ^^^
  // Cannot assign to 'n' since WGSL parameters are immutable.
  // If you're using d.ref, please either use '.$' or disable this rule
}

function createBoid() {
  'use gpu';
  const boid = { pos: d.vec2f(), size: 1 };
  //           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // { pos: d.vec2f(), size: 1 } must be wrapped in a schema call
  return boid;
}

function clampTo0(n: number) {
  'use gpu';
  let result;
  //  ^^^^^^
  // 'result' must have an initial value
  if (n < 0) {
    result = 0;
  } else {
    result = n;
  }
  return result;
}

For setup instructions and available rules, refer to the documentation

New @typegpu/color helpers

There are three new helper functions importable from @typegpu/color which can be called at comptime to create color vectors from hexadecimal strings: hexToRgb, hexToRgba and hexToOklab.

import { hexToRgb } from '@typegpu/color';

function getGradientColor(t: number) {
  'use gpu';
  const from = hexToRgb('#FF00FF');
  const to = hexToRgb('#00FF00');
  return std.mix(from, to, t);
}

Generated WGSL:

fn getGradientColor(t: f32) -> vec3f {
  var from = vec3f(1, 0, 1);
  var to = vec3f(0, 1, 0);
  return mix(from, to, t);
}

Bundler plugin rewrite

The unplugin-typegpu package is what enables TypeScript shaders, and to support its continued development, we rewrote it from the ground up. It should now support more bundlers than ever before, out of the box, including esbuild.

Motion GPU

A minimalist WebGPU framework called Motion GPU introduced a way to integrate with TypeGPU, and wrote about it in their documentation (Integrations / TypeGPU). It’s awesome to see the continued adoption of TypeGPU in other ecosystems and communities 🎉

What’s next?

There are many more things introduced in TypeGPU 0.11 that I haven’t mentioned. If you’re curious, you can read the full 0.11.0 changelog.

How to enable WebGPU on your device

Fri, 04 Oct 2024 00:00:00 GMT

Since WebGPU is still considered experimental, despite being supported by many browsers, it is often hidden behind flags. This post will help you find out if your browser secretly supports WebGPU and, if it does, how you can enable it. In general, you can check if your browser supports WebGPU by visiting the WebGPU API doccumentation and looking for your browser in the list. If it is listed under full support it should generally work out of the box (on the listed operating systems). There are some cases where it is more complicated and requires some manual configuration. This post will guide you through the process of enabling WebGPU on your devices.

Safari on iOS

Despite what the docs tell us, there is a way to enable WebGPU in Safari on iOS.

To enable WebGPU go to:

Settings > Apps > Safari > Advanced > Feature Flags

or for iOS versions lower than 18:

Settings > Safari > Advanced > Feature Flags

Then enable WebGPU and restart Safari.

That’s it! After enabling the WebGPU flag you can go to our examples page and you should be able to tinker with them on your phone.

Safari on macOS

Go to:

Settings > Advanced

And check the Show features for web developers checkbox. After that, you can go to:

Settings > Feature Flags

And search for the WebGPU checkbox. Enable it and you should be good to go!

Deno

If you are running Deno 1.39 or newer you can either:

Run your script with the --unstable-webgpu flag
Add the following line to your deno.json file:

"unstable": [
  "webgpu"
]

Chrome for Android and desktop

WebGPU for Google Chrome should work by default on Android and desktop devices, just make sure you run the newest available version of the app. If however it does not work, you might need to try enabling some experimental flags listed in the official Chrome developer documentation.

TypeGPU | Blog

TypeGPU 0.12

New examples

Built with TypeGPU

Bone Tide

Purrkour

Shaders v3

Migration guide

TypeGPU on other runtimes

React Native Worklets

Experimental WebGL fallback

More control over GPU work

Command encoders and passes

Asynchronous pipeline initialization

One kind of buffer binding

Smaller production shaders

Shader code ergonomics

A general-purpose bitcast

Private properties

Knowing where code is used

Better warnings

Ecosystem

TypeGPU for React

2D global illumination with @typegpu/radiance-cascades

Better pseudo-random numbers in @typegpu/noise

What’s next?

TypeGPU 0.11

New examples

Migration guide

Deprecated APIs

Stabilizing textures and samplers

New and improved write APIs

Efficient data

A better partial write

Writing struct-of-arrays (SoA) data

Shader code ergonomics

std.range

Boolean logic

Convenience overload for tgpu.const API

Ecosystem updates

Lint plugin

New @typegpu/color helpers

Bundler plugin rewrite

Motion GPU

What’s next?

How to enable WebGPU on your device

Safari on iOS

Safari on macOS

Deno

Chrome for Android and desktop

Convenience overload for `tgpu.const` API