WebGL2RenderingContext

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

* Some parts of this feature may have varying levels of support.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'interface WebGL2RenderingContext fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML <canvas>.

Pour obtenir un objet de cette interface, appelez getContext() sur un élément <canvas>, en fournissant "webgl2" comme argument :

js
var canevas = document.getElementById("monCanevas");
var gl = canevas.getContext("webgl2");

Note : WebGL 2 est une extension de WebGL 1. L'interface WebGL2RenderingContext implémente tous les membres de l'interface WebGLRenderingContext. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.

Le didacticiel WebGL contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.

Constantes

Voir la page des constantes WebGL.

Informations d'état

WebGL2RenderingContext.getIndexedParameter()

Retourne la valeur indexée pour la cible donnée.

Tampons

WebGL2RenderingContext.bufferData()

Initialise et crée le magasin de données de l'objet tampon.

WebGL2RenderingContext.bufferSubData()

Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.

WebGL2RenderingContext.copyBufferSubData()

Copie une partie des données d'un tampon vers un autre tampon.

WebGL2RenderingContext.getBufferSubData()

Lit les données d'un tampon et les écrit dans un ArrayBuffer ou un SharedArrayBuffer.

Tampons d'image

WebGL2RenderingContext.blitFramebuffer()

Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.

WebGL2RenderingContext.framebufferTextureLayer()

Attache une seule couche de texture à un tampon d'image.

WebGL2RenderingContext.invalidateFramebuffer()

Invalide le contenu des éléments joints dans un tampon d'image.

WebGL2RenderingContext.invalidateSubFramebuffer()

Invalide le contenu des éléments joints dans un tampon d'image.

WebGL2RenderingContext.readBuffer()

Sélectionne un tampon de couleur comme source pour les pixels.

Tampons de rendu

WebGL2RenderingContext.getInternalformatParameter()

Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.

WebGL2RenderingContext.renderbufferStorageMultisample()

Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.

Textures

WebGL2RenderingContext.texStorage2D()

Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.

WebGL2RenderingContext.texStorage3D()

Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.

WebGL2RenderingContext.texImage3D()

Spécifie une image de texture tridimensionnelle.

WebGL2RenderingContext.texSubImage3D()

Spécifie un sous-rectangle de la texture 3D en cours.

WebGL2RenderingContext.copyTexSubImage3D()

Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.

WebGL2RenderingContext.compressedTexImage3D()

Spécifie une image de texture tridimensionnelle dans un format compressé.

WebGL2RenderingContext.compressedTexSubImage3D()

Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.

Programmes et shaders

WebGL2RenderingContext.getFragDataLocation()

Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.

Uniforms et attributs

WebGL2RenderingContext.uniform[1234][uif][v]()

Méthodes spécifiant les valeurs des variables uniform.

WebGL2RenderingContext.uniformMatrix[234]x[234]fv()

Méthodes spécifiant les valeurs matricielles pour les variables uniform.

WebGL2RenderingContext.vertexAttribI4[u]i[v]()

Méthodes spécifiant les valeurs entières des attributs de sommet génériques.

WebGL2RenderingContext.vertexAttribIPointer()

Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.

Tampons de dessin

WebGL2RenderingContext.vertexAttribDivisor()

Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec gl.drawArraysInstanced() et gl.drawElementsInstanced().

WebGL2RenderingContext.drawArraysInstanced()

Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.

WebGL2RenderingContext.drawElementsInstanced()

Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.

WebGL2RenderingContext.drawRangeElements()

Affiche des primitives à partir des données d'un tableau dans la plage donnée.

WebGL2RenderingContext.drawBuffers()

Spécifie une liste de tampons de couleur dans lesquels dessiner.

WebGL2RenderingContext.clearBuffer[fiuv]()

Efface les tampons du tampon d'image actuellement lié.

Objets requêtes

Méthodes pour travailler avec les objets WebGLQuery.

WebGL2RenderingContext.createQuery()

Crée un nouvel objet WebGLQuery.

WebGL2RenderingContext.deleteQuery()

Supprime l'objet WebGLQuery donné.

WebGL2RenderingContext.isQuery()

Retourne true si l'objet donné est un objet WebGLQuery valide.

WebGL2RenderingContext.beginQuery()

