WebGL2RenderingContext

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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:

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl2');

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 ArrayBuffer or SharedArrayBuffer.

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

Drawing buffers

WebGL2RenderingContext.vertexAttribDivisor()
Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawArraysInstanced() and gl.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 WebGLQuery object.
WebGL2RenderingContext.deleteQuery()
Deletes a given WebGLQuery object.
WebGL2RenderingContext.isQuery()
Returns true if a given object is a valid WebGLQuery object.
WebGL2RenderingContext.beginQuery()
Begins an asynchronous query.
WebGL2RenderingContext.endQuery()
Marks the end of an asynchronous query.
WebGL2RenderingContext.getQuery()
Returns a WebGLQuery object for a given target.
WebGL2RenderingContext.getQueryParameter()
Returns information about a query.

Sampler objects

WebGL2RenderingContext.createSampler()
Creates a new WebGLSampler object.
WebGL2RenderingContext.deleteSampler()
Deletes a given WebGLSampler object.
WebGL2RenderingContext.bindSampler()
Binds a given WebGLSampler to a texture unit.
WebGL2RenderingContext.isSampler()
Returns true if a given object is a valid WebGLSampler object.
WebGL2RenderingContext.samplerParameter[if]()
Sets sampler parameters.
WebGL2RenderingContext.getSamplerParameter()
Returns sampler parameter information.

Sync objects

WebGL2RenderingContext.fenceSync()
Creates a new WebGLSync object and inserts it into the GL command stream.
WebGL2RenderingContext.isSync()
Returns true if the passed object is a valid WebGLSync object.
WebGL2RenderingContext.deleteSync()
Deletes a given WebGLSync object.
WebGL2RenderingContext.clientWaitSync()

Blocks and waits for a WebGLSync object to become signaled or a given timeout to be passed.

WebGL2RenderingContext.waitSync()
Returns immediately, but waits on the GL server until the given WebGLSync object is signaled.
WebGL2RenderingContext.getSyncParameter()
Returns parameter information of a WebGLSync object.

Transform feedback

WebGL2RenderingContext.createTransformFeedback()
Creates and initializes WebGLTransformFeedback objects.
WebGL2RenderingContext.deleteTransformFeedback()
Deletes a given WebGLTransformFeedback object.
WebGL2RenderingContext.isTransformFeedback()
Returns true if the passed object is a valid WebGLTransformFeedback object.
WebGL2RenderingContext.bindTransformFeedback()
Binds a passed WebGLTransformFeedback object 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 WebGLTransformFeedback buffers.
WebGL2RenderingContext.getTransformFeedbackVarying()
Returns information about varying variables from WebGLTransformFeedback buffers.
WebGL2RenderingContext.pauseTransformFeedback()
Pauses a transform feedback operation.
WebGL2RenderingContext.resumeTransformFeedback()
Resumes a transform feedback operation.

Uniform buffer objects

WebGL2RenderingContext.bindBufferBase()
Binds a given WebGLBuffer to a given binding point (target) at a given index.
WebGL2RenderingContext.bindBufferRange()
Binds a range of a given WebGLBuffer to a given binding point (target) at a given index.
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 true if a given object is a valid WebGLVertexArrayObject.
WebGL2RenderingContext.bindVertexArray()
Binds a given WebGLVertexArrayObject to the buffer.

Specifications

