Iwo Plaza | TypeGPU

Iwo Plaza | TypeGPU

@iwoplaza.dev

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

142 followers291 following59 posts

Pinned

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

Iwo Plaza | TypeGPU reposted

WhatTheStack
@wts.rocks

JavaScript can do almost anything… but operator overloading is still missing. 👀 At What The Stack 2026, @iwoplaza.dev from Software Mansion will talk about the weird, clever, and sometimes cursed ways developers have tried to solve it, including the approach TypeGPU uses today. ⚡🧠

Iwo Plaza | TypeGPU reposted

WhatTheStack
@wts.rocks

🎮 Konrad Reczko is bringing shaders to #WTS. Software Engineer at Software Mansion, graphics programming enthusiast, and the person wondering how every game effect was rendered. TypeScript, TypeGPU, pixels, and the Jelly Slider. 📅 Sept 19 | Skopje 🎟️ wts.sh

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

Thanks for having me! 💜

Syntax@syntax.fm

How is WebGPU unlocking a new wave of graphics and compute power on the web? Check out Scott and CJ's interview with Iwo Plaza, creator of TypeGPU, live at JSNation NYC www.youtube.com/watch?v=ZxPa...

youtube.comTypeScript on the GPU with TypeGPU creator Iwo PlazaScott and CJ sit down live at JSNation NYC with Iwo Plaza, creator of TypeGPU, to dig into how WebGPU is unlocking a new wave of graphics and compute power on the web. They chat about shader…

Iwo Plaza | TypeGPU reposted

Eric Lee
@sdust.dev

Just discovered TypeGPU. It's a TypeScript-first way to write GPU shaders and compute pipelines. You stay in TypeScript, it auto-generates WGSL for WebGPU. 🔥 Perfect for experimenting with rendering, compute, and even AI inference in the browser. docs.swmansion.com/TypeGPU/exam...

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

"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

Iwo Plaza | TypeGPU
@iwoplaza.dev

See the source-code, and consider contributing with issues or PRs 🙏 github.com/software-man... And while you're at it, give us a star! ✨

github.comGitHub - software-mansion-labs/byegl: 🥯🐶 A reimplementation of the WebGL API on top of WebGPU, allowing for gradual migration into the future of 3d on the web🥯🐶 A reimplementation of the WebGL API on top of WebGPU, allowing for gradual migration into the future of 3d on the web - software-mansion-labs/byegl
Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU reposted

Software Mansion
@swmansion.com

TypeGPU 0.6.0 heading your way! 🚀 🔁 Shader logic re-use – share logic across shaders without resorting to string concat 🧩 Dependency injection – parametrize shaders at compile time with slots 🔍 Auto-generated arg + return types in typed functions – inferred from your schema … And more! 👇

Iwo Plaza | TypeGPU
@iwoplaza.dev

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 🚀

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

I think it was able to get it right on first try because: - The TypeScript LSP was able to give feedback to the model along the way - The I/O bridge between the CPU & GPU is type safe, no need to maintain both sides of the app separately (less room for runtime errors) Expect more updates on this 👀

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Xor@xordev.com

"Centrifuge 2" vec3 p,P;for(float z,d,i;i++<5e1;z+=d,o+=(1.2-cos(p.z/vec4(5,1e8,3,0)))/d)p=z*normalize(FC.rgb*2.-r.xyy),P=vec3(atan(p.y-=7.,p.x)/.1+t,p.z*.2-5.*t,length(p.xy)-11.),d=length(vec4(P.z,cos(P+cos(P/.2))-1.))*.5-.1;o=tanh(o/2e2);

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Xor@xordev.com

"Runner" vec3 q,p;for(float z,d,i,l;l++<3e1;z+=d,o+=.1*(vec4(4,2,1,0)-tanh(p.y+4.))*d/(1.+z)){p=z*normalize(FC.rgb*2.-r.xyy)-2.;p.xz-=t+3.;for(q=p,d=p.y,i=4e1;i>.01;i*=.2)d=max(d,min(min(q=i*.9-abs(mod(q,i+i)-i),q.y).x,q.z)),q.xz*=rotate2D(9.);}o=tanh(o*o);

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

