WebGPU - AI Life

[Tricotou]

Hello there

---

INTRO

I’d been hearing about WebGPU for a long time, but never really got my hands on it, so I decided to take on a pure WebGPU project to see what it was all about!

The aim of my project is to understand as much as possible the power of GPGPU (General Purpose GPU) using WebGPU, and how I can leverage my BabylonJS apps with this

But this project is not BabylonJS, since I had to really understand the stuff, I started from scratch : pure empty TypeScript project, and custom .wgsl shaders.

---

My Project
So, this is the portage of an old (yes, again ) Python/OpenCV/numpy project that I called “AI Life” and which is basically trying to reproduce life with cells :

What I love about this simulation is how simple it is :

• 4 families
• Each having interaction with each others (including itself)
• Interaction is only gravitationnal, either positive (attractive) or negative (repulsive)
• With a distance threshold
• So in total for 4 families there are 32 params (4x4 interactions, 2 params per interaction, being force and distance threshold)

There are :

• 1 renderPipeline shader for display (simple triangle fan)
• 1 computePipeline shader for simulation

---

Here is a simple example to understand the shit :

---

• 1 family
• Attractive force
• Big distance threshold (0.2 screen)
• This results in merging into some balls :
  
  

---

• 1 family
• Repulsive force
• Little distance threshold (0.05 screen)
• This results in speading into a liquid layer :
  
  

---

• 2 families
• Attrative between reds
• Repulsive between greens
• Red also Repulse Green
• This results into the formation of some cells withing a liquid :
  
  

---

Etc, etc…
Now as you can imagine, this kind result in crazy behavior :
If Red is attracted toward green, but green is repulsed by red, green will move, red with follow → Creates Movement

I have to say that I LOVED how simple it was to create the simulation shader, I mean GPGPU with WebGPU… I feel like it’s no longer a “trick” to compute some non render stuffs on a GPU now !

@Deltakosh now I’m really thinking about working on a user friendly API to connect GPGPU to BabylonJS with WebGPU … I need to think about this

---

And before I leave you with these GIFs : YES of course I’ve put the stuff online so that you can try :

WebGPU AI LIFE

• Click on canvas to reinit the params
• Click the share button to share your SEED !

I can’t wait to see what you guys will find !
Sometimes I find some absolutely CRAZY patterns which really feel alive…
Don’t hesite to share some seeds !

++
Tricotou

[Deltakosh]

You are a mad genius! I love it!!

Von Neumann probes are on their way!!

[Tricotou]

@Deltakosh

You are a mad genius! I love it!!

Ahah thanks

---

@Deltakosh

Von Neumann probes are on their way!!

Oh by the way, if some of you are interested, or want to try other GPU-computed simulations, I’ve open-sourced a template (Vite + TypeScript + WebGPU)

GitHub - Tricotou/webgpu-template: Shortest template ever to get started with WebGPU...

---

And here is the first SEED I’ll share…

Crazy

NB: Seed is only about params, but not the initial state (instances positions). So refreshing the page on a specific seed will rerun a new unique simulation, with same interaction params

[CodingCrusader]

You force me out of my beloved js comfort zone… luckily my wife is travelling at the weekend. I’ll take a look at your project.
Thanks for the kickstart!

[Deltakosh]

This one is crazy!!!

[Tricotou]

@CodingCrusader

You force me out of my beloved js comfort zone

There are only good reasons to be pushed out of JS comfort zone

@Deltakosh

This one is crazy!!!

Isn’t it ?
And today I found this one which is crazy in term of structure : SEED

Cells are formed of 4 families, while there are only 4 in total ! (The rest acting as liquid fluid while exactly same params). So it depends only on initial positioning… You can almost draw a philosophical lesson from this : Even with perfect equality at start (each family’s starting rules), depending on where you fall, you either end up within a structured cell, or in the middle of chaos

On top if this, if you look closely inside the cells, there is a chain reaction where green cells are moving a cell one by one while rotating

---

It didn’t tried it yet with WGSL, but on the original Python version, I had computed a “Entropy” computation, in order to automatically detect the “Emergence” of life (Low entropy == Chaos, High entropy == Order). And I would run my computer all night to find some crazy stuffs, and before leaving a seed it was computing a .png preview file :