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 zur Darstellung von hochleistungsfähigen interaktiven 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser, ohne die Verwendung 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, die von der Hardware des Benutzers bereitgestellte Grafikbeschleunigung zu nutzen.

Unterstützung für WebGL ist in allen modernen Browsern vorhanden (siehe die untenstehenden Kompatibilitätstabellen); jedoch muss das Gerät des Benutzers ebenfalls über die Hardware verfügen, die diese Funktionen unterstützt.

Die WebGL 2-API führt Unterstützung für viele der OpenGL ES 3.0-Feature-Sätze ein; sie wird über das WebGL2RenderingContext-Interface bereitgestellt.

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

Referenz

Standard-Interfaces

Erweiterungen

Ereignisse

Konstanten und Typen

WebGL 2

WebGL 2 ist ein großes Update zu WebGL, das über das WebGL2RenderingContext-Interface bereitgestellt wird. Es basiert auf OpenGL ES 3.0, und neue Features umfassen:

3D-Texturen,
Sampler-Objekte,
Uniform Buffer-Objekte,
Sync-Objekte,
Query-Objekte,
Transform Feedback-Objekte,
Beförderte Erweiterungen, die nun Kernbestandteil von WebGL 2 sind: Vertex Array-Objekte, Instancing, Mehrfach-Render-Ziele, Fragmenttiefe.

Lesen Sie auch den Blogbeitrag "WebGL 2 lands in Firefox" und webglsamples.org/WebGL2Samples für einige Demos.

Leitfäden und Tutorials

Unten finden Sie eine Auswahl an Leitfäden, die Ihnen helfen, WebGL-Konzepte zu erlernen, und Tutorials, die Schritt-für-Schritt-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.
WebGL Best Practices: Tipps und Vorschläge, um die Qualität, Leistung und Zuverlässigkeit Ihrer WebGL-Inhalte zu verbessern.
Verwendung von Erweiterungen: Ein Leitfaden zur Verwendung von WebGL-Erweiterungen.

Tutorials

WebGL Tutorial: Eine Einführung in die wesentlichen Konzepte von WebGL. Ein guter Einstieg, wenn Sie keine Vorerfahrung mit WebGL haben.

Beispiele

Ein grundlegendes 2D-WebGL-Animation-Beispiel: Dieses Beispiel demonstriert die einfache Animation einer einfarbigen Form. Behandelte Themen sind die Anpassung an Unterschiede im Seitenverhältnis, eine Funktion zum Erstellen von Shader-Programmen aus mehreren Shadern und die Grundlagen des Zeichnens in WebGL.
WebGL durch Beispiele: Eine Reihe von Live-Beispielen mit kurzen Erklärungen, die WebGL-Konzepte und -Fähigkeiten veranschaulichen. Die Beispiele sind nach Thema und Schwierigkeitsgrad sortiert und behandeln den WebGL-Rendering-Kontext, Shader-Programmierung, Texturen, Geometrie, Benutzerinteraktion und mehr.

Fortgeschrittene Tutorials

Komprimierte Texturformate: Wie man komprimierte Texturformate für eine bessere Speichernutzung aktiviert und verwendet.
WebGL-Modellansicht-Projektion: Eine detaillierte Erklärung der drei Kernmatrizen, die typischerweise zur Darstellung einer 3D-Objektansicht verwendet werden: die Modell-, Sicht- und Projektionsmatrix.
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

Khronos WebGL Seite Die Hauptseite für WebGL bei der Khronos-Gruppe.
WebGL Grundlagen Ein grundlegendes Tutorial mit WebGL-Grundlagen.
Rohes WebGL: Eine Einführung in WebGL Ein Vortrag von Nick Desaulniers, der die Grundlagen von WebGL vorstellt.
WebGL Akademie Ein HTML/JavaScript-Editor mit Tutorials, um die Grundlagen der WebGL-Programmierung zu erlernen.
WebGL Statistiken Eine Seite mit Statistiken über WebGL-Fähigkeiten in Browsern auf verschiedenen Plattformen.

Bibliotheken

three.js ist eine Open-Source, voll ausgestattete 3D-WebGL-Bibliothek.
Babylon.js ist eine leistungsstarke, einfache und offene Game- und 3D-Rendering-Engine 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-unterstützte Browserspiele.
PlayCanvas ist eine Open-Source-Game-Engine.
glMatrix ist eine JavaScript-Matrix- und Vektorbibliothek für hochleistungsfähige WebGL-Apps.
twgl ist eine Bibliothek, die WebGL weniger umständlich macht.
RedGL ist eine Open-Source 3D-WebGL-Bibliothek.
vtk.js ist eine JavaScript-Bibliothek für wissenschaftliche Visualisierung in Ihrem 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ätsnotizen

Zusätzlich zum Browser muss die GPU selbst die Funktion unterstützen. So ist zum Beispiel die S3-Texturkomprimierung (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 auch experimental-webgl. Außerdem ist das kommende WebGL 2 vollständig rückwärtskompatibel und wird den Kontextnamen webgl2 haben.

Gecko-Notizen

WebGL-Debugging und -Tests

Firefox bietet zwei verfügbare Einstellungen, die Ihnen die Kontrolle über die Fähigkeiten von WebGL zu Testzwecken ermöglichen:

webgl.min_capability_mode: Eine Boolesche Eigenschaft, die, wenn true, einen Modus mit minimaler Fähigkeit aktiviert. In diesem Modus ist WebGL so konfiguriert, dass es nur den minimal erforderlichen Funktionssatz und die erforderlichen Fähigkeiten gemäß der WebGL-Spezifikation unterstützt. Das ermöglicht Ihnen sicherzustellen, dass Ihr WebGL-Code auf jedem Gerät oder Browser funktioniert, unabhängig von deren Fähigkeiten. Standardmäßig ist dies auf false eingestellt.
webgl.disable_extensions: Eine Boolesche Eigenschaft, die bei true alle WebGL-Erweiterungen deaktiviert. Standardmäßig ist dies auf false eingestellt.

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden