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:

3D-Texturen,
Sampler-Objekte,
Uniform-Buffer-Objekte,
Sync-Objekte,
Query-Objekte,
Transform-Feedback-Objekte,
Erweiterungen, die nun zum Kern von WebGL 2 gehören: Vertex-Array-Objekte, Instancing, mehrere Render-Ziele und Fragmenttiefe.

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

Khronos-WebGL-Website Die Hauptwebsite der Khronos Group zu WebGL.
WebGL Fundamentals Ein grundlegendes Tutorial zu den Grundlagen von WebGL.
Raw WebGL: Eine Einführung in WebGL Ein Vortrag von Nick Desaulniers, der in die Grundlagen von WebGL einführt.
WebGL Academy Ein HTML-/JavaScript-Editor mit Tutorials zum Erlernen der Grundlagen der WebGL-Programmierung.
WebGL Stats Eine Website mit Statistiken zu den WebGL-Funktionen von Browsern auf verschiedenen Plattformen.

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