Gibt es einen Grund für die Verwendung von WebGL anstelle von 2D Canvas für 2D-Spiele / Apps?

Gibt es außer der Leistung einen Grund für die Verwendung von WebGL anstelle von 2D-Canvas für 2D- Spiele / Apps?

Mit anderen Worten, welche 2D-Funktionen bietet WebGL, die mit 2D-Canvas nicht einfach zu erreichen sind?

Betrachtet man diese Frage von einer anderen Seite:
Wie wählt ein Entwickler eine Technologie einer anderen vor?

• integriert sich besser in ihr bereits gebautes System
• ist einfacher zu bedienen
• ist schneller
• hat mehr Fähigkeiten oder passt besser zu ihren Bedürfnissen
• kosten
• mehr platfrom-unabhängig

Daher werde ich die Unterschiede zwischen Canvas- und WebGL-APIs in Bezug auf diese Eigenschaften diskutieren.

Sowohl Canvas als auch WebGL sind JavaScript-APIs. Sie sind in Bezug auf Integration (Bindung) ziemlich gleich. Sie werden beide von einer Reihe von Bibliotheken unterstützt, die Ihre Codierung beschleunigen könnten. Verschiedene Bibliotheken bieten Ihnen verschiedene Möglichkeiten, Ihren Code zu organisieren. Die Auswahl der Bibliothek bestimmt also, wie Ihre Zeichnungs-APIs strukturiert sind, aber es ist immer noch ziemlich dasselbe (wie der Rest des Codes damit verbunden ist). Wenn Sie die Bibliothek verwenden, hängt das einfache Schreiben von Code von der Bibliothek selbst ab.

Wenn Sie Code von Null schreiben, ist die Canvas-API viel einfacher zu erlernen und zu verstehen. Es erfordert nur minimale mathematische Kenntnisse und die Entwicklung ist schnell und unkompliziert.

Die Arbeit mit der WebGL-API erfordert fundierte mathematische Kenntnisse und ein umfassendes Verständnis der Rendering-Pipeline. Menschen mit diesen Fähigkeiten sind schwerer zu finden, die Produktion ist langsamer (aufgrund der Größe und Komplexität einer solchen Codebasis) und kostet daher mehr.

WebGL ist schneller und verfügt über mehr Funktionen. Daran gibt es keinen Zweifel. Es handelt sich um eine native 3D-API, mit der Sie uneingeschränkten Zugriff auf die Rendering-Pipeline erhalten. Code und Effekte werden schneller ausgeführt und können besser optimiert werden. Mit webGL gibt es wirklich keine Grenzen.

Sowohl Canvas als auch WebGL sind HTML5-Goodies. Normalerweise unterstützen die Geräte, die eines unterstützen, das andere.

Um es zusammenzufassen:

• Zusammenführen des Zeichnungs-API-Codes und des Restes (Integration): ähnlich
• Benutzerfreundlichkeit:
  • (mit Bibliothek) canvas = webGL
  • (von Grund auf neu) webGL << canvas
• Geschwindigkeit: webGL> canvas
• Funktionen: webGL> canvas
• Kosten: webGL ist viel teurer
• Plattform: sehr ähnlich

Hoffe das hilft.

PS Offen für Diskussionen.

Der größte Vorteil ist die Programmierbarkeit der Pipeline und die Leistung. Angenommen, Sie zeichnen zwei Felder übereinander und eines ist ausgeblendet. Einige GL-Implementierungen können das ausgeblendete Feld verwerfen.

Da es hier keine schnelle Möglichkeit gibt, eine Tabelle zu erstellen, habe ich einfach ein Bild der folgenden Vergleichstabelle hochgeladen. Three.js wurde nur der Vollständigkeit halber hinzugefügt.

Aus Erfahrung mit meinen eigenen Anwendungen waren Grafik-Shader der einzige Grund, warum ich Unterstützung für WebGL benötigte. Die Benutzerfreundlichkeit hat für mich wenig Bedeutung, da beide Frameworks mit three.js abstrahiert werden können. Angenommen, ich benötige keine Shader, erlaube ich die Verwendung beider Frameworks, um die Browser- / Maschinenunterstützung zu maximieren.

Welche 2D-Funktionen bietet WebGL, die 2D-Canvas nicht bietet? Der größte meiner Meinung nach sind die programmierbaren Fragment-Shader auf der Grafikhardware. In WebGL können Sie beispielsweise Conways Spiel des Lebens in einem Shader auf Ihrer 3D-Hardware implementieren:

http://glslsandbox.com/e#207.3

