WebGL : graphismes 2D et 3D pour le Web

WebGL (Web Graphics Library, qu'on pourrait traduire en « bibliothèque de graphismes pour le Web ») est une API JavaScript permettant le rendu de graphismes en 2D ou 3D avec de hautes performances, sans avoir à utiliser de plugin. WebGL introduit une API qui est conforme de près à OpenGL ES 2.0 et qui peut être utilisée sur les éléments HTML <canvas>. Cette conformité permet à l'API de tirer parti de l'accélération matérielle graphique fournie par l'appareil.

WebGL est pris en charge par Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, et Microsoft Edge build 10240+. Il est également nécessaire que le matériel de l'appareil utilisé prenne en charge ces fonctionnalités.

L'API WebGL 2 fournit la plupart des fonctionnalités de OpenGL ES 3.0. Elle est fournie via l'interface WebGL2RenderingContext.

L'élément <canvas> est également utilisé par l'API Canvas pour réaliser des graphismes en 2D sur des pages web.

Référence

Interfaces standard

Extensions

Évènements

Types et constantes

WebGL 2

WebGL 2 est une mise à jour majeure de WebGL et est fournie par l'interface WebGL2RenderingContext. Basée sur OpenGL ES 3.0, les nouvelles fonctionnalités incluent :

Voir aussi le billet "WebGL 2 lands in Firefox" (en anglais) et webglsamples.org/WebGL2Samples pour plusieurs démos.

Guides et tutoriels

Dans la section qui suit, vous trouverez un ensemble de guide pour apprendre les concepts WebGL et de tutoriels pour des exercices guidés pas à pas et des exemples.

Guides

Les données en WebGL

Un guide sur les variables, les tampons et autres types de données utilisées pour l'écriture de code WebGL.

Bonnes pratiques WebGL

Des conseils et suggestions pour vous aider à améliorer la qualité, la performance et la fiabilité de votre contenu WebGL.

Utiliser les extensions

Un guide sur l'utilisation des extensions WebGL.

Tutoriels

Tutoriel WebGL

Un guide pour commencer avec WebGL et découvrir les concepts principaux. Il s'agit d'un bon point de départ si vous n'avez jamais utilisé WebGL auparavant.

Exemples

Un exemple d'animation WebGL simple en 2D

Cet exemple illustre une animation simple d'une forme avec une couleur. Cet article aborde l'adaptation aux facteurs de forme, une fonction pour construire des shaders à partir de plusieurs shaders, ainsi que les bases du dessin en WebGL.

WebGL par l'exemple

Un ensemble d'exemples avec des explications concises qui montrent les concepts et possibilités offertes par WebGL. Les exemples sont triés selon le sujet et le niveau de difficulté. Cet article aborde le contexte de rendu WebGL, la programmation de shaders, les textures, la géométrie, les interactions avec l'utilisatrice ou l'utilisateur, etc.

Tutoriels avancés

Explications sur le modèle, la vue et la projection WebGL

Une explication détaillée sur les trois matrices principales généralement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.

Mathématiques matricielles pour le Web

Un guide expliquant la façon dont les matrices de transformation 3D fonctionnent et comment elles peuvent être utilisées sur le Web, pour les calculs WebGL ou les transformations CSS.

Ressources

Bibliothèques tierces

  • three.js est une bibliothèque 3D WebGL, riche en fonctionnalités et en source ouverte.
  • Babylon.js est un moteur de rendu 3D puissant, simple et en source ouverte, mis à disposition dans un framework JavaScript.
  • Pixi.js est un moteur de rendu WebGL 2D performant en source ouverte.
  • Phaser est un framework performant, gratuit en source ouverte pour créer des jeux fonctionnant sur l'API Canvas ou WebGL.
  • PlayCanvas est un moteur de jeu en source ouverte.
  • glMatrix est une bibliothèque JavaScript matricielle et vectorielle pour les applications WebGL à hautes performances.
  • twgl est une bibliothèque pour rendre WebGL moins verbeux.
  • RedGL est une bibliothèque 3D WebGL en source ouverte.
  • vtk.js est une bibliothèque JavaScript pour la visualisation scientifique dans le navigateur.
  • webgl-lint vous aidera à trouver des erreurs dans votre code WebGL et fournira des informations utiles.

Spécifications

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

Compatibilité des navigateurs

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.

Notes de compatibilité

En plus du navigateur, il faut également que la carte graphique prenne en charge les fonctionnalités. Par exemple, la compression de texture S3 (S3TC) est uniquement disponible pour les tablettes basées sur Tegra. La plupart des navigateurs fournissent le contexte WebGL via webgl, mais les plus anciens utilisent experimental-webgl. WebGL 2 utilise quant à lui le nom de contexte webgl2.

Notes spécifiques à Gecko

Débogage et tests WebGL

Firefox fournit deux préférences pour contrôler les fonctionnalités de WebGL à des fins de tests :

webgl.min_capability_mode

Une propriété booléenne qui, lorsqu'elle vaut true, active un mode de compatibilité minimal. Dans ce mode, WebGL est configuré pour uniquement prendre en charge l'ensemble minimal de fonctionnalités requis par la spécification WebGL. Cela permet de s'assurer que le code WebGL fonctionnera sur n'importe quel appareil ou navigateur, quelles que soient ses capacités. Par défaut, elle vaut false.

webgl.disable_extensions

Une propriété booléenne qui, lorsqu'elle vaut true, désactive l'ensemble des extensions WebGL. Par défaut, elle vaut false.

Voir aussi