WebGL2RenderingContext

Available in 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

• getIndexedParameter()
  • : Returns the indexed value for the given target.

Buffers

• bufferData()
  • : Initializes and creates the buffer object’s data store.
• bufferSubData()
  • : Updates a subset of a buffer object’s data store.
• copyBufferSubData()
  • : Copies part of the data of a buffer to another buffer.
• getBufferSubData()
  • : Reads data from a buffer and writes them to an ArrayBuffer or SharedArrayBuffer.

Framebuffers

• blitFramebuffer()
  • : Transfers a block of pixels from the read framebuffer to the draw framebuffer.
• framebufferTextureLayer()
  • : Attaches a single layer of a texture to a framebuffer.
• invalidateFramebuffer()
  • : Invalidates the contents of attachments in a framebuffer.
• invalidateSubFramebuffer()
  • : Invalidates portions of the contents of attachments in a framebuffer
• readBuffer()
  • : Selects a color buffer as the source for pixels.

Renderbuffers

• getInternalformatParameter()
  • : Returns information about implementation-dependent support for internal formats.
• renderbufferStorageMultisample()
  • : Creates and initializes a renderbuffer object’s data store and allows specifying the number of samples to be used.

Textures

• texStorage2D()
  • : Specifies all levels of two-dimensional texture storage.
• texStorage3D()
  • : Specifies all levels of a three-dimensional texture or two-dimensional array texture.
• texImage3D()
  • : Specifies a three-dimensional texture image.
• texSubImage3D()
  • : Specifies a sub-rectangle of the current 3D texture.
• copyTexSubImage3D()
  • : Copies pixels from the current WebGLFramebuffer into an existing 3D texture sub-image.
• compressedTexImage3D
  • : Specifies a three-dimensional texture image in a compressed format.
• compressedTexSubImage3D()
  • : Specifies a three-dimensional sub-rectangle for a texture image in a compressed format.

Programs and shaders

• 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.
• vertexAttribIPointer()
  • : Specifies integer data formats and locations of vertex attributes in a vertex attributes array.

Color spaces

• drawingBufferColorSpace
  • : Specifies the color space of the WebGL drawing buffer.
• unpackColorSpace
  • : Specifies the color space to convert to when importing textures.

Drawing buffers

• vertexAttribDivisor()
  • : Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawArraysInstanced() and gl.drawElementsInstanced().
• drawArraysInstanced()
  • : Renders primitives from array data. In addition, it can execute multiple instances of the range of elements.
• drawElementsInstanced()
  • : Renders primitives from array data. In addition, it can execute multiple instances of a set of elements.
• drawRangeElements()
  • : Renders primitives from array data in a given range.
• 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.

• createQuery()
  • : Creates a new WebGLQuery object.
• deleteQuery()
  • : Deletes a given WebGLQuery object.
• isQuery()
  • : Returns true if a given object is a valid WebGLQuery object.
• beginQuery()
  • : Begins an asynchronous query.
• endQuery()
  • : Marks the end of an asynchronous query.
• getQuery()
  • : Returns a WebGLQuery object for a given target.
• getQueryParameter()
  • : Returns information about a query.

Sampler objects

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

Sync objects

• fenceSync()
  • : Creates a new WebGLSync object and inserts it into the GL command stream.
• isSync()
  • : Returns true if the passed object is a valid WebGLSync object.
• deleteSync()
  • : Deletes a given WebGLSync object.
• clientWaitSync()
  • : Blocks and waits for a WebGLSync object to become signaled or a given timeout to be passed.
• waitSync()
  • : Returns immediately, but waits on the GL server until the given WebGLSync object is signaled.
• getSyncParameter()
  • : Returns parameter information of a WebGLSync object.

Transform feedback

• createTransformFeedback()
  • : Creates and initializes WebGLTransformFeedback objects.
• deleteTransformFeedback()
  • : Deletes a given WebGLTransformFeedback object.
• isTransformFeedback()
  • : Returns true if the passed object is a valid WebGLTransformFeedback object.
• bindTransformFeedback()
  • : Binds a passed WebGLTransformFeedback object to the current GL state.
• beginTransformFeedback()
  • : Starts a transform feedback operation.
• endTransformFeedback()
  • : Ends a transform feedback operation.
• transformFeedbackVaryings()
  • : Specifies values to record in WebGLTransformFeedback buffers.
• getTransformFeedbackVarying()
  • : Returns information about varying variables from WebGLTransformFeedback buffers.
• pauseTransformFeedback()
  • : Pauses a transform feedback operation.
• resumeTransformFeedback()
  • : Resumes a transform feedback operation.

Uniform buffer objects

• bindBufferBase()
  • : Binds a given WebGLBuffer to a given binding point (target) at a given index.
• bindBufferRange()
  • : Binds a range of a given WebGLBuffer to a given binding point (target) at a given index.
• getUniformIndices()
  • : Retrieves the indices of a number of uniforms within a WebGLProgram.
• getActiveUniforms()
  • : Retrieves information about active uniforms within a WebGLProgram.
• getUniformBlockIndex()
  • : Retrieves the index of a uniform block within a WebGLProgram.
• getActiveUniformBlockParameter()
  • : Retrieves information about an active uniform block within a WebGLProgram.
• getActiveUniformBlockName()
  • : Retrieves the name of the active uniform block at a given index within a WebGLProgram.
• uniformBlockBinding()
  • : Assigns binding points for active uniform blocks.

Vertex array objects

Methods for working with WebGLVertexArrayObject (VAO) objects.

• createVertexArray()
  • : Creates a new WebGLVertexArrayObject.
• deleteVertexArray()
  • : Deletes a given WebGLVertexArrayObject.
• isVertexArray()
  • : Returns true if a given object is a valid WebGLVertexArrayObject.
• bindVertexArray()
  • : Binds a given WebGLVertexArrayObject to the buffer.

Specifications

Browser compatibility

See also

• HTMLCanvasElement
• WebGLRenderingContext