WebGl-2d.js: Implementieren der Canvas 2D-API in WebGL

Ursprünglicher Autor: Devon Govett
  • Übersetzung
WebGL-2d ist eine sehr interessante Javascript-Bibliothek, die Standardmethoden für die Arbeit mit einem 2D-Canvas-Kontext in einem WebGL-Kontext implementiert.

Es ist kein Geheimnis, dass Canvas heutzutage nicht mit einer guten Leistung aufwarten kann und das Rendern komplexer Szenen in Echtzeit ein Problem sein kann. Mit WebGL ist die Leistungssituation viel besser, aber nicht alle gängigen Browser unterstützen diesen Standard , insbesondere plant Microsoft nicht einmal, seine Unterstützung im IE zu implementieren (Drittanbieterentwickler haben aus diesem Grund bereits damit begonnen, das Plugin zu erstellen ).

Indem wir WebGL-2d verbinden und nur ein paar Zeilen hinzufügen, können wir die mit der Canvas 2d-API in Browsern, die WebGL unterstützen, implementierte Grafikwiedergabe erheblich beschleunigen und auf den üblichen 2d-Kontext zurückgreifen.



Glücklicherweise arbeiten Browser-Entwickler an der Leistung von Canvas-Grafiken. Es gibt Unterstützung für die Hardwarebeschleunigung im 2D-Kontext. In naher (hoffentlich) Zukunft wird diese Bibliothek nicht gefragt sein, aber heute muss sie es definitiv sein.

Beispiel für die Initialisierung von WebGL-2d und das Abrufen des Kontexts: Das Projekt-Repository befindet sich auf GitHub .

var cvs = document.getElementById("myCanvas");
WebGL2D.enable(cvs);
var ctx = cvs.getContext('webgl-2d');




Einige Beispiele und Benchmarks aus dem Repository funktionieren nicht, wenn HTML-Dateien direkt geöffnet werden (nicht erfasster Fehler: SECURITY_ERR: DOM-Ausnahme 18, da Cookies mit diesem Startmuster nicht gesetzt werden können). Führen Sie sie auf dem lokalen Webserver aus.

WebGL-2d unterstützt derzeit die folgenden Standardmethoden für 2D-Kontexte:
  • strokeStyle
  • fillStyle
  • strokeRect
  • fillRect
  • übersetzen
  • drehen
  • skalieren
  • speichern
  • wiederherstellen
  • lineWidth
  • drawImage
  • createImageData
  • getImageData
  • putImageData
  • beginPath
  • closePath
  • moveTo
  • lineTo
  • richtig
  • füllen *
  • Schlaganfall *

* Die aktuelle Version der Füll- und Strichmethoden unterstützt keine Bögen und Kurven.
Leider hat der Autor im Moment die Entwicklung seiner Idee in die Höhe getrieben (die letzte Zusage erfolgte im April 2011), aber auf jeden Fall ist das Projekt eine Aufmerksamkeit wert.

Jetzt auch beliebt: