WebGL: 2D and 3D graphics for the web

Hinweis: Diese Funktion ist in Web Workers verfügbar.

WebGL (Web Graphics Library) ist eine JavaScript-API für das Rendern von hochleistungsfähigen interaktiven 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser, ohne den Einsatz von Plug-ins. WebGL erreicht dies durch die Einführung einer API, die eng an OpenGL ES 2.0 angelehnt ist und in HTML-<canvas>-Elementen verwendet werden kann. Diese Konformität ermöglicht es der API, von der Hardware-Beschleunigung durch die Grafik des Geräts des Nutzers zu profitieren.

Unterstützung für WebGL ist in allen modernen Browsern vorhanden (siehe die Kompatibilitätstabellen unten); das Gerät des Nutzers muss jedoch auch Hardware besitzen, die diese Funktionen unterstützt.

Die WebGL 2 API führt Unterstützung für viele Funktionen des OpenGL ES 3.0-Sets ein; sie wird über das WebGL2RenderingContext-Interface bereitgestellt.

Das <canvas>-Element wird auch von der Canvas API verwendet, um 2D-Grafiken auf Webseiten zu erstellen.

Referenz

Standard-Schnittstellen

Erweiterungen

Ereignisse

Konstanten und Typen

WebGL 2

WebGL 2 ist ein bedeutendes Update für WebGL, welches durch das WebGL2RenderingContext-Interface bereitgestellt wird. Es basiert auf OpenGL ES 3.0 und neue Funktionen umfassen:

Sehen Sie auch den Blogbeitrag "WebGL 2 landet in Firefox" und webglsamples.org/WebGL2Samples für ein paar Demos.

Leitfäden und Tutorials

Nachfolgend finden Sie eine Auswahl von Leitfäden, die Ihnen helfen, WebGL-Konzepte zu lernen und Tutorials, die schrittweise Lektionen und Beispiele bieten.

Leitfäden

Daten in WebGL

Ein Leitfaden zu Variablen, Puffern und anderen Datentypen, die beim Schreiben von WebGL-Code verwendet werden.

Beste Praktiken für WebGL

Tipps und Vorschläge, um die Qualität, Leistung und Zuverlässigkeit Ihres WebGL-Inhalts zu verbessern.

Erweiterungen verwenden

Ein Leitfaden zur Verwendung von WebGL-Erweiterungen.

Tutorials

WebGL-Tutorial

Ein Anfängerleitfaden zu den Kernkonzepten von WebGL. Ein guter Startpunkt, wenn Sie keine Vorkenntnisse mit WebGL haben.

Beispiele

Ein einfaches 2D-WebGL-Animation-Beispiel

Dieses Beispiel demonstriert die einfache Animation einer einfarbigen Form. Untersuchte Themen sind die Anpassung an Unterschiede im Seitenverhältnis, eine Funktion, um Shader-Programme aus Sets von mehreren Shadern zu erstellen, und die Grundlagen des Zeichnens in WebGL.

WebGL an Beispielen

Eine Serie von Live-Beispielen mit kurzen Erklärungen, die WebGL-Konzepte und -Fähigkeiten zeigen. Die Beispiele sind nach Thema und Schwierigkeitsgrad sortiert und behandeln den WebGL-Rendering-Kontext, Shader-Programmierung, Texturen, Geometrie, Benutzerinteraktionen und mehr.

Fortgeschrittene Tutorials

Komprimierte Texturformate

Wie man komprimierte Texturformate für eine bessere Speicherleistung aktiviert und verwendet.

WebGL-Modellansicht-Projektion

Eine detaillierte Erklärung der drei Kernmatrizen, die typischerweise verwendet werden, um eine 3D-Objektansicht darzustellen: die Modell-, Ansichts- und Projektionsmatrizen.

Matrixmathematik für das Web

Ein nützlicher Leitfaden, wie 3D-Transformationsmatrizen funktionieren und im Web verwendet werden können — sowohl für WebGL-Berechnungen als auch in CSS-Transformationen.

Ressourcen

Bibliotheken

  • three.js ist eine Open-Source-, voll ausgestattete 3D-WebGL-Bibliothek.
  • Babylon.js ist eine leistungsstarke, einfache und offene Spiel- und 3D-Rendering-Engine, verpackt in einem benutzerfreundlichen JavaScript-Framework.
  • Pixi.js ist ein schneller, Open-Source 2D-WebGL-Renderer.
  • Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-basierte Browserspiele.
  • PlayCanvas ist eine Open-Source-Spiele-Engine.
  • glMatrix ist eine JavaScript-Matrix- und Vektorbibliothek für leistungsstarke WebGL-Anwendungen.
  • twgl ist eine Bibliothek, die WebGL weniger umständlich machen soll.
  • RedGL ist eine Open-Source 3D-WebGL-Bibliothek.
  • vtk.js ist eine JavaScript-Bibliothek für die wissenschaftliche Visualisierung im Browser.
  • webgl-lint hilft dabei, Fehler in Ihrem WebGL-Code zu finden und nützliche Informationen bereitzustellen.

Spezifikationen

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

Browser-Kompatibilität

api.WebGLRenderingContext

api.WebGL2RenderingContext

Kompatibilitäts-Hinweise

Zusätzlich zum Browser muss auch die GPU selbst die Funktion unterstützen. Zum Beispiel ist S3 Texture Compression (S3TC) nur auf Tegra-basierten Tablets verfügbar. Die meisten Browser machen den WebGL-Kontext über den webgl-Kontextnamen verfügbar, aber ältere benötigen zusätzlich experimental-webgl. Außerdem ist das kommende WebGL 2 vollständig rückwärtskompatibel und wird den Kontextnamen webgl2 haben.

Gecko-Hinweise

WebGL-Debugging und -Tests

Firefox bietet zwei verfügbare Einstellungen, die Ihnen erlauben, die Fähigkeiten von WebGL zu Testzwecken zu kontrollieren:

webgl.min_capability_mode

Eine boolesche Eigenschaft, die, wenn sie true ist, einen Modus mit minimalen Fähigkeiten aktiviert. In diesem Modus wird WebGL so konfiguriert, dass es nur das absolute Minimum an Funktionen und Fähigkeiten unterstützt, das durch die WebGL-Spezifikation erforderlich ist. Dies lässt Sie sicherstellen, dass Ihr WebGL-Code auf jedem Gerät oder Browser funktioniert, unabhängig von deren Fähigkeiten. Dies ist standardmäßig false.

webgl.disable_extensions

Eine boolesche Eigenschaft, die, wenn sie true ist, alle WebGL-Erweiterungen deaktiviert. Dies ist standardmäßig false.

Siehe auch