WebGLRenderingContext

Baseline Widely available *

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

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

L'interface WebGLRenderingContext fournit une interface pour le contexte de rendu graphique OpenGL ES 2.0 de la surface de dessin fournie par un élément HTML <canvas>.

Pour obtenir un accès à un contexte WebGL pour le rendu graphique 2D et/ou 3D, on appellera getContext() sur un élément <canvas> en fournissant la chaîne de caractères webgl :

js
let canvas = document.getElementById("myCanvas");
let gl = canvas.getContext("webgl");

Une fois le contexte de rendu WebGL obtenu pour le canevas, on peut l'utiliser pour le rendu graphique d'objets à l'intérieur de ce canevas. Le tutoriel WebGL contient de plus amples informations, exemples et ressources pour débuter avec WebGL.

Si vous avez besoin d'un contexte WebGL 2.0, voyez WebGL2RenderingContext qui permet d'utiliser une implémentation avec des graphismes OpenGL ES 3.0.

Constantes

Voir la page sur les constantes WebGL.

Le contexte WebGL

Les propriétés et méthodes suivantes fournissent des informations et fonctionnalités générales pour manipuler le contexte WebGL :

WebGLRenderingContext.canvas

Une référence en lecture seule vers l'objet HTMLCanvasElement correspondant. Peut valoir null si le contexte n'est pas associé à un élément <canvas>.

WebGLRenderingContext.commit() Expérimental

Pousse les frames sur l'élément HTMLCanvasElement, si le contexte n'est pas directement rattaché à un canevas donné.

WebGLRenderingContext.drawingBufferWidth

La largeur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la largeur de l'élément canevas associé à ce contexte.

WebGLRenderingContext.drawingBufferHeight

La hauteur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la hauteur de l'élément canevas associé à ce contexte.

WebGLRenderingContext.getContextAttributes()

Renvoie un objet WebGLContextAttributes qui contient les paramètres de contextes réels. Peut renvoyer null si le contexte est perdu.

WebGLRenderingContext.isContextLost()

Renvoie true si le contexte est perdu et false sinon.

WebGLRenderingContext.makeXRCompatible()

S'assure que le contexte est compatible avec le matériel de réalité mixte, recréant si besoin le contexte avec une nouvelle configuration. Cette méthode peut être utilisée pour démarrer une application dont l'affichage commence en 2D puis passe ensuite dans un mode de réalité virtuelle ou augmentée.

Vue et rognage

WebGLRenderingContext.scissor()

Définit la boîte de découpe (scissor box).

WebGLRenderingContext.viewport()

Définit la zone d'affichage (viewport).

Informations sur l'état

WebGLRenderingContext.activeTexture()

Sélectionne l'unité de texture active.

WebGLRenderingContext.blendColor()

Définit la source et la destination des facteurs de fusion.

WebGLRenderingContext.blendEquation()

Définit l'équation de fusion RGB et l'équation de fusion alpha avec une seule équation.

WebGLRenderingContext.blendEquationSeparate()

Définit l'équation de fusion RGB et l'équation de fusion alpha séparément.

WebGLRenderingContext.blendFunc()

Definit la fonction utilisée pour l'arithmétique de la fusion des pixels.

WebGLRenderingContext.blendFuncSeparate()

Definit séparément la fonction utilisée pour l'arithmétique de la fusion des pixels pour les composantes RGB d'une part et alpha d'autre part.

WebGLRenderingContext.clearColor()

Définit les valeurs de couleur utilisées lors du nettoyage des tampons de couleur.

WebGLRenderingContext.clearDepth()

Définit la valeur de profondeur utilisée lors du nettoyage du tampon de profondeur.

WebGLRenderingContext.clearStencil()

Définit la valeur du pochoir utilisée lors du nettoyage du tampon de pochoir.

WebGLRenderingContext.colorMask()