View full thread
Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

Iwo Plaza | TypeGPU
@iwoplaza.dev

We're building libraries on top of TypeGPU as we speak, and we would love to work with everyone building their own GPU-enhanced libraries! You can keep full flexibility of your internals, and still use plain WebGPU & WGSL. We handle the API, you handle your lib's core value! 🔗

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

View full thread
Iwo Plaza | TypeGPU
@iwoplaza.dev

== 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)

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

View full thread
Iwo Plaza | TypeGPU
@iwoplaza.dev

What if we could write the glue code in TypeScript, and compile it to WebGPU Shading Language instead? ... We would get hints from the language server about both the output of Three, and the input of Tensorflow. This is what TypeGPU gives you, when you build on top of it! (4/n)

Iwo Plaza | TypeGPU
@iwoplaza.dev

I like to use the analogy of server & client, as writing both sides in TypeScript gives you the same benefits here! (CC @t3.gg 👀) The GPU can be thought of as just an endpoint with an API, and instead of binary blobs and strings, that API can be made type-safe! (5/n)

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

Iwo Plaza | TypeGPU
@iwoplaza.dev

Let's say we wanted to pull a texture out of Three.js, and use it as a tensor in Tensorflow.js. If their internal data structure matches, we can just pass a VRAM pointer to avoid copying to JS and back unnecessarily (could be ~100x slower than the actual work we want to do) (2/n)

Iwo Plaza | TypeGPU
@iwoplaza.dev

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)

Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU reposted

Software Mansion
@swmansion.com

At SWM, we thought: what if we took the idea behind tRPC and React Server Components – sharing types across environments – and applied it to GPU programming? 🧠 That’s how TypeGPU was born. It’s a TypeScript library for WebGPU API that brings type safety to the CPU–GPU boundary. 🚀 bit.ly/43qVph7

bit.lyThe quest for type-safe WebGPU shadersAt Software Mansion, we thought: what if we took the idea behind tRPC and React Server Components – sharing types across environments – and applied it to GPU programming? That’s how TypeGPU was born. It’s a TypeScript library for WebGPU API that brings type safety to the CPU–GPU boundary. In this video, we explain how it works and why we built it. Learn more about TypeGPU 👉 https://docs.swmansion.com/TypeGPU/ #TypeGPU #WebGPU #TypeScript #GPUProgramming #SoftwareMansion

Iwo Plaza | TypeGPU reposted

Software Mansion
@swmansion.com

Building a custom React renderer lets you extend React's capabilities to different platforms. 🚀 If you want to learn how to map your own API to React components using react-reconciler, check our article for a deep dive into the process.👇 blog.swmansion.com/how-to-build...

blog.swmansion.comHow to Build a Custom React Renderer?Explore essentials of building your own React renderer, including key steps, implementation details, and tips for integrating with your…

Iwo Plaza | TypeGPU reposted

Software Mansion
@swmansion.com

WebGPU is great, but working with untyped binary data can be a pain. That’s why we built TypeGPU – a TypeScript library that enhances the WebGPU API, bringing type safety to apps that span the CPU–GPU boundary. 🧠⚙️ 🔗 Check the article to see how TypeGPU works and what’s coming next: bit.ly/4j4pgld

blog.swmansion.comType Safety in WebGPU Applications: The TypeGPU ApproachType-safe WebGPU shaders are now possible, and we’re excited to share our insights & patterns on how you can utilize them in your projects!
Iwo Plaza | TypeGPU
@iwoplaza.dev

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

Iwo Plaza | TypeGPU
@iwoplaza.dev

🪐 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

Iwo Plaza | TypeGPU
@iwoplaza.dev

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