Auf HN vorgestellt: Simulation von 20 Millionen Partikeln in JavaScript

 (dgerrells.com)
4 Punkte von GN⁺ 2024-07-09 | 1 Kommentare | Auf WhatsApp teilen

Wie schnell ist JavaScript? Eine Simulation von 20 Millionen Partikeln

Die Herausforderung

  • Auf einem Smartphone mit nur der CPU 1.000.000 Partikel mit 60 fps simulieren

Der erste Versuch

  • Partikelsimulation in JavaScript nur mit der CPU, ohne die GPU zu verwenden
  • JavaScript-Arrays sind nicht immer Arrays mit zusammenhängenden Daten
  • Mit TypedArray den Speicher zusammenhängend halten

Die erste Implementierung

  • Multithreading mit Web Workers implementieren
  • Speicher mit SharedArrayBuffer gemeinsam nutzen
  • Partikeldaten als 32-Bit-Gleitkommazahlen speichern
  • Jedes Partikel mit dem ImageData-Objekt als Pixel auf dem Bildschirm rendern

Der zweite Versuch

  • Interaktivität hinzufügen, indem Eingabedaten an die Worker übergeben werden
  • Eine Gravitationsnäherung verwenden, damit Partikel von Berührungspunkten auf dem Bildschirm angezogen werden

Der dritte Versuch

  • Die Worker die Pixel zeichnen lassen, um alle CPU-Kerne stärker zu nutzen
  • Höhere Speichernutzung in Kauf nehmen und dafür mehr Geschwindigkeit erwarten

Der vierte Versuch

  • Messaging zur Synchronisierung zwischen Threads verwenden, bis das Rendering abgeschlossen ist
  • Das Flickering-Problem beheben

Der fünfte Versuch

  • Double Buffering verwenden, damit Worker während des Renderings den nächsten Frame vorbereiten können
  • Höherer Speicherverbrauch

Der sechste Versuch

  • Eine neue Interaktionsidee hinzufügen, damit Partikel zu ihrer Startposition zurückkehren
  • 2 zusätzliche Zahlen speichern, um die Startposition der Partikel zu sichern

Zusammenfassung von GN⁺

  • Dieser Artikel erklärt, wie sich eine groß angelegte Partikelsimulation in JavaScript umsetzen lässt
  • Behandelt wird, wie sich mit TypedArray und Web Workers die CPU-Leistung maximal ausnutzen lässt
  • Die Bedeutung von Multithreading und Speichermanagement wird hervorgehoben
  • Es werden verschiedene Versuche gezeigt, die Interaktivität der Partikelsimulation zu erhöhen
  • Ähnliche Projekte mit vergleichbaren Funktionen sind Three.js und Babylon.js

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-07-09
Hacker-News-Kommentare

  • Es wird vorgeschlagen, die Simulation direkt in den Blog einzubetten

    • Es wird erwähnt, dass die Werte angepasst werden müssen, damit sie auch auf älteren Mobiltelefonen gut funktioniert
    • Es sei auch eine gute Methode, oben im Artikel einen Link hinzuzufügen
    • Die Website ciechanow.ski wird als Beispiel genannt
    • Es wird erwähnt, dass früher alle Websites coole interaktive Elemente enthielten

  • Es wird erwähnt, dass man Partikelsimulationen auch ohne WebGPU auf der GPU ausführen kann

    • Beispiellink: Link

  • Es wird erwähnt, dass die Demo auf Mobilgeräten sehr beeindruckend ist

    • Link zur Demo: Link

  • Es wird gefragt, ob sich Partikeldaten in einer einzelnen JS-Zahl kodieren lassen

    • Es wird diskutiert, wie sich x, y, dx, dy als 32-Bit-Gleitkommazahlen darstellen lassen
    • Es wird untersucht, ob sich die Daten innerhalb des JS-MAX_SAFE_INTEGER-Bereichs darstellen lassen
    • Es wird erwähnt, dass das Kodieren/Dekodieren der Daten langsamer sein könnte als die eingesparte Speichernutzung

  • Es wird eine Frage zur Atomics API gestellt

    • Es wird erwähnt, dass die Atomics API keine Promises verwendet
    • Es wird erklärt, dass sie mit Ausnahme von waitAsync keine Promises verwendet
    • Relevanter Link: Link

  • Es wird eine Simulation erwähnt, die mit fast 20 Millionen Partikeln arbeitet

    • Relevanter Link: Link

  • Es wird erwähnt, dass das Video cool ist, der CodeSandbox-Link aber auf MacOS Chrome Desktop nicht funktioniert

    • Es treten der Fehler „SharedArrayBuffer is not defined“ sowie ein CORS-Fehler auf

  • Es wird erwähnt, dass man dem UI-Team die hohe Performance von JS zeigen möchte

    • Besonders gut geschriebener JS-Code ist sehr schnell

  • Es wird dem Autor für das hervorragende Engineering und den großartigen Artikel gedankt

    • Es wird erwähnt, dass er viele Fans gewonnen hat

  • Es wird die Erfahrung mit einem ähnlichen Experiment geteilt, bei dem viele Partikel mit einer einfachen Physiksimulation verarbeitet wurden

    • Relevanter Link: Link

  • Es wird erwähnt, dass chrome://tracing mehr Einblicke liefern könnte

    • Relevanter Link: Link