Ich mache ein Experiment und versuche, die maximale Partikelanzahl zu verbessern, bevor die Frame-Raten in HTML5 Canvas fallen.
Ich benutze requestAnimationFrame, ich verwende drawImage von einer Zeichenfläche, da dies die schnellste Methode zum Rendern von Bildern zu sein scheint (wie auf jsPerf getestet).
Hier gibt es ein funktionierendes jsFiddle: Ссылка
Sie müssen möglicherweise einige Male aktualisieren oder erneut ausführen, um es zum Laufen zu bringen (keine Ahnung warum, aber es möchte einfach nicht beim Laden der ersten Seite ausgeführt werden.)
Wie es ist, kann mein Computer, der Chrome 22 ausführt, 60 FPS mit ungefähr 5.000 Partikeln beibehalten. Mit jedem weiteren Schritt beginnt FPS zu fallen. Wenn ich drawImage () entferne und nur die Positionen der Partikel berechne, reicht mein Prozessor nicht mehr aus als bis zu zehnmal so viele Partikel.
Was ich wissen möchte: Gibt es einen schnelleren Weg, eine große Anzahl von Partikeln (zB 40.000) zu rendern, als eine Schleife mit drawImage zu verwenden? Ich möchte das vor allem über JavaScript / Canvas wissen, aber wenn Sie nur Kenntnisse über eine andere Sprache wie Java oder C # haben, dann teilen Sie es trotzdem.
Für dieses Problem ist die Verwendung von WebGL (oder einer anderen "3D" API, die für Ihre Plattform geeignet ist) fast immer der beste Weg, dies zu tun. Das Zusammensetzen von vielen Bildern ("Texturen", eher) an beweglichen Positionen ist genau das, wofür Grafikhardware entwickelt wurde. Moderne Browser verwenden die GPU-Beschleunigung zum Ausführen von 2D-Canvas-Zeichnungsoperationen, aber es gibt immer noch JavaScript, das die Zeichnung jedes einzelnen Bildes anfordert, und das ist das Problem.
Ich empfehle Ihnen, WebGL zu testen - für einfache Dinge wie ein Partikelsystem ist es nicht schwer, überhaupt zu programmieren, und Sie können leicht Tausende von Partikeln rendern. Ihr JavaScript stellt einfach ein Array zur Verfügung, das die Positionen aller Partikel enthält.
Eine fortgeschrittene Technik besteht darin, die Simulation der Partikel auch auf die GPU zu übertragen, so dass kein JavaScript benötigt wird, um per-Partikel überhaupt auszuführen. Ich habe selbst einen GPU-Partikelsimulator in meinem GLToy geschrieben. Hier ist es für 80.000 Partikel konfiguriert und erreicht 60 FPS auf meinem Laptop. Tatsächlich ist die Beschränkung in dieser besonderen Konfiguration die Füllrate der glatten Teilchen; Wenn wir nur Punkte verwenden, kann ich es auf 300.000 Partikel . Und ich bin kein Zauberer der Grafikprogrammierung; Ich bin mir sicher, dass jemand, der genau weiß, was zu tun ist, es weiter treiben könnte.
(P.S. Links können fragil sein, wenn ich GLToy überarbeite; wenn Sie die benannten Effekte nicht erhalten, lassen Sie es mich wissen, damit ich die Links reparieren kann.)
Tags und Links javascript html5 webgl html5-canvas sprite