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

TheWebGL2RenderingContext 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, callgetContext() 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. TheWebGL2RenderingContext interface implements all members of theWebGLRenderingContext 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.

TheWebGL tutorial has more information, examples, and resources on how to get started with WebGL.

Constants

See theWebGL constants page.

State information

WebGL2RenderingContext.getIndexedParameter(): Returns the indexed value for the giventarget.

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

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