JavaScript 2D-Rendering-Bibliothek [pixie.js vs three.js]

Question

Es gibt wenige JavaScript-Bibliotheken, die das Rendern von 2D-Grafiken mit WebGL erlauben. Ich habe herausgefunden, dass die beliebtesten sind three.js und pixi.js. Beide ermöglichen die Verwendung von WebGL oder Canvas-Renderer (für Geräte, die WebGL nicht unterstützen).

Ich möchte Dich fragen, welche diese Bibliotheken ist besser unter dem folgenden termns:

• Ich mag es nur mit 2D-Grafiken, so 3D-Unterstützung vollständig optional.
• Die Leistung ist sehr wichtig - eine Menge von Elementen, Text, die Fähigkeit, reibungslos zu skalieren, sie zu übersetzen etc. ist entscheidend.
• Der Canvas-Renderer (wenn das Gerät WebGl nicht unterstützt, ist wichtig) und ich würde gerne das gleiche (oder sehr ähnliche) Ergebnis mit beiden Renderern sehen.

Wenn es eine andere Bibliothek ist, dass ich in dieser Situation particullar concider sollte, fühlen Sie sich frei zu erzählen :)

Answer 1

Ich habe den exakt gleichen Anwendungsfall und hat gerade versucht, beide. Das Laden vieler statischer Sprites (aus demselben Bild) ist in three.js für 5000 Sprites und darüber schneller, aber das Animieren nur einiger Sprites ergibt bessere Framerates in Pixi (wiederum für 5000 Sprites). (Dies wurde auf Chrome und IE9 auf Desktop-getestet)

Der größte Unterschied war mit dem Canvas Renderer, wo pixi der autodetect die gleichen Ergebnisse wie die WebGL gibt (wenn langsamer) für den gleichen Code, aber three.js Segeltuch-Renderer doesn't support the Sprite type Um portablen Code zu erreichen, müssen Sie Particles verwenden. Wenn Sie Sprites nicht so oft verwenden und meistens Quads oder Dreiecke haben, wäre das kein Problem.

Wenn die Verfügbarkeit von Tutorials und dergleichen überhaupt ein Problem ist, ist three.js mehr etabliert, also gibt es mehr Material.

Ansonsten, für bis zu etwa 2-3k Elemente zur gleichen Zeit gerendert, würde ich mit Pixi gehen.