WebGPU - AI Life

Hello there :slight_smile:


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 :stuck_out_tongue:

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 :joy: ) Python/OpenCV/numpy project that I called “AI Life” and which is basically trying to reproduce life with cells :

Screencast from 12-11-2024 17:57:09

Screencast from 12-11-2024 17:56:44

Screencast from 12-11-2024 17:56:30

Screencast from 12-11-2024 17:55:42

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 :





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 :smiley: !

@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 :grin:


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

:arrow_right: WebGPU AI LIFE :arrow_left:

  • 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 ! :grin:

++
Tricotou

7 Likes

You are a mad genius! I love it!!

Von Neumann probes are on their way!!

Ahah thanks :grin:


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)


And here is the first SEED I’ll share…
Screencast from 13-11-2024 17:47:13

Crazy :grin:

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 :heavy_check_mark:

1 Like

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! :crazy_face:

2 Likes

This one is crazy!!!

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

Isn’t it ? :grin:
And today I found this one which is crazy in term of structure : SEED
Screencast from 14-11-2024 15:36:23
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 :scream:


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 :

1 Like