Définit les composantes de couleur à activer ou à désactiver lors du dessin ou du rendu dans un objet WebGLFramebuffer.

WebGLRenderingContext.cullFace()

Indique si les polygones masqués en face arrière ou en face avant sont coupés (voir l'article Wikipédia sur Back-face culling).

WebGLRenderingContext.depthFunc()

Indique une fonction qui compare la profondeur du pixel à venir avec la valeur actuelle de profondeur sur le tampon.

WebGLRenderingContext.depthMask()

Indique si l'écriture sur le tampon de profondeur est activée ou désactivée.

WebGLRenderingContext.depthRange()

Indique la correspondance pour l'intervalle de profondeur entre les coordonnées normalisées de l'appareil et les coordonnées de la fenêtre ou de la zone d'affichage.

WebGLRenderingContext.disable()

Désactive les capacités spécifiques à WebGL pour ce contexte.

WebGLRenderingContext.enable()

Active les capacités spécifiques à WebGL pour ce contexte.

WebGLRenderingContext.frontFace()

Indique si les polygones font face vers l'avant ou vers l'arrière en indiquant une orientation d'enroulement.

WebGLRenderingContext.getParameter()

Renvoie une valeur pour le nom de paramètre passé en argument.

WebGLRenderingContext.getError()

Renvoie des informations sur l'erreur.

WebGLRenderingContext.hint()

Définit les indications pour certains comportements. L'interprétation de ces indications dépend de l'implémentation.

WebGLRenderingContext.isEnabled()

Teste si une fonctionnalité WebGL donnée est activée ou non pour ce contexte.

WebGLRenderingContext.lineWidth()

Définit la largeur des lignes pour les lignes matricielles.

WebGLRenderingContext.pixelStorei()

Définit le mode de stockage des pixels.

WebGLRenderingContext.polygonOffset()

Définit les facteurs d'échelle et les unités pour calculer les valeurs de profondeur.

WebGLRenderingContext.sampleCoverage()

Définit les paramètres de couverture multi-échantillonnage pour les effets anti-crénelage.

WebGLRenderingContext.stencilFunc()

Définit la fonction et la valeur de référence pour les fonctions avant et arrière pour le test du pochoir.

WebGLRenderingContext.stencilFuncSeparate()

Définit la fonction avant et/ou arrière et la valeur de référence pour le test du pochoir.

WebGLRenderingContext.stencilMask()

Contrôle l'activation/la désactivation des modes d'écriture avant et arrière pour les bits individuels sur les plans du pochoir.

WebGLRenderingContext.stencilMaskSeparate()

Contrôle l'activation/la désactivation des modes d'écriture avant et/ou arrière pour les bits individuels sur les plans du pochoir.

WebGLRenderingContext.stencilOp()

Définit les actions de test du pochoir pour l'avant et pour l'arrière.

WebGLRenderingContext.stencilOpSeparate()

Définit les actions de test du pochoir pour l'avant et/ou pour l'arrière.

Tampons

WebGLRenderingContext.bindBuffer()

Lie un objet WebGLBuffer à une cible donnée.

WebGLRenderingContext.bufferData()

Met à jour les données du tampon.

WebGLRenderingContext.bufferSubData()

Met à jour les données du tampon à partir d'un décalage donné.

WebGLRenderingContext.createBuffer()

Crée un objet WebGLBuffer.

WebGLRenderingContext.deleteBuffer()

Supprime un objet WebGLBuffer.

WebGLRenderingContext.getBufferParameter()

Renvoie des informations à propos du tampon.

WebGLRenderingContext.isBuffer()

Renvoie un booléen indiquant si le tampon passé est valide.

Tampons d'image (framebuffers)

WebGLRenderingContext.bindFramebuffer()

Lie un objet WebGLFrameBuffer à une cible donnée.

WebGLRenderingContext.checkFramebufferStatus()

Renvoie le statut du tampon d'image (framebuffer).

WebGLRenderingContext.createFramebuffer()

Crée un objet WebGLFrameBuffer.

WebGLRenderingContext.deleteFramebuffer()

Supprime un objet WebGLFrameBuffer.

WebGLRenderingContext.framebufferRenderbuffer()

Attache un objet WebGLRenderingBuffer à un objet WebGLFrameBuffer.

WebGLRenderingContext.framebufferTexture2D()

Attache une image de texture à un objet WebGLFrameBuffer.

WebGLRenderingContext.getFramebufferAttachmentParameter()

Renvoie des informations à propos du tampon d'image (framebuffer).

WebGLRenderingContext.isFramebuffer()

Renvoie un booléen indiquant si l'objet WebGLFrameBuffer passé est valide.

WebGLRenderingContext.readPixels()

Lit un bloc de pixels à partir du WebGLFrameBuffer.

Tampons de rendu

WebGLRenderingContext.bindRenderbuffer()

Lie un objet WebGLRenderBuffer à une cible donnée.

WebGLRenderingContext.createRenderbuffer()

Crée un objet WebGLRenderBuffer.

WebGLRenderingContext.deleteRenderbuffer()

Supprime un objet WebGLRenderBuffer.

WebGLRenderingContext.getRenderbufferParameter()

Renvoie des informations à propos du tampon de rendu.

WebGLRenderingContext.isRenderbuffer()

Renvoie un booléen indiquant si l'objet WebGLRenderingBuffer passé est valide.

WebGLRenderingContext.renderbufferStorage()

Crée un magasin de données pour le tampon de rendu.

Textures

WebGLRenderingContext.bindTexture()

Lie un objet WebGLTexture à une cible donnée.

WebGLRenderingContext.compressedTexImage2D()

Indique une image de texture 2D dans un format compressé.

WebGLRenderingContext.compressedTexSubImage2D()

Indique une sous-image de texture 2D dans un format compressé.

WebGLRenderingContext.copyTexImage2D()

Copie une image de texture 2D.

WebGLRenderingContext.copyTexSubImage2D()

Copie une sous-image de texture 2D.

WebGLRenderingContext.createTexture()

Crée un objet WebGLTexture.

WebGLRenderingContext.deleteTexture()

Supprime un objet WebGLTexture.

WebGLRenderingContext.generateMipmap()

Génère un ensemble de mipmaps pour un objet WebGLTexture.

WebGLRenderingContext.getTexParameter()

Renvoie des informations à propos de la texture.

WebGLRenderingContext.isTexture()

Renvoie un booléen qui indique sur l'objet WebGLTexture passé est valide.

WebGLRenderingContext.texImage2D()

Indique une image de texture 2D.

WebGLRenderingContext.texSubImage2D()

Met à jour le sous-rectangle de l'objet WebGLTexture courant.

WebGLRenderingContext.texParameterf()

Définit les paramètres de texture.

WebGLRenderingContext.texParameteri()

Définit les paramètres de texture.

Programmes et shaders

WebGLRenderingContext.attachShader()

Attache un WebGLShader à un WebGLProgram.

WebGLRenderingContext.bindAttribLocation()

Lie un index de sommet générique à une variable d'attribut nommée.

WebGLRenderingContext.compileShader()

Compile un WebGLShader.

WebGLRenderingContext.createProgram()

Crée un WebGLProgram.

WebGLRenderingContext.createShader()

Crée un WebGLShader.

WebGLRenderingContext.deleteProgram()

Supprime un WebGLProgram.

WebGLRenderingContext.deleteShader()

Supprime un WebGLShader.

WebGLRenderingContext.detachShader()

Détache un WebGLShader.

WebGLRenderingContext.getAttachedShaders()

Renvoie une liste d'objets WebGLShader attachés à un WebGLProgram.

WebGLRenderingContext.getProgramParameter()

Renvoie des informations à propos du programme.

WebGLRenderingContext.getProgramInfoLog()

Renvoie le journal d'informations pour un objet WebGLProgram.

WebGLRenderingContext.getShaderParameter()

Renvoie des informations à propos du shader.

WebGLRenderingContext.getShaderPrecisionFormat()

Renvoie un objet WebGLShaderPrecisionFormat décrivant la précision pour le format numérique du shader.

WebGLRenderingContext.getShaderInfoLog()

Renvoie le journal d'informations pour un objet WebGLShader.

WebGLRenderingContext.getShaderSource()

Renvoie le code source d'un WebGLShader sous la forme d'une chaîne de caractères.

WebGLRenderingContext.isProgram()

Renvoie un booléen indiquant si l'objet WebGLProgram passé est valide.

WebGLRenderingContext.isShader()

Renvoie un booléen indiquant si l'objet WebGLShader passé est valide.

WebGLRenderingContext.linkProgram()

Effectue les liaisons pour l'objet WebGLProgram passé.

WebGLRenderingContext.shaderSource()

Définit le code source d'un WebGLShader.

WebGLRenderingContext.useProgram()

Utilise le WebGLProgram indiqué comme partie de l'état de rendu courant.

WebGLRenderingContext.validateProgram()

Valide un WebGLProgram.

Uniformes et attributs

WebGLRenderingContext.disableVertexAttribArray()

Désactive un tableau d'attribut de sommet à une position donnée.

WebGLRenderingContext.enableVertexAttribArray()

Active un tableau d'attribut de sommet à une position donnée.

WebGLRenderingContext.getActiveAttrib()

Renvoie des informations à propos d'une variable d'attribut active.

WebGLRenderingContext.getActiveUniform()

Renvoie des informations à propos d'une variable d'uniforme active.

WebGLRenderingContext.getAttribLocation()

Renvoie l'emplacement d'une variable d'attribut.

WebGLRenderingContext.getUniform()

Renvoie la valeur d'une variable d'uniforme à un emplacement donné.

WebGLRenderingContext.getUniformLocation()

Renvoie l'emplacement d'une variable d'uniforme.

WebGLRenderingContext.getVertexAttrib()

Renvoie les informations à propos d'un attribut de sommet à une position donnée.

WebGLRenderingContext.getVertexAttribOffset()

Renvoie l'adresse d'un attribut de sommet donné.

WebGLRenderingContext.uniform[1234][fi][v]()

Définit une valeur pour une variable d'uniforme.

WebGLRenderingContext.uniformMatrix[234]fv()

Définit la valeur matricielle pour une variable d'uniforme.

WebGLRenderingContext.vertexAttrib[1234]f[v]()

Définit une valeur pour un attribut de sommet générique.

WebGLRenderingContext.vertexAttribPointer()

Définit les formats de données et les emplacements des attributs de sommet dans un tableau d'attributs de sommet.

Dessiner les tampons

WebGLRenderingContext.clear()

Nettoie les tampons indiqués avec les valeurs prédéfinies.

WebGLRenderingContext.drawArrays()

Effectue le rendu des primitives à partir des données de tableaux.

WebGLRenderingContext.drawElements()

Effectue le rendu des primitives à partir des données d'élément.

WebGLRenderingContext.finish()

Bloque l'exécution jusqu'à ce que les commandes précédemment appelées soient terminées.

WebGLRenderingContext.flush()

Vide les différents tampons de commandes, entraînant l'exécution la plus rapide possible pour toutes les commandes.

Utiliser les extensions

Ces méthodes permettent de gérer les extensions WebGL :

WebGLRenderingContext.getSupportedExtensions()

Renvoie un tableau (Array) de chaînes de caractères (DOMString). Les éléments sont les noms des extensions WebGL prises en charge.

WebGLRenderingContext.getExtension()

Renvoie un objet d'extension.

Spécifications

Specification
WebGL Specification
# 5.14

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
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.

Voir aussi