Hey there! I just dove into my first experiment with the new WebGPURenderer, and I’ve gotta tell you, it’s been quite the ride. I’ve been messing around with Three.js Shading Language (TSL) and Node Materials, trying to push the limits of what I can do with Three.js.
Link here:
https://2024.utsubo.com/
The Experiment: Bringing a Dragon to Life
So, here’s the deal: I’ve been working on animating this cool 3D dragon using a Boids algorithm. If you’re not familiar, Boids is this nifty technique that simulates how birds flock together. But instead of birds, I’ve got a dragon! I used compute shading to make it all happen, which basically means I’m letting the GPU do the heavy lifting.
Initially, I tried baking the animation at 60fps and storing it as a binary file. Then, I sent this data over to the GPU with a data texture and animate it in the vertex shader. But, to be honest, the performance wasn’t really cutting it for 2024 instances. I had to get creative, so I ditched the skinning info and handled the animation myself, tweaking and animating the vertices in the positionNode of the material. It was a bit of a workaround, but it made a huge difference.
WebGPU vs. WebGL: My Experience
Here’s something interesting I found out: there’s a big difference between how WebGPU and WebGL handle certain things in my experiment. In WebGL, storage buffers doesn’t exist and are simple array buffers, so they only work and have access with their own attributes in the transform feedback program. This meant my dragons couldn’t “check” for their neighbors like they’re supposed to in the Boids algorithm.
I tried fixing this in the WebGL version using some GPGPU tricks with DataTextures and even transferring the data of the array buffers of the transform feedback program into texture in realtime with some kind of Pixel Buffer Objects technique (PIXEL_UNPACK_BUFFER). But let’s just say the performance wasn’t exactly stellar. So, I decided to just let that part go in the WebGL version. The dragons still stay within their boundaries and react to pointer events, so it’s still pretty cool to watch.
Wrapping Up: My Takeaways
All in all, this experiment with WebGPURenderer and Three.js was a real eye-opener. It’s amazing to see what’s possible with web graphics these days, WebGPU is very exciting, and even with a few hiccups, I learned a ton. You can check out the dragons in action at https://2024.utsubo.com/. It’s not perfect, but I’m proud of how it turned out.
I will keep contributing a lot this year to three.js and will try to release more experiences with my team at Utsubo.
Hope you like it!
Renaud,
@onirenaud
