# WebGPU - AI Life **URL:** \ **Category:** Off topic\ **Tags:** particles, webgpu, ai\ **Created:** [November 13, 2024, 2:24pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732 "2024-11-13T14:24:12Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [November 13, 2024, 2:24pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/1 "2024-11-13T14:24:12Z")
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 : ![Screencast from 12-11-2024 17:57:09](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/3/c31610f5bd05589a0d744947a21f5de062a46ea6.gif) ![Screencast from 12-11-2024 17:56:44](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/1/d1d4c04af99aa1b0d59df16f524dc1b3119ac0dd.gif) ![Screencast from 12-11-2024 17:56:30](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/9/198e796e3b8acc928bda0a0eeeada03c7e3b79c1.gif) ![Screencast from 12-11-2024 17:55:42](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/5/95df98e3c625b4dc569cffdfb88d1c70c4447932.gif) 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 : ![Screenshot from 2024-11-12 17-54-36](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/8/380e0a1e8f35d556a55dd96e3aad1befb3efd9f9.png) * * * - 1 family - Repulsive force - Little distance threshold (0.05 screen) - This results in speading into a liquid layer : ![Screenshot from 2024-11-12 17-54-50](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/2/52cc09eb563c5fa198e48f9a1526f59d820e2fdd.png) * * * - 2 families - Attrative between reds - Repulsive between greens - Red also Repulse Green - This results into the formation of some cells withing a liquid : ![Screenshot from 2024-11-12 17-53-56](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fc270dc24ce4186a689163fce3579ea79330b09b.png) * * * 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](https://webgpu.tricotools.com/) ā¬… - 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 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 13, 2024, 4:12pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/2 "2024-11-13T16:12:26Z")
You are a mad genius! I love it!! Von Neumann probes are on their way!! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [November 13, 2024, 4:49pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/3 "2024-11-13T16:49:34Z")
> [@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...](https://github.com/Tricotou/webgpu-template/)** > > Shortest template ever to get started with WebGPU rendering + computing * * * And here is the first [SEED](https://webgpu.tricotools.com/?seed=0.00200,0.00700,0.20000,0.25000,-0.18269,-0.16728,-0.19451,-0.19195,0.15795,0.13047,-0.08960,0.03104,0.01282,0.03239,-0.02304,0.06627,0.05983,0.05030,-0.16292,-0.07217,0.18657,0.12592,0.15915,0.23366,0.07803,0.21441,0.14323,0.16739,0.22771,0.19843,0.06494,0.19833,0.10836,0.13913,0.17355,0.15155) Iā€™ll shareā€¦ ![Screencast from 13-11-2024 17:47:13](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/3/134f163494c4ac37d6b5ccdff1fad2dedebb1356.gif) 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 āœ” ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [November 13, 2024, 5:39pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/4 "2024-11-13T17:39:45Z")
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! šŸ¤Ŗ ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 14, 2024, 3:34pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/5 "2024-11-14T15:34:44Z")
This one is crazy!!! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [November 14, 2024, 3:49pm UTC](https://forum.babylonjs.com/t/webgpu-ai-life/54732/6 "2024-11-14T15:49:14Z")
> [@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](https://webgpu.tricotools.com/?seed=0.00200,0.00700,0.20000,0.25000,-0.02118,0.19063,-0.16882,-0.10336,-0.08765,-0.14502,0.05599,-0.07628,0.01913,0.09014,0.09357,-0.13394,-0.00022,-0.17627,0.05569,-0.01278,0.15640,0.20585,0.17024,0.24054,0.22695,0.15397,0.16697,0.12820,0.12705,0.16136,0.12669,0.11987,0.23824,0.19104,0.23914,0.24121) ![Screencast from 14-11-2024 15:36:23](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/9/c93e390f0a5f60d6511098670f0e9c85380e3b8a.gif) 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 : ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/f/5feeb402ce2e4009a2e242970e5aa8b6a01cbaf0.jpeg)