I made this slime mold simulation to learn more about WebGPU and compute shaders. It's essentially a recreation of Sebastian Lague's coding adventure (albiet with fewer features).
Here's a 45-second demo on Twitter, Threads, and r/GraphicsProgramming. You can also try the playable demo on my website (linked in the about section of this repo). Just know that WebGPU doesn't work on all devices so you might get an error screen.
If you prefer a more in-depth video, you can checkout this 5-minute devlog on YouTube where I showcase an extended demo and answer the following questions:
- What is WebGPU?
- What are compute shaders?
- What is the graphics pipeline for this slime simulation?
- What happens in each shader pass?
# Setup Guide (for everyone).
git clone https://github.com/SuboptimalEng/slime-sim-webgpu.git
cd slime-sim-webgpu
npm install
npm run dev
# How to Deploy to GitHub Pages (mainly for me).
# First, go to main.tsx file and enable StrictMode.
npm run build
npm run deploy
# Disable StrictMode before running locally and pushing to GitHub.
- Jeff Jones' Physarum Research Paper
- Sebastian Lague's Slime Simulation Code
- Sebastian Lague’s Slime Simulation Video
- Simulife Hub's Slime Mold Simulation Video
- Sage Jenson's Physarum Simulation Article
Shield:
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
