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
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
Thanks for having me! ๐
Taking it to the next level ๐๐คฏ
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...
WebGPU is exciting โ but bridging libraries is tricky.
๐ฎ@iwoplaza.bsky.social introduces TypeGPU: a TypeScript way to write shaders that talk across Three.js, TensorFlow & more. For devs curious about graphics + interop.
See you at JSNation US?
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
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! โจ
Get started here: software-mansion-labs.github.io/byegl/
It's very early in development, but the promise of mixing WebGL and WebGPU even in the simplest of examples is already exciting! ๐ฅฏ๐ถ
"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
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
Our main effort is definitely WGSL, as weโre betting on it becoming the go-to standard going forward, but a few plans and interests have been materializing lately to give GLSL generation a shot ๐
Tracking here:
github.com/software-man...
Thank you so much! ๐
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
The code above creates a well-typed view over an existing buffer, so you don't have to use TypeGPU APIs anywhere else. We try to be as non-invasive as possible, so people can easily incorporate or eject out granularly.
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 ๐
Interesting! ๐
Would love to share notes, weโre building a very low-level and type-focused library on top of WebGPU called TypeGPU, Iโm sure weโve stumbled upon similar challenges
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 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 ๐
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
Exciting! โจ
It would be awesome to hear your perspective on the problem of interop between WebGPU-based libraries like Tensorflow.js and Three.js, and possible ways forward.
bsky.app/profile/iwop...
Looks beautiful! ๐
Thanks so much for the shout out! ๐
Really fun episode, I am especially interested in the *secret* Nintendo Switch project... ๐
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