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 leistungsstarker, interaktiver 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser – ohne Plug-ins. 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). Allerdings muss auch die Hardware des Geräts die entsprechenden Funktionen unterstützen.

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

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

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. Es basiert auf OpenGL ES 3.0. Zu den neuen Funktionen gehören:

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 Fragment-Tiefe.

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.
Best Practices für WebGL: Tipps und Vorschläge, mit denen Sie Qualität, Leistung und Zuverlässigkeit Ihrer WebGL-Inhalte verbessern können.
Erweiterungen verwenden: Ein Leitfaden zur Verwendung von WebGL-Erweiterungen.

Tutorials

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

Fortgeschrittene Tutorials

Komprimierte Texturformate: So aktivieren und verwenden Sie komprimierte Texturformate, um den Speicher effizienter zu nutzen.
Modell-, Ansichts- und Projektionsmatrizen in WebGL: Eine ausführliche Erklärung der drei grundlegenden Matrizen, die üblicherweise zur Darstellung eines 3D-Objekts verwendet werden: Modell-, Ansichts- und Projektionsmatrix.
Matrixmathematik für das Web: Ein nützlicher 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 WebGL.
Raw WebGL: An introduction to WebGL Ein Vortrag von Nick Desaulniers, der die Grundlagen von WebGL vorstellt.
WebGL Academy Ein HTML-/JavaScript-Editor mit Tutorials zum Erlernen der Grundlagen der WebGL-Programmierung.
WebGL Stats Eine Website mit Statistiken zu den WebGL-Fähigkeiten von Browsern auf verschiedenen Plattformen.

Bibliotheken

three.js ist eine quelloffene, umfassend ausgestattete 3D-WebGL-Bibliothek.
Babylon.js ist eine leistungsfähige, einfach zu verwendende und offene Engine für Spiele und 3D-Rendering in einem benutzerfreundlichen JavaScript-Framework.
Pixi.js ist ein schneller, quelloffener 2D-WebGL-Renderer.
Phaser ist ein schnelles, kostenloses und quelloffenes Framework für Browser-Spiele auf Basis von Canvas und WebGL.
PlayCanvas ist eine quelloffene Spiele-Engine.
glMatrix ist eine JavaScript-Bibliothek für Matrizen und Vektoren in leistungsstarken WebGL-Anwendungen.
twgl ist eine Bibliothek, mit der sich WebGL-Code kompakter schreiben lässt.
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.

Beispiele

Ein einfaches Beispiel für eine 2D-Animation mit WebGL: 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 sowie die Grundlagen des Zeichnens mit WebGL.
WebGL anhand von Beispielen: Eine Reihe interaktiver Beispiele mit kurzen Erklärungen, die Konzepte und Möglichkeiten von WebGL veranschaulichen. Die Beispiele sind nach Thema und Schwierigkeitsgrad geordnet und behandeln unter anderem den WebGL-Rendering-Kontext, die Shader-Programmierung, Texturen, Geometrie und Benutzerinteraktion.

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 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 kann zusätzlich experimental-webgl erforderlich sein. 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 WebGL-Funktionen zu Testzwecken steuern können:

webgl.min_capability_mode: Eine boolesche Eigenschaft, die bei true einen Modus mit minimalem Funktionsumfang aktiviert. In diesem Modus wird WebGL so konfiguriert, dass es nur die von der WebGL-Spezifikation vorgeschriebenen Mindestfunktionen und -fähigkeiten unterstützt. So können Sie sicherstellen, dass Ihr WebGL-Code unabhängig von den Fähigkeiten des Geräts oder Browsers 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