Diese Art der 2D-Anzeige würde nur auf der CPU und nicht auf der GPU mit einer 2D-Zeichenfläche ausgeführt. Alle Berechnungen würden in JavaScript implementiert und wären selbst mit Hilfe von Web-Workern nicht so parallel wie die GPU. Dies ist natürlich nur ein Beispiel. Mit Shadern können alle Arten von interessanten 2D-Effekten implementiert werden.

Nun, Leistung wäre einer der größten Gründe, denn wenn Sie ein Spiel programmieren, muss es schnell sein. Es gibt jedoch noch einige andere Gründe, aus denen Sie WebGL anstelle von Canvas auswählen möchten. Es bietet die Möglichkeit, Shader zu codieren, zu beleuchten und zu zoomen, was wichtig ist, wenn Sie eine kommerzielle Spiel-App ausführen. Auch Leinwand wird nach 50 Sprites oder so verzögert.

Mit Canvas können Sie nichts tun, was Sie mit webGL nicht tun können: Mit der Zeichenfläche können Sie die Bytes mit get / putImageData zerstören, und Sie können mit webGL programmgesteuert Linien, Kreise usw. zeichnen.
Wenn Sie jedoch einige Zeichnungen und auch einige Effekte mit 60 fps erstellen möchten, ist die Leistungslücke so groß, dass dies mit Canvas einfach nicht möglich ist, wenn es in webGL einwandfrei läuft. Leistung ist ein Grundmerkmal.

Die Programmierung von webGL ist jedoch recht kompliziert: Überprüfen Sie, ob die Leinwand für Sie gut genug ist, oder suchen Sie nach einer Bibliothek, die die Schmerzen lindert ...
Anderer Nachteil: Sie funktioniert nicht im Internet Explorer (aber was funktioniert?) Und auf einigen Mobiltelefonen.
Informationen zur Kompatibilität finden Sie hier: http://caniuse.com/webgl

Da Sie speziell einige klassische 2D-Dinge wollen, die mit Leinwand nicht gut funktionieren:

• Farbtransformationen (wie das Blinken eines Sprites)
• Wiederholen von Bitmap-Füllungen
• Kacheln von Karten unter Rotation (unter Leinwand erzeugen einige Implementierungen Nähte)
• Deep Layering (sehr implementierungsabhängig)
• multiplikative oder additive Mischung

... aber natürlich haben Sie Pixelzugriff, so dass Sie wirklich alles manuell tun können, einschließlich der oben genannten. Aber das kann sehr, sehr langsam sein. Sie könnten Mesa openGl emscripten, um es theoretisch auf Leinwand zu rendern.

Ein weiterer wichtiger Grund für die Verwendung von webGL wäre, dass das Ergebnis sehr einfach an einen anderen Ort portiert werden kann. Das macht die Fähigkeit auch wertvoller.

Gründe für die Verwendung von Canvas sind, dass es immer noch besser unterstützt wird. Wenn Sie lernen, Dinge Pixel für Pixel zu tun, ist dies auch eine sehr wertvolle Lektion.

Da WebGL eine besonders neue Technologie ist und HTML5-Canvas etablierter ist, hängt es von Ihren Benutzern ab, was Sie verwenden möchten. Wenn Sie glauben, dass Ihre Benutzer mobile Geräte verwenden, würde ich HTML5-Canvas vorschlagen. Wenn Sie jedoch ein besseres 2D-Rendering wünschen, würde ich WebGL verwenden. Was Sie also tun können, ist, wenn die Verwendung beim mobilen Rendern mit HTML5 erfolgt, andernfalls, wenn sie sich auf einer Plattform befinden, die WebGL unterstützt.

Beispielsweise:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

Quellen:
Richtige Methode zur Erkennung der WebGL-Unterstützung?
Was ist der beste Weg, um ein mobiles Gerät in jQuery zu erkennen?

WebGL kann ohne GPU nicht verwendet werden.
Diese Hardwareabhängigkeit ist kein großes Problem, da die meisten Systeme GPUs haben. Sollte sich jedoch jemals eine GPU- oder CPU-Architektur entwickeln, kann es schwierig sein, Webgl-Inhalte durch Emulation zu erhalten. Das Ausführen auf alten (virtualisierten) Computern ist problematisch.

"Canvas vs WebGL" muss jedoch keine binäre Wahl sein. Eigentlich bevorzuge ich die Verwendung von Webgl für Effekte, aber den Rest mache ich auf Leinwand. Wenn ich es in einer VM ausführe, funktioniert es immer noch gut und schnell, nur ohne die Auswirkungen.