Sign in

Iwo Plaza | TypeGPU

@iwoplaza.dev
139 followers 291 following 59 posts

Lead Developer on typegpu.com // @swmansion.com 👨🏻‍💻🐸💚 github.com/iwoplaza 🧟🕷️⛏️ github.com/mobends 🎶🎹🎶 soundcloud.com/ivesiris

PostsRepliesMedia
Iwo Plaza | TypeGPU @iwoplaza.dev · 27/01/2026
I am using Three.js examples to track how well ByeGL is emulating WebGL on top of WebGPU, and today another one started working 🎉 #byegl #webgpu #webgl
031
Iwo Plaza | TypeGPU @iwoplaza.dev · 09/09/2025
The APIs related to uniforms (gl.getActiveUniform, gl.getUniformLocation) are now way more accurate. To test it out, I made a simple multi-light example to diff between ByeGL and WebGL #byegl #webgpu #webgl
040
Iwo Plaza | TypeGPU @iwoplaza.dev · 01/09/2025
I dug up a WebGL game I made 8 years ago, and it's running on WebGPU without any changes thanks to #byegl 🥯🐶🎉 #webgl #webgpu
030
Iwo Plaza | TypeGPU @iwoplaza.dev · 01/09/2025
"byegl" is an initiative to make the WebGL->WebGPU transition seamless for established WebGL apps. In the end, apps that use "byegl" to migrate will be built on top of WebGPU, not on top of potentially limiting abstractions. Follow us along on the journey! #webgl #webgpu #byegl
140
Iwo Plaza | TypeGPU @iwoplaza.dev · 31/08/2025
The surface below is drawn using vanilla WebGL, yet the vertex buffer is generated procedurally with a WebGPU compute shader. Once complete, my solution will allow established WebGL apps to migrate to WebGPU, *incrementally*! I'm shaking from excitement 🫨 #webgpu #webgl #byegl
031
Iwo Plaza | TypeGPU @iwoplaza.dev · 24/07/2025
My talk titled "Your GPU is a JavaScript Runtime*" just landed on YouTube! 👨‍💻 I answer WHY and HOW we compile JS/TS to WGSL, how it improves interop for the whole ecosystem, and the added dimension of customizability it unlocks for WebGPU libraries Video below ⬇️ #webgpu #typegpu #typescript
182
Iwo Plaza | TypeGPU @iwoplaza.dev · 24/07/2025
Glad you stumbled upon us! I know it's not everyone's cup of tea, but we try to make the syntax as similar as we can to WGSL. As for the maximalist part, you can pick and choose which part of WebGPU you want help with, and we'll stay out of your way for the rest 💜
110
Iwo Plaza | TypeGPU @iwoplaza.dev · 15/07/2025
Sorry guys, turns out I’ve been making a crab character all along 🦀 It’s really fun to make all of this from scratch in a custom engine, I’m having a blast! #typegpu #webgpu
170
Iwo Plaza | TypeGPU @iwoplaza.dev · 13/07/2025
Remember to always test on device… I thought it was going to run easy 60fps, but only quarter-resolution runs smoothly 🐢 I guess I gotta embrace the pixelated look! #typegpu #webgpu
010
Iwo Plaza | TypeGPU @iwoplaza.dev · 30/06/2025
SDF ray marching written in TypeScript, compiled into WebGPU Shading Language! I think we struck a good balance of flexibility & expressiveness, while vastly improving the DX of working with WebGPU (from the perspective of a TypeScript app) GPU & CPU end-to-end type safety, tRPC/oRPC style 🚀
040
Iwo Plaza | TypeGPU @iwoplaza.dev · 29/06/2025
I hate to say it but... LLMs are decent at writing TypeGPU shaders. @thdxr.com's opencode wrote a few SDF functions, then created a simple ray marched scene. Mind you, this is NOT a Three.js scene! It's a custom fragment shader that sends rays into an "imaginary" space, written fully in TypeScript
120
Iwo Plaza | TypeGPU @iwoplaza.dev · 23/06/2025
Definitely a XorDev classic 👏👏 Reimplementing it in TypeScript went smoother than last time. Love playing with the parameters on this one 🫨 Code & Preview (WebGPU required): docs.swmansion.com/TypeGPU/exam... #webgpu #typegpu #shaders
1132
Iwo Plaza | TypeGPU @iwoplaza.dev · 19/06/2025
We're not using Cloudflare Insights 🤔. I checked the page on Zen, and it does in fact not load at all because of WebGPU, but I am not getting these other errors. Could it be an extension?
000
Iwo Plaza | TypeGPU @iwoplaza.dev · 18/06/2025
I HAD to know how this works 😱 I rewrote it in TypeScript and unminimized parts of the code for readability. TypeGPU takes that code and compiles it into WGSL (WebGPU Shading Language), so it can be executed on the GPU 🚀 Code & Preview: docs.swmansion.com/TypeGPU/exam... #WebGPU
2273
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
And it's not just the "glue code" that becomes better, library APIs can become more customizable! A library can defer shader logic to the user by accepting marked TypeScript functions. Dependency Inversion, without compromising efficiency! 🚀 (8/n)
110
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
By storing the memory layout both on the type-level, as well as at runtime (utlizing Zod-like schemas), we handle the serialization of user-defined data types with ease. Hover over any buffer or piece of shader logic, and the IDE can understand it. (7/n)
110
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
== left (vanilla WebGPU): - WGSL code as a string - Untyped boundary between CPU and GPU == right (TypeGPU): - It's a marked TypeScript function - Types flow from the CPU to the GPU - Same flexibility, but better synergy with TypeScript (6/n)
100
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
However, it's rarely the case that APIs are seamlessly compatible with one another, so we need "glue code" for interop. We have two options: 1. Copy data, and transform it in JS/TS. 2. Write a compute shader to operate on VRAM directly, and glue the APIs there. (3/n)
110
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
WebGPU is an amazing piece of technology, allowing for truly cross-platform graphics and GPGPU programming. It's being used by frameworks like Three.js and Tensorflow.js to accelerate their internals ⚡ However, when we try to connect libraries together, we soon hit a limit... 🧵 THREAD 🧵 (1/n)
151
Iwo Plaza | TypeGPU @iwoplaza.dev · 17/06/2025
I think the god rays make my fake caustics shader complete! ✨ The shader is written in TypeScript, then compiled to WGSL (WebGPU Shading Language) using TypeGPU! 🚀 #webgpu #typegpu #shader
130
Iwo Plaza | TypeGPU @iwoplaza.dev · 13/02/2025
My TypeGPU & Koota ECS game project works on React Native! 🎮 (cc @pmnd.rs) It's been a great test bed for JavaScript shaders, as well as for discovering any edge-cases we don't yet support. #webgpu #typegpu #gamedev #javascript
0163
Iwo Plaza | TypeGPU @iwoplaza.dev · 12/01/2025
I was able to very quickly and painlessly add mobile controls thanks to @verekia.com’s “Mana Potion” library 🕹️ #gamedev #javascript #webgpu #typegpu
0170
Iwo Plaza | TypeGPU @iwoplaza.dev · 12/01/2025
🪐 t r a n s c e n d 🪐 I am in the middle of implementing instanced particles for my game engine, and this is the result so far 😵‍💫 #gamedev #webgpu #typegpu #javascript
0111
Iwo Plaza | TypeGPU @iwoplaza.dev · 03/01/2025
⚔️🛡️ #typegpu #webgpu #javascript
020
Iwo Plaza | TypeGPU @iwoplaza.dev · 02/01/2025
Making a web game about FALLING! I decided to hand-roll a custom engine and renderer on top of #webgpu as a learning exercise 👨‍🎓 📚STACK📚 - TypeGPU: deep #typescript and #webgpu integration (& experimental JS shaders 🧪) - Koota (by @pmnd.rs): a fresh ECS framework, very fun so far! #gamedev
1100
Iwo Plaza | TypeGPU @iwoplaza.dev · 02/01/2025
TypeGPU's JavaScript shaders (🧪 experimental 🧪) are like @threejs.org's TSL, except for: - 🔗 End-to-end type inference thanks to Zod-like schemas (cc @colinhacks.com) - 🌊 Regular `if` and `for` statements work just fine! - ⚡️ Big chunk of work offloaded to a Vite plugin. #webgpu
// Zod-like schema for I/O with the GPU
const Material = struct({
  albedo: vec3f,
});

