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 leistungsstarker, interaktiver 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser, ohne Plug-ins zu verwenden. WebGL führt dazu eine API ein, 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 hardwarebasierte Grafikbeschleunigung des Geräts des Nutzers zu nutzen.

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

Die WebGL 2 API bringt Unterstützung für viele Features des OpenGL ES 3.0-Sets; sie wird über das WebGL2RenderingContext-Interface bereitgestellt.

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

Referenz

Standard-Interfaces

Erweiterungen

Ereignisse

Konstanten und Typen

WebGL 2

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

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

Anleitungen und Tutorials

Im Folgenden finden Sie eine Auswahl von Leitfäden, die Ihnen helfen, WebGL-Konzepte zu verstehen, sowie Tutorials, die Schritt-für-Schritt-Lektionen und -Beispiele bieten.

Leitfäden

Daten in WebGL

Ein Leitfaden zu Variablen, Buffern und anderen Datentypen, die beim Schreiben von WebGL-Code verwendet werden.

WebGL Best Practices

Tipps und Vorschläge, die helfen, die Qualität, Leistung und Zuverlässigkeit Ihres WebGL-Inhalts zu verbessern.

Verwendung von Erweiterungen

Ein Leitfaden zur Verwendung von WebGL-Erweiterungen.

Tutorials

WebGL-Tutorial

Ein Anfängerleitfaden zu den Kernkonzepten von WebGL. Ein guter Einstiegspunkt, wenn Sie keine Vorkenntnisse mit WebGL haben.

Beispiele

Ein einfaches 2D-WebGL-Animationsbeispiel

Dieses Beispiel demonstriert die einfache Animation einer einfarbigen Form. Untersuchte Themen sind das Anpassen an Unterschiede im Seitenverhältnis, eine Funktion zum Erstellen von Shader-Programmen aus mehreren Shader-Sets und die Grundlagen des Zeichnens in WebGL.

WebGL anhand von Beispielen

Eine Reihe von Live-Beispielen mit kurzen Erklärungen, die WebGL-Konzepte und -Fähigkeiten zeigen. Die Beispiele sind nach Themen und Schwierigkeitsgrad sortiert und decken den WebGL-Rendering-Kontext, Shader-Programmierung, Texturen, Geometrie, Benutzerinteraktion und mehr ab.

Fortgeschrittene Tutorials

WebGL Model View Projection

Eine detaillierte Erklärung der drei Kernmatrizen, die typischerweise verwendet werden, um eine 3D-Objektsicht darzustellen: die Modell-, die Ansichts- und die Projektionsmatrix.

Matrix-Mathematik für das Web

Ein nützlicher Leitfaden darüber, wie 3D-Transformationsmatrizen funktionieren und im Web verwendet werden können – sowohl für WebGL-Berechnungen als auch in CSS-Transformationen.

Ressourcen

Bibliotheken

  • three.js ist eine Open-Source-Bibliothek für vollständig ausgestattete 3D-WebGL-Anwendungen.
  • Babylon.js ist eine leistungsstarke, einfache und offene Spiel- und 3D-Rendering-Engine in einem benutzerfreundlichen JavaScript-Framework.
  • Pixi.js ist ein schneller, quelloffener 2D-WebGL-Renderer.
  • Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-basierte Browser-Spiele.
  • PlayCanvas ist eine Open-Source-Spiel-Engine.
  • glMatrix ist eine JavaScript-Bibliothek für Matrizen und Vektoren für hochleistungsfähige WebGL-Apps.
  • twgl ist eine Bibliothek, um WebGL weniger umständlich zu gestalten.
  • RedGL ist eine Open-Source-3D-WebGL-Bibliothek.
  • vtk.js ist eine JavaScript-Bibliothek für wissenschaftliche Visualisierung im 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGLRenderingContext
