Le Jeu de La Vie - API WebGPU

Simulation du Jeu de la Vie de Conway avec WebGPU

Qu'est-ce que le Jeu de la Vie de Conway ?

Le Jeu de la Vie (Game of Life) est un automate cellulaire créé par le mathématicien britannique John Horton Conway en 1970. C'est un modèle mathématique qui simule l'évolution d'une population de cellules sur une grille bidimensionnelle.

Règles du Jeu de la Vie

Chaque cellule de la grille peut être dans deux états :

• Vivante (active) : représentée par une cellule colorée
• Morte (inactive) : représentée par une cellule vide

L'évolution se fait à chaque génération selon ces règles simples :

1. Survie : Une cellule vivante avec 2 ou 3 voisins vivants reste vivante
2. Naissance : Une cellule morte avec exactement 3 voisins vivants devient vivante
3. Mort : Dans tous les autres cas, la cellule meurt ou reste morte

Ces règles simples donnent naissance à des patterns complexes, oscillateurs, vaisseaux spatiaux, et même des structures capables de calculs universels.

Structure du Code

Ce projet implémente le Jeu de la Vie en utilisant WebGPU pour la simulation et le rendu. Le code est organisé comme suit :

Fichiers

• index.html : Le fichier principal contenant tout le code JavaScript et les shaders WGSL

Composants Principaux

1. Initialisation WebGPU

• Vérification de la prise en charge de WebGPU
• Obtention de l'adaptateur et du device GPU
• Configuration du contexte de rendu du canvas

2. Tampons et Données

• Tampon de sommets : Définit la géométrie d'une cellule (un carré)
• Tampon uniforme : Contient la taille de la grille
• Tampons de stockage : Deux tampons pour alterner l'état des cellules (ping-pong buffering)

3. Shaders WGSL

• Vertex Shader : Positionne les cellules dans la grille et applique l'instanciation
• Fragment Shader : Colore les cellules en fonction de leur position
• Compute Shader : Applique les règles du Jeu de la Vie en parallèle

4. Pipelines

• Pipeline de rendu : Pour afficher la grille de cellules
• Pipeline de calcul : Pour mettre à jour l'état des cellules

5. Boucle de Simulation

• Utilise setInterval pour mettre à jour la grille toutes les 250ms
• Alterne entre les tampons d'état pour éviter les conflits de lecture/écriture

Pourquoi WebGPU est-il utile et intéressant dans ce projet ?

Avantages de WebGPU

1. Calcul Parallèle Massif :
   • Le compute shader traite simultanément toutes les cellules de la grille
   • Chaque thread GPU calcule l'état d'une cellule indépendamment
   • Performance linéaire avec la taille de la grille
2. Rendu Efficace :
   • Instanciation GPU pour dessiner des milliers de cellules avec un seul appel draw
   • Pas de boucle JavaScript pour le rendu
3. Mémoire GPU Optimisée :
   • Les données restent sur le GPU, évitant les transferts coûteux CPU-GPU
   • Utilisation de tampons de stockage pour un accès direct en lecture/écriture
4. API Moderne et Performante :
   • Remplace WebGL pour les calculs généraux sur GPU
   • Support natif des shaders de calcul
   • Meilleure abstraction matérielle

Comparaison avec une implémentation CPU/JavaScript

Une version JavaScript pure nécessiterait :

• Boucles imbriquées pour vérifier chaque cellule et ses voisins
• Calcul séquentiel, beaucoup plus lent pour les grandes grilles
• Transferts répétés de données entre CPU et GPU pour le rendu

WebGPU permet des simulations de grilles beaucoup plus grandes (1024x1024 ou plus) en temps réel.

Comment utiliser le projet

1. Ouvrez index.html dans un navigateur supportant WebGPU (Chrome 113+, Edge 113+, etc.)
2. La simulation démarre automatiquement avec un état initial aléatoire
3. Observez l'évolution des patterns cellulaires

Personnalisation

Vous pouvez modifier les constantes en haut du fichier :

• GRID_SIZE : Taille de la grille (doit être divisible par WORKGROUP_SIZE)
• UPDATE_INTERVAL : Vitesse de la simulation en millisecondes
• WORKGROUP_SIZE : Taille des groupes de travail GPU

Technologies Utilisées

• WebGPU : API pour l'accès direct au GPU depuis le navigateur
• WGSL (WebGPU Shading Language) : Langage de shader pour les calculs GPU
• HTML5 Canvas : Pour l'affichage du rendu GPU

Ressources Supplémentaires

• Tutoriel WebGPU officiel
• Spécification WebGPU
• Article sur le Jeu de la Vie

Ce projet démontre le potentiel de WebGPU pour les simulations complexes et les calculs parallèles dans le navigateur, ouvrant la voie à des applications web plus riches et performantes.