MPM is a hybrid Eulerian/Lagrangian method for the simulation of physically accurate materials. In this project, we show off the compute capabilities of WebGPU to implement a MPM simulator allowing for the real-time simulation of 200k particles from a selection of three materials (Fluids, Jellos, and Snow). The GIFs in the final results are sped up 8 times and the ones in the midpoint results are realtime.
https://jackylu0124.github.io/WebGPUMPM
Step 1. Get Chrome Canary here.
Three Materials Coupling | Fluid Interaction |
---|---|
![]() |
![]() |
Three Jello Collision | Two Jello Hearts |
---|---|
![]() |
![]() |
Snow Smash | Snow & Jello Pikachus |
---|---|
![]() |
![]() |
Fluid & Jello Coupling | Snow & Jello Coupling |
---|---|
![]() |
![]() |
This repo was built from the WebGPU Samples Repo, a set of WGSL and SPIR-V compatible samples demonstrating the use of the WebGPU API. Please see the current implementation status at webgpu.io.
These samples run in Chrome Canary behind the flag --enable-unsafe-webgpu
. If
something isn't working, please file an issue
here. You can get Chrome Canary here.
This project is built with Typescript and compiled using webpack. Building the project requires an installation of Node.js.
- Install dependencies:
npm install
. - For development, start the dev server which will watch and recompile
sources:
npm start
. - For production, compile the project:
npm run build
. - To view the project locally in the browser, start a web server in the project
root directory.
http-server
is the recommended package.
npm install
npm run-script build # or `npm start` and do the following in a separate terminal
npm run-script serve
This project would not have been possible without the guidances from Austin Eng, Kai Ninomiya, Dr. Chenfanfu Jiang, and the WebGPU team.
- https://gpuweb.github.io/gpuweb/
- Ming Gao, Xinlei Wang, Kui Wu, Andre Pradhana, Eftychios Sifakis, Cem Yuksel, and Chenfanfu Jiang. 2018. GPU optimization of material point methods. ACM Trans. Graph. 37, 6, Article 254 (November 2018), 12 pages.
- GLSL SVD Implementation From @alexsr
- Joshuah Wolper, Yunuo Chen, Minchen Li, Yu Fang, Ziyin Qu, Jiecong Lu, Meggie Cheng, and Chenfanfu Jiang. 2020. AnisoMPM: Animating Anisotropic Damage Mechanics. ACM Trans. Graph. 39, 4, Article 37 (July 2020), 16 pages.
- Gaume, J., Gast, T., Teran, J. et al. Dynamic anticrack propagation in snow. Nat Commun 9, 3047 (2018).
- Stomakhin, A., Schroeder, C., Chai, L., Teran, J., Selle, A. 2013. A Material Point Method for Snow Simulation. ACM Trans. Graph. 32, 4, Article 102 (July 2013), 12 pages.
- https://en.wikipedia.org/wiki/Material_point_method
- Chenfanfu Jiang, Craig Schroeder, Joseph Teran, Alexey Stomakhin, and Andrew Selle. 2016. The material point method for simulating continuum materials. In ACM SIGGRAPH 2016 Courses (SIGGRAPH '16). Association for Computing Machinery, New York, NY, USA, Article 24, 1–52.
- https://developers.google.com/web/updates/2019/08/get-started-with-gpu-compute-on-the-web
- pikachu: https://www.cgtrader.com/free-3d-models/character/fantasy/cartoon-pikachu
- among_us: https://www.cgtrader.com/free-3d-models/character/sci-fi/among-us-game-character
- heart_lowpoly: https://www.cgtrader.com/free-3d-models/character/anatomy/love-low-poly
- Origami-Dog: https://www.cgtrader.com/free-3d-models/animals/mammal/origami-dog-2dfa0df1-1101-4672-a0ea-1c0612ed3295
- Turkey: https://free3d.com/3d-model/cooked-turkey-v1--511939.html