This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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.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
orSharedArrayBuffer
.
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][fiu][v]()
- Methods specifying values of uniform variables.
WebGL2RenderingContext.uniformMatrix[1234][fv]()
- Methods specifying matrix values for uniform variables.
WebGL2RenderingContext.vertexAttribI[iuv]()
- 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()
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
WebGLQuery
object. WebGL2RenderingContext.deleteQuery()
- Deletes a given
WebGLQuery
object. WebGL2RenderingContext.isQuery()
- Returns
true
if a given object is a validWebGLQuery
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 validWebGLSampler
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 validWebGLSync
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 validWebGLTransformFeedback
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 givenindex
. WebGL2RenderingContext.bindBufferRange()
- Binds a range of a given
WebGLBuffer
to 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
true
if a given object is a validWebGLVertexArrayObject
. 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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support [2] | Nightly build [1] | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support |
[1] WebGL 2 is enabled by default in Firefox Nightly. To enable it in a release version of Firefox, set the preference webgl.enable-prototype-webgl2
to true
in about:config.
[2] To use an experimental implementation of WebGL 2 in Chrome, you have to start Chrome with the runtime flag --enable-unsafe-es3-apis
.