Specification Status Comment
WebGL 2.0
The definition of 'WebGL2RenderingContext' in that specification.
Editor's Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support56 No51 No43 No
beginQuery56 No51 No43 No
beginTransformFeedback56 No51 No43 No
bindBufferBase56 No51 No43 No
bindBufferRange56 No51 No43 No
bindSampler56 No51 No43 No
bindTransformFeedback56 No51 No43 No
bindVertexArray56 No51 No43 No
blitFramebuffer56 No51 No43 No
bufferSubData Yes No51 No Yes No
clearBufferfi56 No51 No43 No
clearBufferfv56 No51 No43 No
clearBufferiv56 No51 No43 No
clearBufferuiv56 No51 No43 No
clientWaitSync56 No51 No43 No
compressedTexImage3D56 No51 No43 No
compressedTexSubImage3D56 No51 No43 No
copyBufferSubData56 No51 No43 No
copyTexSubImage3D56 No51 No43 No
createQuery56 No51 No43 No
createSampler56 No51 No43 No
createTransformFeedback56 No51 No43 No
createVertexArray56 No51 No43 No
deleteQuery56 No51 No43 No
deleteSampler56 No51 No43 No
deleteSync56 No51 No43 No
deleteTransformFeedback56 No51 No43 No
deleteVertexArray56 No51 No43 No
drawArraysInstanced56 No51 No43 No
drawBuffers56 No51 No43 No
drawElementsInstanced56 No51 No43 No
drawRangeElements56 No51 No43 No
endQuery56 No51 No43 No
endTransformFeedback56 No51 No43 No
fenceSync56 No51 No43 No
framebufferTextureLayer56 No51 No43 No
getActiveUniformBlockName56 No51 No43 No
getActiveUniformBlockParameter56 No51 No43 No
getActiveUniforms56 No51 No43 No
getBufferSubData56 No51 No Yes No
getFragDataLocation56 No51 No43 No
getInternalformatParameter56 No51 No43 No
getQuery56 No51 No43 No
getQueryParameter56 No51 No43 No
getSamplerParameter56 No51 No43 No
getSyncParameter56 No51 No43 No
getTransformFeedbackVarying56 No51 No43 No
getUniformBlockIndex56 No51 No43 No
getUniformIndices56 No51 No43 No
getIndexedParameter56 No51 No43 No
invalidateFramebuffer56 No51 No43 No
invalidateSubFramebuffer56 No51 No43 No
isQuery56 No51 No43 No
isSampler56 No51 No43 No
isSync56 No51 No43 No
isTransformFeedback56 No51 No43 No
isVertexArray56 No51 No43 No
pauseTransformFeedback56 No51 No43 No
readBuffer56 No51 No43 No
renderbufferStorageMultisample56 No51 No43 No
resumeTransformFeedback56 No51 No43 No
samplerParameteri56 No51 No43 No
samplerParameterf56 No51 No43 No
texImage3D56 No51 No43 No
texStorage2D56 No51 No43 No
texStorage3D56 No51 No43 No
texSubImage3D56 No51 No43 No
transformFeedbackVaryings56 No51 No43 No
uniform1uiv56 No51 No43 No
uniform1ui56 No51 No43 No
uniform1i56 No51 No43 No
uniform1f56 No51 No43 No
uniform2uiv56 No51 No43 No
uniform2ui56 No51 No43 No
uniform2i56 No51 No43 No
uniform2f56 No51 No43 No
uniform3uiv56 No51 No43 No
uniform3ui56 No51 No43 No
uniform3i56 No51 No43 No
uniform3f56 No51 No43 No
uniform4uiv56 No51 No43 No
uniform4ui56 No51 No43 No
uniform4i56 No51 No43 No
uniform4f56 No51 No43 No
uniformBlockBinding56 No51 No43 No
uniformMatrix2fv56 No51 No43 No
uniformMatrix2x3fv56 No51 No43 No
uniformMatrix2x4fv56 No51 No43 No
uniformMatrix3fv56 No51 No43 No
uniformMatrix3x2fv56 No51 No43 No
uniformMatrix3x4fv56 No51 No43 No
uniformMatrix4fv56 No51 No43 No
uniformMatrix4x2fv56 No51 No43 No
uniformMatrix4x3fv56 No51 No43 No
vertexAttribDivisor56 No51 No43 No
vertexAttribI4i56 No51 No43 No
vertexAttribI4iv56 No51 No43 No
vertexAttribI4ui56 No51 No43 No
vertexAttribI4uiv56 No51 No43 No
vertexAttribIPointer56 No51 No43 No
waitSync56 No51 No43 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5858 No5143 No7.0
beginQuery5858 No5143 No7.0
beginTransformFeedback5858 No5143 No7.0
bindBufferBase5858 No5143 No7.0
bindBufferRange5858 No5143 No7.0
bindSampler5858 No5143 No7.0
bindTransformFeedback5858 No5143 No7.0
bindVertexArray5858 No5143 No7.0
blitFramebuffer5858 No5143 No7.0
bufferSubData Yes Yes No51 Yes No Yes
clearBufferfi5858 No5143 No7.0
clearBufferfv5858 No5143 No7.0
clearBufferiv5858 No5143 No7.0
clearBufferuiv5858 No5143 No7.0
clientWaitSync5858 No5143 No7.0
compressedTexImage3D5858 No5143 No7.0
compressedTexSubImage3D5858 No5143 No7.0
copyBufferSubData5858 No5143 No7.0
copyTexSubImage3D5858 No5143 No7.0
createQuery5858 No5143 No7.0
createSampler5858 No5143 No7.0
createTransformFeedback5858 No5143 No7.0
createVertexArray5858 No5143 No7.0
deleteQuery5858 No5143 No7.0
deleteSampler5858 No5143 No7.0
deleteSync5858 No5143 No7.0
deleteTransformFeedback5858 No5143 No7.0
deleteVertexArray5858 No5143 No7.0
drawArraysInstanced5858 No5143 No7.0
drawBuffers5858 No5143 No7.0
drawElementsInstanced5858 No5143 No7.0
drawRangeElements5858 No5143 No7.0
endQuery5858 No5143 No7.0
endTransformFeedback5858 No5143 No7.0
fenceSync5858 No5143 No7.0
framebufferTextureLayer5858 No5143 No7.0
getActiveUniformBlockName5858 No5143 No7.0
getActiveUniformBlockParameter5858 No5143 No7.0
getActiveUniforms5858 No5143 No7.0
getBufferSubData5858 No51 Yes No7.0
getFragDataLocation5858 No5143 No7.0
getInternalformatParameter5858 No5143 No7.0
getQuery5858 No5143 No7.0
getQueryParameter5858 No5143 No7.0
getSamplerParameter5858 No5143 No7.0
getSyncParameter5858 No5143 No7.0
getTransformFeedbackVarying5858 No5143 No7.0
getUniformBlockIndex5858 No5143 No7.0
getUniformIndices5858 No5143 No7.0
getIndexedParameter5858 No5143 No7.0
invalidateFramebuffer5858 No5143 No7.0
invalidateSubFramebuffer5858 No5143 No7.0
isQuery5858 No5143 No7.0
isSampler5858 No5143 No7.0
isSync5858 No5143 No7.0
isTransformFeedback5858 No5143 No7.0
isVertexArray5858 No5143 No7.0
pauseTransformFeedback5858 No5143 No7.0
readBuffer5858 No5143 No7.0
renderbufferStorageMultisample5858 No5143 No7.0
resumeTransformFeedback5858 No5143 No7.0
samplerParameteri5858 No5143 No7.0
samplerParameterf5858 No5143 No7.0
texImage3D5858 No5143 No7.0
texStorage2D5858 No5143 No7.0
texStorage3D5858 No5143 No7.0
texSubImage3D5858 No5143 No7.0
transformFeedbackVaryings5858 No5143 No7.0
uniform1uiv5858 No5143 No7.0
uniform1ui5858 No5143 No7.0
uniform1i5858 No5143 No7.0
uniform1f5858 No5143 No7.0
uniform2uiv5858 No5143 No7.0
uniform2ui5858 No5143 No7.0
uniform2i5858 No5143 No7.0
uniform2f5858 No5143 No7.0
uniform3uiv5858 No5143 No7.0
uniform3ui5858 No5143 No7.0
uniform3i5858 No5143 No7.0
uniform3f5858 No5143 No7.0
uniform4uiv5858 No5143 No7.0
uniform4ui5858 No5143 No7.0
uniform4i5858 No5143 No7.0
uniform4f5858 No5143 No7.0
uniformBlockBinding5858 No5143 No7.0
uniformMatrix2fv5858 No5143 No7.0
uniformMatrix2x3fv5858 No5143 No7.0
uniformMatrix2x4fv5858 No5143 No7.0
uniformMatrix3fv5858 No5143 No7.0
uniformMatrix3x2fv5858 No5143 No7.0
uniformMatrix3x4fv5858 No5143 No7.0
uniformMatrix4fv5858 No5143 No7.0
uniformMatrix4x2fv5858 No5143 No7.0
uniformMatrix4x3fv5858 No5143 No7.0
vertexAttribDivisor5858 No5143 No7.0
vertexAttribI4i5858 No5143 No7.0
vertexAttribI4iv5858 No5143 No7.0
vertexAttribI4ui5858 No5143 No7.0
vertexAttribI4uiv5858 No5143 No7.0
vertexAttribIPointer5858 No5143 No7.0
waitSync5858 No5143 No7.0

See also

Document Tags and Contributors

 Contributors to this page: fscholz, jpmedley, teoli
 Last updated by: fscholz,