JavaScript: Simulation von 20 Millionen Partikeln

Leistung zählt: Entwickler David Gerrells stellte JavaScript eine bemerkenswerte Herausforderung. 20 Millionen Partikel sollten ausschließlich mit JavaScript und ohne Nutzung der GPU simuliert werden. Würde das klappen? Das Hauptziel war es, diese Herausforderung auf einem Mobilgerät mit 60 Bildern pro Sekunde zu meistern. 

Zunächst wurde ein Array erstellt, um die Partikeldaten zu speichern. Die grundlegende Herausforderung bestand darin, sicherzustellen, dass alle Berechnungen effizient durchgeführt werden, um die CPU nicht unnötig warten zu lassen. Die Verwendung von eng gepackten, kontinuierlichen Arrays erwies sich als entscheidend, da dies die Geschwindigkeit der Berechnungen signifikant verbessern kann.

Die Implementierung von Web-Workern ermöglichte es, die Berechnungen auf mehrere CPU-Kerne zu verteilen. Anstelle von synchronem Code, der die Haupt-Thread-Performance beeinträchtigen könnte, wurde ein Signalmechanismus eingerichtet, um den Web-Workern zu ermöglichen, ihre Aufgaben unabhängig auszuführen und ihre Ergebnisse dann zurück an den Haupt-Thread zu senden.

Ein weiteres zentrales Element der Simulation war die Verwendung von SharedArrayBuffers, um Daten zwischen den Workern zu teilen. Dies half nicht nur, den Datenverkehr zwischen Haupt-Thread und Workern zu reduzieren, sondern sorgte auch dafür, dass die Daten sicher und einheitlich verarbeitet wurden. Die Herausforderung lag nicht nur darin, die Partikel zu simulieren, sondern auch die Ergebnisse korrekt zu visualisieren. Hier kam ein ImageData-Objekt ins Spiel, um die Simulation visuell darzustellen.

Dennoch war die größte Herausforderung die Performance: Je mehr Partikel simuliert wurden, desto schwieriger wurde es, stabile Bildraten aufrechtzuerhalten. Besonders aufgefallen ist, dass die meiste Zeit für das Rendern der Partikel auf dem Haupt-Thread aufgewendet wurde, nicht für die Berechnung der Physik.

Mit jeder Optimierungsrunde – von der effizienten Nutzung von TypedArrays bis hin zur Implementierung von Mehrfachpuffern – zeigte sich, dass eine durchdachte Strukturierung der Daten und Berechnungen die Leistung erheblich steigern kann. Schließlich wurde ein Verfahren zur Optimierung der Datenübertragung zur GPU getestet, das die Gesamtperformance der Simulation verbesserte und die Möglichkeit eröffnete, auch komplexe Szenarien mit Millionen von Partikeln in Echtzeit darzustellen.

Das Ergebnis ist beeindruckend und kann auf der Website https://dgerrells.com/sabby?count=20000000 angesehen werden. Sollte der Rechner doch nicht ganz so schnell sein, lässt sich die Anzahl der Partikel über den Parameter reduzieren.