1. Web
  2. Web-APIs
  3. WebGL: 2D and 3D graphics for the web

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 zum Rendern leistungsfähiger, interaktiver 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser, ohne Plug-ins zu verwenden. Dazu stellt WebGL eine API bereit, die sich eng an OpenGL ES 2.0 orientiert und in HTML-<canvas>-Elementen verwendet werden kann. Dadurch kann die API die Hardware-Grafikbeschleunigung des Geräts nutzen.

Alle modernen Browser unterstützen WebGL (siehe die Kompatibilitätstabellen unten). Das Gerät muss jedoch ebenfalls über Hardware verfügen, die diese Funktionen unterstützt.

Die WebGL-2-API unterstützt einen großen Teil der Funktionen von OpenGL ES 3.0. Sie wird über das Interface WebGL2RenderingContext bereitgestellt.

Das <canvas>-Element wird auch von der Canvas API für 2D-Grafiken auf Webseiten verwendet.

Referenz

Standard-Interfaces

Erweiterungen

Ereignisse

Konstanten und Typen

WebGL 2

WebGL 2 ist eine umfassende Aktualisierung von WebGL, die über das Interface WebGL2RenderingContext bereitgestellt wird. Sie basiert auf OpenGL ES 3.0 und umfasst unter anderem folgende neue Funktionen:

Einige Demos finden Sie auch im Blogbeitrag „WebGL 2 lands in Firefox“ und auf webglsamples.org/WebGL2Samples.

Leitfäden und Tutorials

Im Folgenden finden Sie verschiedene Leitfäden, die Ihnen helfen, WebGL-Konzepte zu verstehen, sowie Tutorials mit Schritt-für-Schritt-Anleitungen und Beispielen.

Leitfäden

Daten in WebGL

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

Bewährte Verfahren für WebGL

Tipps und Empfehlungen, um die Qualität, Leistung und Zuverlässigkeit Ihrer WebGL-Inhalte zu verbessern.

Erweiterungen verwenden

Ein Leitfaden zur Verwendung von WebGL-Erweiterungen.

Tutorials

WebGL-Tutorial

Ein Leitfaden für Einsteiger zu den grundlegenden Konzepten von WebGL. Ein guter Ausgangspunkt, wenn Sie noch keine Erfahrung mit WebGL haben.

Beispiele

Ein einfaches Beispiel für eine 2D-WebGL-Animation

Dieses Beispiel zeigt die einfache Animation einer einfarbigen Form. Behandelt werden die Anpassung an unterschiedliche Seitenverhältnisse, eine Funktion zum Erstellen von Shader-Programmen aus mehreren Shadern und die Grundlagen des Zeichnens mit WebGL.

WebGL anhand von Beispielen

Eine Reihe interaktiver Beispiele mit kurzen Erklärungen, die WebGL-Konzepte und -Funktionen veranschaulichen. Die Beispiele sind nach Thema und Schwierigkeitsgrad geordnet und behandeln unter anderem den WebGL-Rendering-Kontext, die Shader-Programmierung, Texturen, Geometrie und Benutzerinteraktionen.

Fortgeschrittene Tutorials

Komprimierte Texturformate

So aktivieren und verwenden Sie komprimierte Texturformate, um die Speichernutzung zu verbessern.

Model-View-Projection in WebGL

Eine ausführliche Erklärung der drei grundlegenden Matrizen, die üblicherweise zur Darstellung einer Ansicht auf ein 3D-Objekt verwendet werden: Model-, View- und Projection-Matrix.

Matrixrechnung für das Web

Ein hilfreicher Leitfaden dazu, wie 3D-Transformationsmatrizen funktionieren und im Web eingesetzt werden können – sowohl für WebGL-Berechnungen als auch für CSS-Transformationen.

Ressourcen

Bibliotheken

  • three.js ist eine quelloffene 3D-WebGL-Bibliothek mit umfassendem Funktionsumfang.
  • Babylon.js ist eine leistungsfähige, einfach zu verwendende und offene Engine für Spiele und 3D-Rendering, eingebettet in ein benutzerfreundliches JavaScript-Framework.
  • Pixi.js ist ein schneller, quelloffener 2D-WebGL-Renderer.
  • Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für browserbasierte Spiele mit Canvas und WebGL.
  • PlayCanvas ist eine quelloffene Spiele-Engine.
  • glMatrix ist eine JavaScript-Bibliothek für Matrizen und Vektoren, die für leistungsfähige WebGL-Anwendungen entwickelt wurde.
  • twgl ist eine Bibliothek, die WebGL-Code weniger umständlich macht.
  • RedGL ist eine quelloffene 3D-WebGL-Bibliothek.
  • vtk.js ist eine JavaScript-Bibliothek für wissenschaftliche Visualisierungen im Browser.
  • webgl-lint hilft Ihnen, Fehler in Ihrem WebGL-Code zu finden, und liefert nützliche Informationen.

Spezifikationen

Spezifikation
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 4.7

Browser-Kompatibilität

api.WebGLRenderingContext

api.WebGL2RenderingContext

Hinweise zur Kompatibilität

Neben dem Browser muss auch die GPU selbst die jeweilige Funktion unterstützen. Beispielsweise ist S3 Texture Compression (S3TC) nur auf Tegra-basierten Tablets verfügbar. Die meisten Browser stellen den WebGL-Kontext unter dem Kontextnamen webgl bereit; bei älteren Browsern ist zusätzlich experimental-webgl erforderlich. Außerdem ist WebGL 2 vollständig abwärtskompatibel und verwendet den Kontextnamen webgl2.

Hinweise zu Gecko

WebGL debuggen und testen

Firefox bietet zwei Einstellungen, mit denen Sie die Funktionen von WebGL zu Testzwecken steuern können:

webgl.min_capability_mode

Eine boolesche Eigenschaft, die bei true einen Modus mit minimalem Funktionsumfang aktiviert. In diesem Modus ist WebGL so konfiguriert, dass nur die von der WebGL-Spezifikation vorgeschriebenen Mindestfunktionen und -fähigkeiten unterstützt werden. So können Sie sicherstellen, dass Ihr WebGL-Code unabhängig von den jeweiligen Funktionen auf jedem Gerät und in jedem Browser funktioniert. Der Standardwert ist false.

webgl.disable_extensions

Eine boolesche Eigenschaft, die bei true alle WebGL-Erweiterungen deaktiviert. Der Standardwert ist false.

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden