WebGL2RenderingContext

Baseline 广泛可用 *

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2021 年 9 月起，所有浏览器均已支持此功能。

* 此特性的某些部分可能存在不同级别的支持。

注意：此功能在 Web Workers 中可用。

WebGL2RenderingContext 接口为 HTML <canvas> 元素的绘图表面提供了 OpenGL ES 3.0 渲染上下文。

要获取此接口的对象，请在 <canvas> 元素上调用 getContext()，并将 "webgl2" 作为参数。

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

注意： WebGL 2 是 WebGL 1 的扩展。WebGL2RenderingContext 接口实现了 WebGLRenderingContext 接口的所有成员。在 WebGL 2 上下文中，WebGL 1 上下文的一些方法可以接受附加值。您会在 WebGL 1 参考页面上找到这些信息。

有关如何开始使用 WebGL 的更多信息、示例和资源，请参阅 WebGL 教程。

常量

请参阅 WebGL 常量页面。

状态信息

WebGL2RenderingContext.getIndexedParameter(): 返回给定 target 的索引值。

缓冲区

WebGL2RenderingContext.bufferData(): 初始化并创建缓冲对象的数据存储。
WebGL2RenderingContext.bufferSubData(): 更新缓冲对象数据存储的子集。
WebGL2RenderingContext.copyBufferSubData(): 将一个缓冲的部分数据复制到另一个缓冲。
WebGL2RenderingContext.getBufferSubData(): 从缓冲读取数据并将其写入 ArrayBuffer 或 SharedArrayBuffer。

帧缓冲

WebGL2RenderingContext.blitFramebuffer(): 将像素块从读取帧缓冲传输到绘制帧缓冲。
WebGL2RenderingContext.framebufferTextureLayer(): 将纹理的单个图层附加到帧缓冲。
WebGL2RenderingContext.invalidateFramebuffer(): 使帧缓冲中的附件内容无效。
WebGL2RenderingContext.invalidateSubFramebuffer(): 使帧缓冲附件的部分内容无效。
WebGL2RenderingContext.readBuffer(): 选择一个颜色缓冲作为像素源。

渲染缓冲

WebGL2RenderingContext.getInternalformatParameter(): 返回关于内部格式的实现相关支持的信息。
WebGL2RenderingContext.renderbufferStorageMultisample(): 创建并初始化渲染缓冲对象的数据存储，并允许指定使用的样本数。

纹理

WebGL2RenderingContext.texStorage2D(): 指定二维纹理存储的所有层级。
WebGL2RenderingContext.texStorage3D(): 指定三维纹理或二维数组纹理的所有层级。
WebGL2RenderingContext.texImage3D(): 指定三维纹理图像。
WebGL2RenderingContext.texSubImage3D(): 指定当前 3D 纹理的子矩形。
WebGL2RenderingContext.copyTexSubImage3D(): 将当前 WebGLFramebuffer 的像素复制到一个现有的 3D 纹理子图像中。
WebGL2RenderingContext.compressedTexImage3D: 以压缩格式指定三维纹理图像。
WebGL2RenderingContext.compressedTexSubImage3D(): 以压缩格式指定纹理图像的三维子矩形。

程序和着色器

WebGL2RenderingContext.getFragDataLocation(): 返回颜色编号与用户定义的 varying 输出变量的绑定。

统一变量和属性

WebGL2RenderingContext.uniform[1234][uif][v](): 指定统一变量值的函数。
WebGL2RenderingContext.uniformMatrix[234]x[234]fv(): 指定统一变量的矩阵值的函数。
WebGL2RenderingContext.vertexAttribI4[u]i[v](): 指定通用顶点属性的整数值的函数。
WebGL2RenderingContext.vertexAttribIPointer(): 指定顶点属性数组中整数数据格式和位置。

颜色空间

WebGL2RenderingContext.drawingBufferColorSpace: 指定 WebGL 绘制缓冲的颜色空间。
WebGL2RenderingContext.unpackColorSpace: 指定导入纹理时要转换到的颜色空间。

绘制缓冲

WebGL2RenderingContext.vertexAttribDivisor(): 修改使用 gl.drawArraysInstanced() 和 gl.drawElementsInstanced() 渲染多个图元实例时通用顶点属性前进的速率。
WebGL2RenderingContext.drawArraysInstanced(): 从数组数据渲染图元。此外，它还可以执行指定范围元素的多个实例。
WebGL2RenderingContext.drawElementsInstanced(): 从数组数据渲染图元。此外，它还可以执行指定元素集合的多个实例。
WebGL2RenderingContext.drawRangeElements(): 在给定范围内从数组数据渲染图元。
WebGL2RenderingContext.drawBuffers(): 指定要绘制到的颜色缓冲列表。
WebGL2RenderingContext.clearBuffer[fiuv](): 清除当前绑定帧缓冲中的缓冲。

查询对象

处理 WebGLQuery 对象的函数。

WebGL2RenderingContext.createQuery(): 创建一个新的 WebGLQuery 对象。
WebGL2RenderingContext.deleteQuery(): 删除给定的 WebGLQuery 对象。
WebGL2RenderingContext.isQuery(): 如果给定的对象是有效的 WebGLQuery 对象，则返回 true。
WebGL2RenderingContext.beginQuery(): 开始一个异步查询。
WebGL2RenderingContext.endQuery(): 标记异步查询的结束。
WebGL2RenderingContext.getQuery(): 返回给定目标的 WebGLQuery 对象。
WebGL2RenderingContext.getQueryParameter(): 返回关于查询的信息。

采样器对象

WebGL2RenderingContext.createSampler(): 创建一个新的 WebGLSampler 对象。
WebGL2RenderingContext.deleteSampler(): 删除给定的 WebGLSampler 对象。
WebGL2RenderingContext.bindSampler(): 将给定的 WebGLSampler 绑定到纹理单元。
WebGL2RenderingContext.isSampler(): 如果给定的对象是有效的 WebGLSampler 对象，则返回 true。
WebGL2RenderingContext.samplerParameter[if](): 设置采样器参数。
WebGL2RenderingContext.getSamplerParameter(): 返回采样器参数信息。

同步对象

WebGL2RenderingContext.fenceSync(): 创建一个新的 WebGLSync 对象，并将其插入 GL 命令流。
WebGL2RenderingContext.isSync(): 如果传入的对象是有效的 WebGLSync 对象，则返回 true。
WebGL2RenderingContext.deleteSync(): 删除给定的 WebGLSync 对象。
WebGL2RenderingContext.clientWaitSync(): 阻塞并等待 WebGLSync 对象被触发或达到给定的超时时间。
WebGL2RenderingContext.waitSync(): 立即返回，但在 GL 服务器端等待，直到给定的 WebGLSync 对象被触发。
WebGL2RenderingContext.getSyncParameter(): 返回 WebGLSync 对象的参数信息。

变换反馈

WebGL2RenderingContext.createTransformFeedback(): 创建并初始化 WebGLTransformFeedback 对象。
WebGL2RenderingContext.deleteTransformFeedback(): 删除给定的 WebGLTransformFeedback 对象。
WebGL2RenderingContext.isTransformFeedback(): 如果传入的对象是有效的 WebGLTransformFeedback 对象，则返回 true。
WebGL2RenderingContext.bindTransformFeedback(): 将给定的 WebGLTransformFeedback 对象绑定到当前的 GL 状态。
WebGL2RenderingContext.beginTransformFeedback(): 开始一个变换反馈操作。
WebGL2RenderingContext.endTransformFeedback(): 结束一个变换反馈操作。
WebGL2RenderingContext.transformFeedbackVaryings(): 指定要在 WebGLTransformFeedback 缓冲区中记录的值。
WebGL2RenderingContext.getTransformFeedbackVarying(): 从 WebGLTransformFeedback 缓冲区获取 varying 变量的信息。
WebGL2RenderingContext.pauseTransformFeedback(): 暂停一个变换反馈操作。
WebGL2RenderingContext.resumeTransformFeedback(): 恢复一个变换反馈操作。

统一缓冲对象

WebGL2RenderingContext.bindBufferBase(): 将给定的 WebGLBuffer 绑定到指定的绑定点 (target) 和索引 (index)。
WebGL2RenderingContext.bindBufferRange(): 将给定的 WebGLBuffer 的一个范围绑定到指定的绑定点 (target) 和索引 (index)。
WebGL2RenderingContext.getUniformIndices(): 检索 WebGLProgram 中一组 uniform 的索引。
WebGL2RenderingContext.getActiveUniforms(): 检索 WebGLProgram 中活动 uniform 的信息。
WebGL2RenderingContext.getUniformBlockIndex(): 检索 WebGLProgram 中 uniform 块的索引。
WebGL2RenderingContext.getActiveUniformBlockParameter(): 检索 WebGLProgram 中活动 uniform 块的信息。
WebGL2RenderingContext.getActiveUniformBlockName(): 检索 WebGLProgram 中指定索引处的活动 uniform 块的名称。
WebGL2RenderingContext.uniformBlockBinding(): 为活动 uniform 块分配绑定点。

顶点数组对象

处理 WebGLVertexArrayObject (VAO) 对象的函数。

WebGL2RenderingContext.createVertexArray(): 创建一个新的 WebGLVertexArrayObject。
WebGL2RenderingContext.deleteVertexArray(): 删除给定的 WebGLVertexArrayObject。
WebGL2RenderingContext.isVertexArray(): 如果给定的对象是有效的 WebGLVertexArrayObject，则返回 true。
WebGL2RenderingContext.bindVertexArray(): 将给定的 WebGLVertexArrayObject 绑定到缓冲区。

规范

规范
WebGL 2.0 规范 # 3.7

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2024年10月16日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题