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). Allerdings muss auch die Hardware des Geräts die entsprechenden Funktionen unterstützen.

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

Das <canvas>-Element 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 umfangreiche Weiterentwicklung von WebGL, die über das Interface WebGL2RenderingContext bereitgestellt wird. Es basiert auf OpenGL ES 3.0 und bietet unter anderem folgende neue Funktionen:

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

Leitfäden und Tutorials

Im Folgenden finden Sie verschiedene Leitfäden, die Ihnen helfen, WebGL-Konzepte kennenzulernen, 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, mit denen Sie die 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 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 Erläuterungen, 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.

Tutorials für Fortgeschrittene

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 zentralen Matrizen, die üblicherweise zur Darstellung eines 3D-Objekts verwendet werden: Modell-, Ansichts- und Projektionsmatrix.

Matrizenrechnung für das Web

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

Ressourcen

Bibliotheken

  • three.js ist eine umfassende Open-Source-Bibliothek für 3D-Grafiken mit WebGL.
  • 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 Open-Source-Renderer für 2D-Grafiken mit WebGL.
  • Phaser ist ein schnelles, kostenloses Open-Source-Framework für Browserspiele auf Basis von Canvas und WebGL.
  • PlayCanvas ist eine Open-Source-Spiele-Engine.
  • glMatrix ist eine JavaScript-Bibliothek für Matrizen und Vektoren in leistungsfähigen WebGL-Anwendungen.
  • twgl ist eine Bibliothek, die WebGL-Code kompakter macht.
  • RedGL ist eine Open-Source-Bibliothek für 3D-Grafiken mit WebGL.
  • 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 die jeweilige Funktion unterstützen. Beispielsweise ist S3 Texture Compression (S3TC) nur auf Tablets mit Tegra-Chips verfügbar. Die meisten Browser stellen den WebGL-Kontext unter dem Kontextnamen webgl bereit; bei älteren Browsern kann auch experimental-webgl erforderlich sein. Darüber hinaus ist WebGL 2 vollständig abwärtskompatibel und verwendet den Kontextnamen webgl2.

Hinweise zu Gecko

WebGL-Debugging und -Tests

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 unterstützt WebGL nur die Funktionen und Möglichkeiten, die laut WebGL-Spezifikation mindestens erforderlich sind. So können Sie sicherstellen, dass Ihr WebGL-Code unabhängig von den verfügbaren Funktionen auf jedem Gerät und in jedem Browser funktioniert. Standardmäßig ist der Wert false.

webgl.disable_extensions

Eine boolesche Eigenschaft, die bei true alle WebGL-Erweiterungen deaktiviert. Standardmäßig ist der Wert 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