activeTexture
attachShader
bindAttribLocation
bindBuffer
bindFramebuffer
bindRenderbuffer
bindTexture
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
bufferData
bufferSubData
canvas
checkFramebufferStatus
clear
clearColor
clearDepth
clearStencil
colorMask
compileShader
compressedTexImage2D
pixels parameter accepts SharedArrayBuffer type
compressedTexSubImage2D
copyTexImage2D
copyTexSubImage2D
createBuffer
createFramebuffer
createProgram
createRenderbuffer
createShader
createTexture
cullFace
deleteBuffer
deleteFramebuffer
deleteProgram
deleteRenderbuffer
deleteShader
deleteTexture
depthFunc
depthMask
depthRange
detachShader
disable
disableVertexAttribArray
drawArrays
drawElements
drawingBufferColorSpace
drawingBufferFormat
Experimental
drawingBufferHeight
drawingBufferStorage
Experimental
drawingBufferWidth
enable
enableVertexAttribArray
finish
flush
framebufferRenderbuffer
framebufferTexture2D
frontFace
generateMipmap
getActiveAttrib
getActiveUniform
getAttachedShaders
getAttribLocation
getBufferParameter
getContextAttributes
getError
getExtension
getFramebufferAttachmentParameter
getParameter
getProgramInfoLog
getProgramParameter
getRenderbufferParameter
getShaderInfoLog
getShaderParameter
getShaderPrecisionFormat
getShaderSource
getSupportedExtensions
getTexParameter
getUniform
getUniformLocation
getVertexAttrib
getVertexAttribOffset
hint
isBuffer
isContextLost
isEnabled
isFramebuffer
isProgram
isRenderbuffer
isShader
isTexture
lineWidth
linkProgram
makeXRCompatible
pixelStorei
polygonOffset
readPixels
renderbufferStorage
sampleCoverage
scissor
shaderSource
stencilFunc
stencilFuncSeparate
stencilMask
stencilMaskSeparate
stencilOp
stencilOpSeparate
texImage2D
texParameterf
texParameteri
texSubImage2D
uniform1f
uniform1fv
uniform1i
uniform1iv
uniform2f
uniform2fv
uniform2i
uniform2iv
uniform3f
uniform3fv
uniform3i
uniform3iv
uniform4f
uniform4fv
uniform4i
uniform4iv
uniformMatrix2fv
uniformMatrix3fv
uniformMatrix4fv
unpackColorSpace
useProgram
validateProgram
vertexAttrib1f
vertexAttrib1fv
value parameter accepts SharedArrayBuffer type
vertexAttrib2f
vertexAttrib2fv
value parameter accepts SharedArrayBuffer type
vertexAttrib3f
vertexAttrib3fv
value parameter accepts SharedArrayBuffer type
vertexAttrib4f
vertexAttrib4fv
value parameter accepts SharedArrayBuffer type
vertexAttribPointer
viewport
Available in workers
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