Commence une requête asynchrone.

WebGL2RenderingContext.endQuery()

Marque la fin d'une requête asynchrone.

WebGL2RenderingContext.getQuery()

Retourne un objet WebGLQuery pour la cible donnée.

WebGL2RenderingContext.getQueryParameter()

Retourne des informations sur une requête.

Objets échantilloneurs

WebGL2RenderingContext.createSampler()

Crée un nouvel objet WebGLSampler.

WebGL2RenderingContext.deleteSampler()

Supprime l'objet WebGLSampler donné.

WebGL2RenderingContext.bindSampler()

Lie le WebGLSampler donné à une unité de texture.

WebGL2RenderingContext.isSampler()

Retourne true si l'objet donné est un objet WebGLSampler valide.

WebGL2RenderingContext.samplerParameter[if]()

Définit les paramètres de l'échantillonneur.

WebGL2RenderingContext.getSamplerParameter()

Retourne les informations de paramètres de l'échantillonneur.

Objets sync

WebGL2RenderingContext.fenceSync()

Crée un nouvel objet WebGLSync et l'insère dans le flux de commandes GL.

WebGL2RenderingContext.isSync()

Retourne true si l'objet transmis est un objet WebGLSync valide.

WebGL2RenderingContext.deleteSync()

Supprime l'objet WebGLSync donné.

WebGL2RenderingContext.clientWaitSync()

Bloque et attend qu'un objet WebGLSync reçoive un signal ou que l'expiration du délai donné soit reçue.

WebGL2RenderingContext.waitSync()

Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet WebGLSync donné reçoive un signal.

WebGL2RenderingContext.getSyncParameter()

Retourne les informations de paramètres d'un objet WebGLSync.

Retour de transformations

WebGL2RenderingContext.createTransformFeedback()

Crée et initialise les objets WebGLTransformFeedback.

WebGL2RenderingContext.deleteTransformFeedback()

Supprime l'objet WebGLTransformFeedback donné.

WebGL2RenderingContext.isTransformFeedback()

Retourne true si l'objet transmis est un objet WebGLTransformFeedback valide.

WebGL2RenderingContext.bindTransformFeedback()

Lie l'objet WebGLTransformFeedback transmis à l'état GL en cours.

WebGL2RenderingContext.beginTransformFeedback()

Démarre une opération de retour de transformations.

WebGL2RenderingContext.endTransformFeedback()

Termine une opération de retour de transformations.

WebGL2RenderingContext.transformFeedbackVaryings()

Indique les valeurs à enregistrer dans les tampons WebGLTransformFeedback.

WebGL2RenderingContext.getTransformFeedbackVarying()

Retourne des informations sur les variables varying à partir des tampons WebGLTransformFeedback.

WebGL2RenderingContext.pauseTransformFeedback()

Suspend une opération de retour de transformations.

WebGL2RenderingContext.resumeTransformFeedback()

Reprend une opération de retour de transformations.

Objets tampons uniforms

WebGL2RenderingContext.bindBufferBase()

Lie le WebGLBuffer donné au point de liaison donné (cible) à l'indice donné.

WebGL2RenderingContext.bindBufferRange()

Lie une plage du WebGLBuffer donné au point de liaison donné (cible) à l'indice donné.

WebGL2RenderingContext.getUniformIndices()

Récupère les indices d'un certain nombre d'uniforms dans un WebGLProgram.

WebGL2RenderingContext.getActiveUniforms()

Récupère des informations sur les uniforms actifs dans un WebGLProgram.

WebGL2RenderingContext.getUniformBlockIndex()

Récupère l'indice d'un bloc uniform dans un WebGLProgram.

WebGL2RenderingContext.getActiveUniformBlockParameter()

Récupère des informations d'un bloc uniform actif dans un WebGLProgram.

WebGL2RenderingContext.getActiveUniformBlockName()

Récupère le nom du bloc uniform actif à l'indice donné dans un WebGLProgram.

WebGL2RenderingContext.uniformBlockBinding()

Affecte des points de liaison aux blocs uniforms actifs.

Objets de tableaux de sommets

Spécifications

Specification
WebGL 2.0 Specification
# 3.7

Compatibilité des navigateurs

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.

Voir aussi