Tessera

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

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

"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

Alex Sweeney @alexjs.dev · 11mo ago

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

ajs1998.github.io/double-pendu... I made a simulator to explore the space of double pendulums! It runs in your browser with WebGPU, and it's very fast! I wrote a little about it here: alex.leaflet.pub/3lxizbtwyg22d

Simulation steps per second

ajs1998.github.io

Maxime @maxime.bsky.social · last yr.

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

floating soft glass made with WebGPU, compute shader, and a fully custom material r3f.maximeheckel.com/webgpu/glass

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

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

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! 👇

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 🚀

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

Xor@xordev.com · last yr.

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

"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);

TypeGPU makes defining and executing your own compute pipelines easier than ever. 🎉 It's designed to be foundational and give developers full control, while improving DX via type safety and modularity. Watch the video to see what we’ve been up to. 🔥 www.youtube.com/watch?v=QrHZ...

Simplifying Compute Shaders with TypeGPU: GPU Worklets & More

YouTube video by Software Mansion

youtube.com

Xor@xordev.com · last yr.

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

"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);

sai @texoport.in · last yr.

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)

a smol side quest never hurt anyone

$code: const myVShader = VertexShader(function* () { const position = yield* glsl.attribute("position", glsl.types.vec3()) const mvpMatrix = yield* glsl.uniform("mvpMatrix", glsl.types.mat4()) const worldPos = yield* glsl.let( "worldPos", glsl.types.vec4(), glsl.mul(mvpMatrix, glsl.vec4(position, position, position, 1.0)) ) const scaledPos = yield* glsl.let( "scaledPos", glsl.types.vec4(), glsl.mul(worldPos, glsl.float(2.0)) ) yield* glsl.assign("gl_Position", scaledPos) }).compile() console.log(myVShader) --- output --- #version 100 attribute vec3 position; uniform mat4 mvpMatrix; void main() { vec4 worldPos = (mvpMatrix * vec4(position, position, position, 1.0)); vec4 scaledPos = (worldPos * 2.0); gl_Position = scaledPos; }$

Andrew Aquino @aqandrew.com · last yr.

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

part 2 (textures) coming eventually. seeing @iwoplaza.bsky.social’s WebGPU talk inspired me to pick this project back up!

Andrew Aquino @aqandrew.com · last yr.

my favorite blog post, which I haven’t shared here yet. for math/graphics/JS/DnD nerds Creating a 10-Sided Die with React, Part 1 aqandrew.com/blog/10-side...

Creating a 10-Sided Die with React, Part 1 | Andrew Aquino

You can create 3D graphics with React! This is how I built a custom three.js geometry to use in react-three-fiber.

aqandrew.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

The quest for type-safe WebGPU shaders

At 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

bit.ly

Say hello to typegpu-confetti: buttery smooth, fully customizable, and rendered 100% on the GPU via TypeGPU + react-native-wgpu. 🎉