api.WebGL2RenderingContext

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGL2RenderingContext
activeTexture
attachShader
beginQuery
beginTransformFeedback
bindAttribLocation
bindBuffer
bindBufferBase
bindBufferRange
bindFramebuffer
bindRenderbuffer
bindSampler
bindTexture
bindTransformFeedback
bindVertexArray
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
blitFramebuffer
bufferData
srcData parameter accepts SharedArrayBuffer type
bufferSubData
srcData parameter accepts SharedArrayBuffer type
canvas
checkFramebufferStatus
clear
clearBufferfi
clearBufferfv
values parameter accepts SharedArrayBuffer type
clearBufferiv
values parameter accepts SharedArrayBuffer type
clearBufferuiv
values parameter accepts SharedArrayBuffer type
clearColor
clearDepth
clearStencil
clientWaitSync
colorMask
compileShader
compressedTexImage2D
pixels parameter accepts SharedArrayBuffer type
compressedTexImage3D
pixels parameter accepts SharedArrayBuffer type
compressedTexSubImage2D
srcData parameter accepts SharedArrayBuffer type
compressedTexSubImage3D
copyBufferSubData
copyTexImage2D
copyTexSubImage2D
copyTexSubImage3D
createBuffer
createFramebuffer
createProgram
createQuery
createRenderbuffer
createSampler
createShader
createTexture
createTransformFeedback
createVertexArray
cullFace
deleteBuffer
deleteFramebuffer
deleteProgram
deleteQuery
deleteRenderbuffer
deleteSampler
deleteShader
deleteSync
deleteTexture
deleteTransformFeedback
deleteVertexArray
depthFunc
depthMask
depthRange
detachShader
disable
disableVertexAttribArray
drawArrays
drawArraysInstanced
drawBuffers
drawElements
drawElementsInstanced
drawRangeElements
drawingBufferColorSpace
drawingBufferFormat
Experimental
drawingBufferHeight
drawingBufferStorage
Experimental
drawingBufferWidth
enable
enableVertexAttribArray
endQuery
endTransformFeedback
fenceSync
finish
flush
framebufferRenderbuffer
framebufferTexture2D
framebufferTextureLayer
frontFace
generateMipmap
getActiveAttrib
getActiveUniform
getActiveUniformBlockName
getActiveUniformBlockParameter
getActiveUniforms
getAttachedShaders
getAttribLocation
getBufferParameter
getBufferSubData
dstData parameter accepts SharedArrayBuffer type
getContextAttributes
getError
getExtension
getFragDataLocation
getFramebufferAttachmentParameter
getIndexedParameter
getInternalformatParameter
getParameter
getProgramInfoLog
getProgramParameter
getQuery
getQueryParameter
getRenderbufferParameter
getSamplerParameter
getShaderInfoLog
getShaderParameter
getShaderPrecisionFormat
getShaderSource
getSupportedExtensions
getSyncParameter
getTexParameter
getTransformFeedbackVarying
getUniform
getUniformBlockIndex
getUniformIndices
getUniformLocation
getVertexAttrib
getVertexAttribOffset
hint
invalidateFramebuffer
invalidateSubFramebuffer
isBuffer
isContextLost
isEnabled
isFramebuffer
isProgram
isQuery
isRenderbuffer
isSampler
isShader
isSync
isTexture
isTransformFeedback
isVertexArray
lineWidth
linkProgram
makeXRCompatible
pauseTransformFeedback
pixelStorei
polygonOffset
readBuffer
readPixels
pixels parameter accepts SharedArrayBuffer type
renderbufferStorage
renderbufferStorageMultisample
resumeTransformFeedback
sampleCoverage
samplerParameterf
samplerParameteri
scissor
shaderSource
stencilFunc
stencilFuncSeparate
stencilMask
stencilMaskSeparate
stencilOp
stencilOpSeparate
texImage2D
texImage3D
srcData parameter accepts SharedArrayBuffer type
texParameterf
texParameteri
texStorage2D
texStorage3D
texSubImage2D
texSubImage3D
srcData parameter accepts SharedArrayBuffer type
transformFeedbackVaryings
uniform1f
uniform1fv
uniform1i
uniform1iv
uniform1ui
uniform1uiv
uniform2f
uniform2fv
uniform2i
uniform2iv
uniform2ui
uniform2uiv
uniform3f
uniform3fv
uniform3i
uniform3iv
uniform3ui
uniform3uiv
uniform4f
uniform4fv
uniform4i
uniform4iv
uniform4ui
uniform4uiv
uniformBlockBinding
uniformMatrix2fv
value parameter accepts SharedArrayBuffer type
uniformMatrix2x3fv
data parameter accepts SharedArrayBuffer type
uniformMatrix2x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3fv
value parameter accepts SharedArrayBuffer type
uniformMatrix3x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4fv
value parameter accepts SharedArrayBuffer type
uniformMatrix4x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4x3fv
data parameter accepts SharedArrayBuffer type
unpackColorSpace
useProgram
validateProgram
vertexAttrib1f
vertexAttrib1fv
value parameter accepts SharedArrayBuffer type
vertexAttrib2f
vertexAttrib2fv
value parameter accepts SharedArrayBuffer type
vertexAttrib3f
vertexAttrib3fv
value parameter accepts SharedArrayBuffer type
vertexAttrib4f
vertexAttrib4fv
value parameter accepts SharedArrayBuffer type
vertexAttribDivisor
vertexAttribI4i
vertexAttribI4iv
value parameter accepts SharedArrayBuffer type
vertexAttribI4ui
vertexAttribI4uiv
value parameter accepts SharedArrayBuffer type
vertexAttribIPointer
vertexAttribPointer
viewport
waitSync

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

Kompatibilitätsnotizen

Zusätzlich zum Browser muss auch die GPU das Feature unterstützen. Beispielsweise ist die S3-Texturkompression (S3TC) nur auf Tegra-basierten Tablets verfügbar. Die meisten Browser machen den WebGL-Kontext über den Kontextnamen webgl verfügbar, aber ältere benötigen auch experimental-webgl. Darüber hinaus ist das kommende WebGL 2 vollständig abwärtskompatibel und wird den Kontextnamen webgl2 haben.

Gecko-Notizen

WebGL-Debugging und -Testen

Firefox bietet zwei Einstellungen, die es ermöglichen, die Fähigkeiten von WebGL zu Testzwecken zu steuern:

webgl.min_capability_mode

Eine boolesche Eigenschaft, die bei true einen Modus mit minimaler Fähigkeit aktiviert. In diesem Modus ist WebGL so konfiguriert, dass nur das notwendigste Funktionsset und die Mindestanforderungen unterstützt werden, die durch die WebGL-Spezifikation gefordert werden. Dies ermöglicht es Ihnen, sicherzustellen, dass Ihr WebGL-Code auf jedem Gerät oder Browser funktioniert, unabhängig von deren Fähigkeiten. Standard ist false.

webgl.disable_extensions

Eine boolesche Eigenschaft, die bei true alle WebGL-Erweiterungen deaktiviert. Standard ist false.

Siehe auch