Jeu de la vie WebGPU

Démontrer la puissance du calcul parallèle GPGPU dans le navigateur en exécutant le Jeu de la Vie de Conway à la résolution native de l'écran (1 cellule = 1 pixel) à 60 FPS constants.

🎯 Le Problème & La Solution

Calculer l'état de millions de cellules à chaque frame implique d'évaluer 8 voisins par cellule 60 fois par seconde. Traité de manière séquentielle sur le thread principal en JavaScript ou via un canvas 2D classique, le processeur sature instantanément dès que l'on dépasse quelques centaines de cellules.

Pour contourner cette limite structurelle du CPU, le projet déporte la totalité de la logique d'automate cellulaire et du rendu direct sur la carte graphique via WebGPU. Le thread principal JS est ainsi libéré de toute charge de calcul lourd.

🛠️ Sous le Capot (Stack & Archi)

L'architecture sépare rigoureusement la boucle de calcul GPU haute performance et la couche de contrôle UI :

• Compute Pipeline (WGSL) : Un Compute Shader traite l'évaluation parallèle des règles du jeu. Deux Storage Buffers sont configurés selon le pattern Ping-Pong (un buffer source en lecture, un buffer destination en écriture, inversés à chaque passe) afin d'éviter les accès concurrents sans allocation mémoire dynamique.
• Render Pipeline (WGSL) : Un Fragment Shader effectue le rendu direct sur une géométrie minimale de 2 triangles couvrant le viewport, en échantillonnant directement le Storage Buffer d'état courant.
• Interface & État Frontend :
  • React & Jotai : Pilotage réactif des paramètres de simulation et de la boucle d'exécution sans déclencher de re-renders lourds au niveau du DOM.
  • shadcn/ui : Composants UI modulaires pour l'accès aux commandes et aux réglages.
• Outillage GPU :
  • Générateur de bruit pseudo-aléatoire directement exécuté dans le compute shader pour l'initialisation instantanée des grilles à haute densité.
  • Module d'injection de motifs (gliders, oscillateurs, structures complexes) traduisant les coordonnées JS en écritures ciblées dans les buffers GPU.

🥊 Le Challenge Technique

Le défi majeur a résidé dans l'apprentissage du modèle mental de WebGPU et l'orchestration bas niveau de la mémoire. Contrairement à des abstractions plus haut niveau, WebGPU exige une gestion explicite des Bind Groups, des alignements mémoire (byte padding) et des barrières de synchronisation.

L'enjeu principal était d'assurer la cohérence du transfert des données JS vers les buffers WGSL (notamment pour l'injection dynamique de presets) sans bloquer le pipeline graphique. La mise en place d'une architecture Ping-Pong Buffer stricte dans le Compute Pass a permis de supprimer tout aller-retour CPU-GPU inutile pendant la simulation.

Retour d'Expérience

• Maîtrise des concepts de calcul GPGPU (Workgroups, Storage Buffers, dispatch parallèle et syntaxe WGSL).
• Compréhension approfondie des contraintes d'accès mémoire et du fonctionnement interne des pipelines WebGPU.
• Conception d'une architecture hybride articulant une interface réactive moderne et un moteur de calcul parallèle haute performance.