Présenté sur HN : simulation de 20 millions de particules en JavaScript

Quelle est la rapidité de JavaScript ? Simulation de 20 millions de particules

Défi

• Simuler 1 000 000 de particules à 60 fps sur un téléphone en utilisant uniquement le CPU

Première tentative

• Simulation de particules en JavaScript en utilisant uniquement le CPU, sans GPU
• Les tableaux JavaScript ne sont pas toujours des tableaux de données contigus
• Utilisation de TypedArray pour conserver une mémoire contiguë

Première implémentation

• Mise en place du multithreading avec Web Workers
• Utilisation de SharedArrayBuffer pour partager la mémoire
• Stockage des données des particules sous forme de nombres flottants 32 bits
• Utilisation de l’objet ImageData pour afficher chaque particule comme un pixel à l’écran

Deuxième tentative

• Ajout de l’interactivité en transmettant les données d’entrée aux workers
• Utilisation d’une approximation de la gravité pour attirer les particules vers les points de contact à l’écran

Troisième tentative

• Faire dessiner les pixels par les workers afin d’utiliser davantage tous les cœurs CPU
• Pari sur un gain de vitesse plus important au prix d’une hausse de l’utilisation mémoire

Quatrième tentative

• Utilisation de messages pour synchroniser les threads jusqu’à la fin du rendu
• Résolution du problème de scintillement

Cinquième tentative

• Utilisation du double buffering pour permettre aux workers de préparer l’image suivante pendant le rendu
• Augmentation de l’utilisation mémoire

Sixième tentative

• Ajout d’une nouvelle idée d’interaction pour que les particules reviennent à leur position initiale
• Ajout de 2 nombres pour stocker la position de départ des particules

Résumé de GN⁺

• Cet article explique comment implémenter une simulation de particules à grande échelle en JavaScript
• Il montre comment exploiter au maximum les performances CPU avec TypedArray et Web Workers
• Il souligne l’importance du multithreading et de la gestion mémoire
• Il présente plusieurs essais pour renforcer l’interactivité de la simulation de particules
• Parmi les projets aux fonctionnalités similaires, on trouve Three.js et Babylon.js

[GN⁺]

Avis Hacker News

• Proposition d’intégrer directement la simulation dans le billet de blog

  • Mention de la nécessité d’ajuster les paramètres pour que cela fonctionne bien même sur de vieux téléphones
  • Ajouter un lien en haut de l’article est aussi une bonne méthode
  • Le site ciechanow.ski est cité comme exemple
  • Mention qu’autrefois, tous les sites web incluaient des éléments interactifs sympas

• Mention qu’il est possible d’exécuter une simulation de particules sur le GPU même sans WebGPU

  • Lien d’exemple fourni : lien

• Mention que la démo sur mobile est très impressionnante

  • Lien vers la démo : lien

• Question sur la possibilité d’encoder les données des particules dans un seul nombre JS

  • Discussion sur la manière de représenter x, y, dx, dy en nombres à virgule flottante 32 bits
  • Exploration de la possibilité de représenter les données dans la plage de MAX_SAFE_INTEGER de JS
  • Mention que l’encodage/décodage des données peut être plus lent que l’économie de mémoire obtenue

• Question soulevée au sujet de l’API Atomics

  • Mention que l’API Atomics n’utilise pas de promesses
  • Explication que, sauf waitAsync, elle n’utilise pas de promesses
  • Lien connexe fourni : lien

• Mention d’une simulation traitant près de 20 millions de particules

  • Lien connexe fourni : lien

• Mention que la vidéo est sympa, mais que le lien CodeSandbox ne fonctionne pas sur Chrome desktop sous macOS

  • Erreur SharedArrayBuffer non définie et erreur CORS rencontrées

• Mention de l’envie de montrer à l’équipe UI les performances rapides de JS

  • En particulier, un JS bien écrit est très rapide

• Remerciements pour l’excellent travail d’ingénierie de l’auteur et la qualité du texte

  • Mention qu’il a gagné beaucoup d’admirateurs

• Partage d’une expérience similaire ayant permis de gérer beaucoup de particules avec une simulation physique de base

  • Lien connexe fourni : lien

• Mention que chrome://tracing pourrait fournir davantage d’insights

  • Lien connexe fourni : lien