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.
Note: This feature is available in Web Workers.
The WebGL2RenderingContext interface provides the OpenGL ES 3.0 rendering context for the drawing surface of an HTML <canvas> element.
To get an object of this interface, call getContext() on a <canvas> element, supplying "webgl2" as the argument:
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl2");
Note:
WebGL 2 is an extension to WebGL 1. The WebGL2RenderingContext interface implements all members of the WebGLRenderingContext interface. Some methods of the WebGL 1 context can accept additional values when used in a WebGL 2 context. You will find this info noted on the WebGL 1 reference pages.
The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.
Constants
See the WebGL constants page.
State information
WebGL2RenderingContext.getIndexedParameter()-
Returns the indexed value for the given
target.
Buffers
WebGL2RenderingContext.bufferData()-
Initializes and creates the buffer object's data store.
WebGL2RenderingContext.bufferSubData()-
Updates a subset of a buffer object's data store.
WebGL2RenderingContext.copyBufferSubData()-
Copies part of the data of a buffer to another buffer.
WebGL2RenderingContext.getBufferSubData()-
Reads data from a buffer and writes them to an
ArrayBufferorSharedArrayBuffer.
Framebuffers
WebGL2RenderingContext.blitFramebuffer()-
Transfers a block of pixels from the read framebuffer to the draw framebuffer.
WebGL2RenderingContext.framebufferTextureLayer()-
Attaches a single layer of a texture to a framebuffer.
WebGL2RenderingContext.invalidateFramebuffer()-
Invalidates the contents of attachments in a framebuffer.
WebGL2RenderingContext.invalidateSubFramebuffer()-
Invalidates portions of the contents of attachments in a framebuffer
WebGL2RenderingContext.readBuffer()-
Selects a color buffer as the source for pixels.
Renderbuffers
WebGL2RenderingContext.getInternalformatParameter()-
Returns information about implementation-dependent support for internal formats.
WebGL2RenderingContext.renderbufferStorageMultisample()-
Creates and initializes a renderbuffer object's data store and allows specifying the number of samples to be used.
Textures
WebGL2RenderingContext.texStorage2D()-
Specifies all levels of two-dimensional texture storage.
WebGL2RenderingContext.texStorage3D()-
Specifies all levels of a three-dimensional texture or two-dimensional array texture.
WebGL2RenderingContext.texImage3D()-
Specifies a three-dimensional texture image.
WebGL2RenderingContext.texSubImage3D()-
Specifies a sub-rectangle of the current 3D texture.
WebGL2RenderingContext.copyTexSubImage3D()-
Copies pixels from the current
WebGLFramebufferinto an existing 3D texture sub-image. WebGL2RenderingContext.compressedTexImage3D-
Specifies a three-dimensional texture image in a compressed format.
WebGL2RenderingContext.compressedTexSubImage3D()-
Specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
Programs and shaders
WebGL2RenderingContext.getFragDataLocation()-
Returns the binding of color numbers to user-defined varying out variables.
Uniforms and attributes
WebGL2RenderingContext.uniform[1234][uif][v]()-
Methods specifying values of uniform variables.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv()-
Methods specifying matrix values for uniform variables.
WebGL2RenderingContext.vertexAttribI4[u]i[v]()-
Methods specifying integer values for generic vertex attributes.
WebGL2RenderingContext.vertexAttribIPointer()-
Specifies integer data formats and locations of vertex attributes in a vertex attributes array.
Color spaces
WebGL2RenderingContext.drawingBufferColorSpace-
Specifies the color space of the WebGL drawing buffer.
WebGL2RenderingContext.unpackColorSpace-
Specifies the color space to convert to when importing textures.
Drawing buffers
WebGL2RenderingContext.vertexAttribDivisor()-
Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with
gl.drawArraysInstanced()andgl.drawElementsInstanced(). WebGL2RenderingContext.drawArraysInstanced()-
Renders primitives from array data. In addition, it can execute multiple instances of the range of elements.
WebGL2RenderingContext.drawElementsInstanced()-
Renders primitives from array data. In addition, it can execute multiple instances of a set of elements.
WebGL2RenderingContext.drawRangeElements()-
Renders primitives from array data in a given range.
WebGL2RenderingContext.drawBuffers()-
Specifies a list of color buffers to be drawn into.
WebGL2RenderingContext.clearBuffer[fiuv]()-
Clears buffers from the currently bound framebuffer.
Query objects
Methods for working with WebGLQuery objects.
WebGL2RenderingContext.createQuery()-
Creates a new
WebGLQueryobject. WebGL2RenderingContext.deleteQuery()-
Deletes a given
WebGLQueryobject. WebGL2RenderingContext.isQuery()-
Returns
trueif a given object is a validWebGLQueryobject. WebGL2RenderingContext.beginQuery()-
Begins an asynchronous query.
WebGL2RenderingContext.endQuery()-
Marks the end of an asynchronous query.
WebGL2RenderingContext.getQuery()-
Returns a
WebGLQueryobject for a given target. WebGL2RenderingContext.getQueryParameter()-
Returns information about a query.
Sampler objects
WebGL2RenderingContext.createSampler()-
Creates a new
WebGLSamplerobject. WebGL2RenderingContext.deleteSampler()-
Deletes a given
WebGLSamplerobject. WebGL2RenderingContext.bindSampler()-
Binds a given
WebGLSamplerto a texture unit. WebGL2RenderingContext.isSampler()-
Returns
trueif a given object is a validWebGLSamplerobject. WebGL2RenderingContext.samplerParameter[if]()-
Sets sampler parameters.
WebGL2RenderingContext.getSamplerParameter()-
Returns sampler parameter information.
Sync objects
WebGL2RenderingContext.fenceSync()-
Creates a new
WebGLSyncobject and inserts it into the GL command stream. WebGL2RenderingContext.isSync()-
Returns
trueif the passed object is a validWebGLSyncobject. WebGL2RenderingContext.deleteSync()-
Deletes a given
WebGLSyncobject. WebGL2RenderingContext.clientWaitSync()-
Blocks and waits for a
WebGLSyncobject to become signaled or a given timeout to be passed. WebGL2RenderingContext.waitSync()-
Returns immediately, but waits on the GL server until the given
WebGLSyncobject is signaled. WebGL2RenderingContext.getSyncParameter()-
Returns parameter information of a
WebGLSyncobject.
Transform feedback
WebGL2RenderingContext.createTransformFeedback()-
Creates and initializes
WebGLTransformFeedbackobjects. WebGL2RenderingContext.deleteTransformFeedback()-
Deletes a given
WebGLTransformFeedbackobject. WebGL2RenderingContext.isTransformFeedback()-
Returns
trueif the passed object is a validWebGLTransformFeedbackobject. WebGL2RenderingContext.bindTransformFeedback()-
Binds a passed
WebGLTransformFeedbackobject to the current GL state. WebGL2RenderingContext.beginTransformFeedback()-
Starts a transform feedback operation.
WebGL2RenderingContext.endTransformFeedback()-
Ends a transform feedback operation.
WebGL2RenderingContext.transformFeedbackVaryings()-
Specifies values to record in
WebGLTransformFeedbackbuffers. WebGL2RenderingContext.getTransformFeedbackVarying()-
Returns information about varying variables from
WebGLTransformFeedbackbuffers. WebGL2RenderingContext.pauseTransformFeedback()-
Pauses a transform feedback operation.
WebGL2RenderingContext.resumeTransformFeedback()-
Resumes a transform feedback operation.
Uniform buffer objects
WebGL2RenderingContext.bindBufferBase()-
Binds a given
WebGLBufferto a given binding point (target) at a givenindex. WebGL2RenderingContext.bindBufferRange()-
Binds a range of a given
WebGLBufferto a given binding point (target) at a givenindex. WebGL2RenderingContext.getUniformIndices()-
Retrieves the indices of a number of uniforms within a
WebGLProgram. WebGL2RenderingContext.getActiveUniforms()-
Retrieves information about active uniforms within a
WebGLProgram. WebGL2RenderingContext.getUniformBlockIndex()-
Retrieves the index of a uniform block within a
WebGLProgram. WebGL2RenderingContext.getActiveUniformBlockParameter()-
Retrieves information about an active uniform block within a
WebGLProgram. WebGL2RenderingContext.getActiveUniformBlockName()-
Retrieves the name of the active uniform block at a given index within a
WebGLProgram. WebGL2RenderingContext.uniformBlockBinding()-
Assigns binding points for active uniform blocks.
Vertex array objects
Methods for working with WebGLVertexArrayObject (VAO) objects.
WebGL2RenderingContext.createVertexArray()-
Creates a new
WebGLVertexArrayObject. WebGL2RenderingContext.deleteVertexArray()-
Deletes a given
WebGLVertexArrayObject. WebGL2RenderingContext.isVertexArray()-
Returns
trueif a given object is a validWebGLVertexArrayObject. WebGL2RenderingContext.bindVertexArray()-
Binds a given
WebGLVertexArrayObjectto the buffer.
Specifications
| Specification |
|---|
| WebGL 2.0 Specification # 3.7 |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WebGL2RenderingContext
|
|
|
|
|
|
|
|
|
|
|
|
|
activeTexture
|
|
|
|
|
|
|
|
|
|
|
|
|
attachShader
|
|
|
|
|
|
|
|
|
|
|
|
|
beginQuery
|
|
|
|
|
|
|
|
|
|
|
|
|
beginTransformFeedback
|
|
|
|
|
|
|
|
|
|
|
|
|
bindAttribLocation
|
|
|
|
|
|
|
|
|
|
|
|
|
bindBuffer
|
|
|
|
|
|
|
|
|
|
|
|
|
bindBufferBase
|
|
|
|
|
|
|
|
|
|
|
|
|
bindBufferRange
|
|
|
|
|
|
|
|
|
|
|
|
|
bindFramebuffer
|
|
|
|
|
|
|
|
|
|
|
|
|
bindRenderbuffer
|
|
|
|
|
|
|
|
|
|
|
|
|
bindSampler
|
|
|
|
|
|
|
|
|
|
|
|
|
bindTexture
|
|
|
|
|
|
|
|
|
|
|
|
|
bindTransformFeedback
|
|
|
|
|
|
|
|
|
|
|
|
|
bindVertexArray
|
|
|
|
|
|
|
|
|
|
|
|
|
blendColor
|
|
|
|
|
|
|
|
|
|
|
|
|
blendEquation
|
|
|
|
|
|
|
|
|
|
|
|
|
blendEquationSeparate
|
|
|
|
|
|
|
|
|
|
|
|
|
blendFunc
|
|
|
|
|
|
|
|
|
|
|
|
|
blendFuncSeparate
|
|
|
|
|
|
|
|
|
|
|
|
|
blitFramebuffer
|
|
|
|
|
|
|
|
|
|
|
|
|
bufferData
|
|
|
|
|
|
|
|
|
|
|
|
|
bufferSubData
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas
|
|
|
|
|
|
|
|
|
|
|
|
|
checkFramebufferStatus
|
|
|
|
|
|
|
|
|
|
|
|
|
clear
|
|
|
|
|
|
|
|
|
|
|
|
|
clearBufferfi
|
|
|
|
|
|
|
|
|
|
|
|
|
clearBufferfv
|
|
|
|
|
|
|
|
|
|
|
|
|
clearBufferiv
|
|
|
|
|
|
|
|
|
|
|
|
|
clearBufferuiv
|
|
|
|
|
|
|
|
|
|
|
|
|
clearColor
|
|
|
|
|
|
|
|
|
|
|
|
|
clearDepth
|
|
|
|
|
|
|
|
|
|
|
|
|
clearStencil
|
|
|
|
|
|
|
|
|
|
|
|
|
clientWaitSync
|
|
|
|
|
|
|
|
|
|
|
|
|
colorMask
|
|
|
|
|
|
|
|
|
|
|
|
|
compileShader
|
|
|
|
|
|
|
|
|
|
|
|
|
compressedTexImage2D
|
|
|
|
|
|
|
|
|
|
|
|
|
compressedTexImage3D
|
|
|
|
|
|
|
|
|
|
|
|
|
compressedTexSubImage2D
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
drawingBufferHeight
|
|
|
|
|
|
|
|
|
|
|
|
|
drawingBufferWidth
|
|
|
|
|
|
|
|
|
|
|
|
|
enable
|
|
|
|
|
|
|
|
|
|
|
|
|
enableVertexAttribArray
|
|
|
|
|
|
|
|
|
|
|
|
|
endQuery
|
|
|
|
|
|
|
|
|
|
|
|
|
endTransformFeedback
|
|
|
|
|
|
|
|
|
|
|
|
|
fenceSync
|
|
|
|
|
|
|
|
|
|
|
|
|
finish
|
|
|
|
|
|
|
|
|
|
|
|
|
flush
|
|
|
|
|
|
|
|
|
|
|
|
|
framebufferRenderbuffer
|
|
|
|
|
|
|
|
|
|
|
|
|
framebufferTexture2D
|
|
|
|
|
|
|
|
|
|
|
|
|
framebufferTextureLayer
|
|
|
|
|
|
|
|
|
|
|
|
|
frontFace
|
|
|
|
|
|
|
|
|
|
|
|
|
generateMipmap
|
|
|
|
|
|
|
|
|
|
|
|
|
getActiveAttrib
|
|
|
|
|
|
|
|
|
|
|
|
|
getActiveUniform
|
|
|
|
|
|
|
|
|
|
|
|
|
getActiveUniformBlockName
|
|
|
|
|
|
|
|
|
|
|
|
|
getActiveUniformBlockParameter
|
|
|
|
|
|
|
|
|
|
|
|
|
getActiveUniforms
|
|
|
|
|
|
|
|
|
|
|
|
|
getAttachedShaders
|
|
|
|
|
|
|
|
|
|
|
|
|
getAttribLocation
|
|
|
|
|
|
|
|
|
|
|
|
|
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.