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.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

WebGL2RenderingContext 接口在底层使用了 OpenGL ES 3.0 为 HTML 的 <canvas> 元素提供了绘图上下文。

要获取该接口的实例对象需要调用一个 <canvas> 标签对象的 getContext() 函数,并将 "webgl2" 作为参数传递:

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

备注: WebGL 2 是 WebGL 1 的扩展。 WebGL2RenderingContext 接口实现了 WebGLRenderingContext 接口的所有成员。有一些 WebGL 1 上下文中的方法在使用 WebGL 2 上下文的时候可以接受附加值。你可以通过 WebGL 1 的参考页了解这些信息。

这个 WebGL 教程 中提供了关于如何开始使用 WebGL 的更多信息、示例以及资源。

常量

请看 WebGL 常量 页面。

状态信息

WebGL2RenderingContext.getIndexedParameter()

返回指定目标的索引值。

缓冲区

WebGL2RenderingContext.copyBufferSubData()

将缓冲区的部分数据复制到另一个缓冲区。

WebGL2RenderingContext.getBufferSubData()

从缓冲区中读取数据,然后将其写入到 ArrayBufferSharedArrayBuffer 中。

帧缓冲区

WebGL2RenderingContext.blitFramebuffer()

将一个像素块从读取帧缓冲区传输到绘制帧缓冲区。

WebGL2RenderingContext.framebufferTextureLayer()

附着一个单层的材质到帧缓冲区。

WebGL2RenderingContext.invalidateFramebuffer()

使附着到缓冲区的内容失效。

WebGL2RenderingContext.invalidateSubFramebuffer()

使附着到缓冲区的部分内容失效。

WebGL2RenderingContext.readBuffer()

选择一个颜色缓冲作为像素的 source。

渲染缓冲区

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.

纹理

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.

程序和着色器

WebGL2RenderingContext.getFragDataLocation()

Returns the binding of color numbers to user-defined varying out variables.

Uniforms 和 Attributes

WebGL2RenderingContext.uniform[1234][fiu][v]()

指定一个 uniform 变量。

WebGL2RenderingContext.uniformMatrix[1234][fv]()

指定一个 uniform 矩阵变量。

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.

绘图缓冲区

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.

查询对象

Methods for working with WebGLQuery objects.

WebGL2RenderingContext.createQuery()

创建一个新的 WebGLQuery 对象。

WebGL2RenderingContext.deleteQuery()

删除一个指定的 WebGLQuery 对象。

WebGL2RenderingContext.isQuery()

Returns true if a given object is a valid WebGLQuery object.

WebGL2RenderingContext.beginQuery()

开始一个异步查询。

WebGL2RenderingContext.endQuery()

Marks the end of an asynchronous query.

WebGL2RenderingContext.getQuery()

返回一个指定目标的 WebGLQuery 对象。

WebGL2RenderingContext.getQueryParameter()

返回关于一个查询的信息。

采样对象

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.

同步对象

WebGL2RenderingContext.fenceSync()

创建一个 WebGLSync 对象并插入到 GL 命令流中。

WebGL2RenderingContext.isSync()

Returns true if the passed object is a valid WebGLSync object.

WebGL2RenderingContext.deleteSync()

删除一个指定的 WebGLSync 对象。

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()

根据一个 WebGLSync 对象返回参数信息。

变换反馈

WebGL2RenderingContext.createTransformFeedback()

创建并初始化 WebGLTransformFeedback 对象。

WebGL2RenderingContext.deleteTransformFeedback()

删除一个指定的 WebGLTransformFeedback 对象。

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 缓冲对象

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.

顶点数组对象

Methods for working with WebGLVertexArrayObject (VAO) objects.

WebGL2RenderingContext.createVertexArray()

创建一个新的 WebGLVertexArrayObject

WebGL2RenderingContext.deleteVertexArray()

删除一个指定的 WebGLVertexArrayObject

WebGL2RenderingContext.isVertexArray()

如果一个指定的 WebGLVertexArrayObject 对象有效则返回 true

WebGL2RenderingContext.bindVertexArray()

绑定一个指定的 WebGLVertexArrayObject 到缓冲。

规范

