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

111

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?

html html5-canvas webgl Ali Shakiba
quelle
5
Übrigens: Obwohl Sie die 2D- und die 3D-Kontext-API nicht auf derselben Zeichenfläche verwenden können, können Sie sie dennoch mithilfe mehrerer Leinwände kombinieren. WebGL kann 2D-Leinwände als Texturen verwenden und 2D-Leinwände können WebGL-Leinwände als Quellen für drawImage verwenden.
Philipp

Antworten:

83

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.

Abstrakter Algorithmus
quelle
@Abstract, Wo gibt es gute Tutorials für Web GL und wie viele Stunden wird es dauern?
Pacerier
1
@ Pacerier google es einfach, die ersten paar Treffer sind wahrscheinlich gut genug. Es wird jedoch Wochen und Monate dauern, bis Webgl- und Grafikprogramme im Allgemeinen gut sind, und Jahre, bis sie wirklich gut sind. Es ist nicht nur eine zufällige "Bibliothek", für die Sie API lernen müssen, und das war's.
Abstrakter Algorithmus
@AbstractAlgorithm, ich meine, wenn Sie ein Meister im Programmieren von Canvas sind, wie viele Stunden wird der Wechsel zum Web-GL dauern?
Pacerier
@ Pacerier, das vom Entwickler abhängt und wie Abstract bereits sagte, die mathematischen Fähigkeiten des beteiligten Entwicklers. Es gibt wirklich keine Quantifizierung, die vorgenommen werden kann.
scrappedcola
32

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.

Tabelle

Prabindh
quelle
Betreff "Einige GL-Implementierungen haben die Möglichkeit, die versteckte Box zu verwerfen", aber konnten Sie diesen überschriebenen Teil in JS nicht erkennen und somit nicht neu zeichnen, was nicht benötigt wird?
Pacerier
16

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.

16807
quelle
16

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.

Emackey
quelle
2
Ist WebGL im Vergleich zu Canvas mehr oder weniger anstrengend für das Betriebssystem?
Pacerier
Ich bin gespannt, ob die gesamte Leinwand sowieso Webgl macht. wenn es vorkompiliertes Webgl für allgemeine Anwendungen verwendet, das effizienter wäre als direktes Webgl; oder wenn es in keiner Weise mit opengl verbunden ist, es sei denn, Sie verwenden webgl.
Dmitry
1
@Dmitry große Frage, und verschiedene Browser können unterschiedliche Ansätze für dieses Problem verfolgen. Unabhängig davon, wie sie die Canvas 2D-API beschleunigen, bietet die Canvas 2D-API selbst keine programmierbaren Shader oder Vertex-Array-Puffer. Es handelt sich um eine "gesprächige" API (ein JavaScript-zu-Native-Aufruf pro gezeichnetem Element), während die WebGL-API das Laden von Massendaten und die GPU-basierte benutzerdefinierte Verarbeitung ermöglicht.
Emackey
13

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.

Xk0nSid
quelle
Insbesondere auf einem Gerät wie einem Android-Tablet, auf dem die CPU in Javascript schnell überlastet wird, besteht der Hauptgrund für die Verwendung von WebGL darin, die Rendering-Last auf die GPU zu übertragen.
Curtis
1
@ Xk0n, Re "bietet die Möglichkeit, Shader zu codieren, zu beleuchten und zu zoomen", aber wird es dann nicht GPU-abhängig?
Pacerier
Sie können weiterhin mit setTransform in einem 2D-Canvas-Kontext zoomen. Beim Skalieren von Sprite-Blättern fiel es mir jedoch schwer, Texturen in 2D-Leinwand zu bluten, weshalb ich mich für WebGL wende. Ich habe ein Tutorial gesehen, das verhindert, dass die Probenahme des nächsten Nachbarn außerhalb des Quellgeräts verläuft, wodurch mein Problem mit der Blutungskante behoben werden sollte.
Frank
7

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

GameAlchemist
quelle
7

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.

Starmole
quelle
Übrigens Ist WebGL Multithreaded? Können zwei Threads zwei Teile des Bildschirms gleichzeitig zeichnen?
Pacerier
Ich denke, dass die Antwort "Ja und Nein" lautet, da Webbrowser von Natur aus Single-Threaded sind und das Kopieren der zu rendernden Daten auf die GPU kein Multithreading ist. Sie verwenden jedoch die massive Parallelisierung der Grafikkarte, sobald die Shader mit dem Rendern beginnen. Dabei werden im Wesentlichen mehrere Teile des Bildschirms gleichzeitig gezeichnet. Bitte korrigieren Sie mich, wenn ich falsch liege.
Kent Weigel
2

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?

BürgermeisterMonty
quelle
1

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.

user185953
quelle