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
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_float_blend
ExperimentellEXT_frag_depth
EXT_shader_texture_lod
EXT_sRGB
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_norm16
KHR_parallel_shader_compile
OES_draw_buffers_indexed
OES_element_index_uint
OES_fbo_render_mipmap
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
OVR_multiview2
WEBGL_color_buffer_float
WEBGL_compressed_texture_astc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
WEBGL_multi_draw
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 auffalse
eingestellt. webgl.disable_extensions
-
Eine Boolesche Eigenschaft, die bei
true
alle WebGL-Erweiterungen deaktiviert. Standardmäßig ist dies auffalse
eingestellt.