// Allows `material` to point to different memory on each draw-call.
const layout = tgpu.bindGroupLayout({
  material: { uniform: Material },
});

// A typed reference to the eventually bound resource.
const { material } = layout.bound;
//      ^? TgpuBufferUniform<WgslStruct{ albedo: Vec3f }>

// Constant at shader creation time, precomputed.
const sunDir = normalize(vec3f(-0.5, 2, -0.5));

// 🚀: `computeColor` is a function that can run on the GPU!
const computeColor = tgpu.fn([vec3f], vec4f).does((normal) => {
  const diffuse = vec3f(1, 0.9, 0.7);
  const ambient = vec3f(0.1, 0.15, 0.2);
  const att = max(0, dot(normalize(normal), sunDir));
  
  // 🎉: The type of `albedo` is infered, and properly type checked.
  const albedo = material.value.albedo; // => v3f

  const lightColor = add(ambient, mul(att, diffuse));
  const surfaceColor = mul(lightColor, albedo);
  return vec4f(surfaceColor.xyz, 1);
});
250
Iwo Plaza | TypeGPU @iwoplaza.dev · 26/12/2024
Here's the effect in motion, it's surprisingly rather stable temporally!
010
Iwo Plaza | TypeGPU @iwoplaza.dev · 26/12/2024
Who knew limited floating-point precision could look so... painterly! 🎨 The pseudo-random generator is operating on a range of floating-point values high enough to induce visible artifacts. #webgpu #raytracing #shader #javascript
A sample 3d scene with three spheres, each with different material properties.
140
Iwo Plaza | TypeGPU @iwoplaza.dev · 19/11/2024
A quick graphic of how TypeGPU alleviates the need to worry about manual byte packing, data misalignments and runtime errors when working with #WebGPU in JS/TS 🩹💜 Check out our docs to get started! docs.swmansion.com/TypeGPU/why-...
010