Specification
WebGL 2.0 Specification
# 3.7

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WebGL2RenderingContext
activeTexture
attachShader
beginQuery
beginTransformFeedback
bindAttribLocation
bindBuffer
bindBufferBase
bindBufferRange
bindFramebuffer
bindRenderbuffer
bindSampler
bindTexture
bindTransformFeedback
bindVertexArray
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
blitFramebuffer
bufferData
srcData parameter accepts SharedArrayBuffer type
bufferSubData
srcData parameter accepts SharedArrayBuffer type
canvas
checkFramebufferStatus
clear
clearBufferfi
clearBufferfv
values parameter accepts SharedArrayBuffer type
clearBufferiv
values parameter accepts SharedArrayBuffer type
clearBufferuiv
values parameter accepts SharedArrayBuffer type
clearColor
clearDepth
clearStencil
clientWaitSync
colorMask
compileShader
compressedTexImage2D
pixels parameter accepts SharedArrayBuffer type
compressedTexImage3D
pixels parameter accepts SharedArrayBuffer type
compressedTexSubImage2D
srcData parameter accepts SharedArrayBuffer type
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
drawingBufferFormat
Experimental
drawingBufferHeight
drawingBufferStorage
Experimental
drawingBufferWidth
enable
enableVertexAttribArray
endQuery
endTransformFeedback
fenceSync
finish
flush
framebufferRenderbuffer
framebufferTexture2D
framebufferTextureLayer
frontFace
generateMipmap
getActiveAttrib
getActiveUniform
getActiveUniformBlockName
getActiveUniformBlockParameter
getActiveUniforms
getAttachedShaders
getAttribLocation
getBufferParameter
getBufferSubData
dstData parameter accepts SharedArrayBuffer type
getContextAttributes
getError
getExtension
getFragDataLocation
getFramebufferAttachmentParameter
getIndexedParameter
getInternalformatParameter
getParameter
getProgramInfoLog
getProgramParameter
getQuery
getQueryParameter
getRenderbufferParameter
getSamplerParameter
getShaderInfoLog
getShaderParameter
getShaderPrecisionFormat
getShaderSource
getSupportedExtensions
getSyncParameter
getTexParameter
getTransformFeedbackVarying
getUniform
getUniformBlockIndex
getUniformIndices
getUniformLocation
getVertexAttrib
getVertexAttribOffset
hint
invalidateFramebuffer
invalidateSubFramebuffer
isBuffer
isContextLost
isEnabled
isFramebuffer
isProgram
isQuery
isRenderbuffer
isSampler
isShader
isSync
isTexture
isTransformFeedback
isVertexArray
lineWidth
linkProgram
makeXRCompatible
pauseTransformFeedback
pixelStorei
polygonOffset
readBuffer
readPixels
pixels parameter accepts SharedArrayBuffer type
renderbufferStorage
renderbufferStorageMultisample
resumeTransformFeedback
sampleCoverage
samplerParameterf
samplerParameteri
scissor
shaderSource
stencilFunc
stencilFuncSeparate
stencilMask
stencilMaskSeparate
stencilOp
stencilOpSeparate
texImage2D
texImage3D
srcData parameter accepts SharedArrayBuffer type
texParameterf
texParameteri
texStorage2D
texStorage3D
texSubImage2D
texSubImage3D
srcData parameter accepts SharedArrayBuffer type
transformFeedbackVaryings
uniform1f
uniform1fv
uniform1i
uniform1iv
uniform1ui
uniform1uiv
uniform2f
uniform2fv
uniform2i
uniform2iv
uniform2ui
uniform2uiv
uniform3f
uniform3fv
uniform3i
uniform3iv
uniform3ui
uniform3uiv
uniform4f
uniform4fv
uniform4i
uniform4iv
uniform4ui
uniform4uiv
uniformBlockBinding
uniformMatrix2fv
value parameter accepts SharedArrayBuffer type
uniformMatrix2x3fv
data parameter accepts SharedArrayBuffer type
uniformMatrix2x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3fv
value parameter accepts SharedArrayBuffer type
uniformMatrix3x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix3x4fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4fv
value parameter accepts SharedArrayBuffer type
uniformMatrix4x2fv
data parameter accepts SharedArrayBuffer type
uniformMatrix4x3fv
data parameter accepts SharedArrayBuffer type
unpackColorSpace
useProgram
validateProgram
vertexAttrib1f
vertexAttrib1fv
value parameter accepts SharedArrayBuffer type
vertexAttrib2f
vertexAttrib2fv
value parameter accepts SharedArrayBuffer type
vertexAttrib3f
vertexAttrib3fv
value parameter accepts SharedArrayBuffer type
vertexAttrib4f
vertexAttrib4fv
value parameter accepts SharedArrayBuffer type
vertexAttribDivisor
vertexAttribI4i
vertexAttribI4iv
value parameter accepts SharedArrayBuffer type
vertexAttribI4ui
vertexAttribI4uiv
value parameter accepts SharedArrayBuffer type
vertexAttribIPointer
vertexAttribPointer
viewport
waitSync

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.

相关链接