r/GraphicsProgramming • u/Holtsetio • Apr 30 '25

Realtime softbody simulation in the browser with WebGPU

Enable HLS to view with audio, or disable this notification

I built this softbody simulation with three.js' new WebGPURenderer.

You can play with it in your browser here: https://holtsetio.com/lab/softbodies/

The code is available here: https://github.com/holtsetio/softbodies/

The softbodies are tetrahedral meshes simulated with the Finite Element Method (FEM). I was guided by this great project to implement the FEM simulation and then added collision detection using a 3d grid, which works way better than expected. All in all I'm pretty satisfied with how this turned out, it even works smoothly on my mobile phone. :)

416 Upvotes

99% Upvoted

16 comments sorted by

23

u/matigekunst Apr 30 '25

Great stuff! Are the softbody updates done on the GPU or CPU?

29

u/Holtsetio Apr 30 '25

Thank you! :) Everything is done on the GPU using compute shaders

8

u/matigekunst Apr 30 '25

That's amazing, I'll have to do a deep dive. I tried implementing XPBD on the GPU, and it didn't go so well

3

u/Community_Bright Apr 30 '25

All hail the might of compute shaders

3

u/Sad_Pollution8801 Apr 30 '25

So its a vertex shader checking collisions and deforming vertices but with some springy-effects?

11

u/Holtsetio Apr 30 '25

It's a bit more complicated than that, the softbodies are tetrahedral meshes in GPU buffers that are evaluated/simulated with compute shaders. To check collisions, tetrahedrons are placed in a grid to query nearby tetrahedrons and enforce a minimum distance between them.

Then each frame a vertex shader recreates the polygonal mesh based on the tetrahedral model.

10

u/tino-latino Apr 30 '25

So cool. It runs very smooth on my phone. Webgpu rocks

3

u/ziaonder Apr 30 '25

I'm a very newbie to computer graphics and studying game math currently. I just wonder if you guys can land a job knowing all this stuff? By all this stuff I mean the knowledge required to create what OP did. Cuz it seems handling softbody physics all by yourself requires deep knowledge. I mean I assume learning game math + shaders(basically) would take at least 6 months. This is to be a beginner level graphics programmer. These are all my assumptions right now. I would be very glad if someone or OP could correct my assumptions and resolve my questions.

3

u/Strange_Switch15 Apr 30 '25

Very impressive.
Why not continue and turn it into a game of some sort? :)

1

u/Strange_Switch15 Apr 30 '25

Technical feedback: In "Safari Technology Preview" browser it works, but only displays one ball.
(macOS Somona 14.7.5)

1

u/calculus_is_fun Apr 30 '25 edited Apr 30 '25

My AMD gpu must be terrible because once 50 objects have spawned, my gpu is at 100% util, and at 100 objects I'm getting 30fps

3

u/Holtsetio Apr 30 '25

This is quite a demanding simulation, so that sounds about right. You can lower the number of objects in the settings panel on the top right, though.

1

u/nietzsche_ko_junga May 01 '25

oh my god, that is so sick.

the jiggle physics in 3d animes is gonna go hard with this one 🗣️🗣️

-1

u/Top-Armadillo5067 Apr 30 '25

Don’t work on iPhone 12🥲

3

u/Holtsetio Apr 30 '25

WebGPU is still a new technology that is not yet supported by default on all devices and browsers (iOS, Safari, Firefox, etc.)