WebGLRenderingContext

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML <canvas> 元素内绘图。

要获得这个接口的对象以用于 2D 和 3D 的图形渲染，可以通过在 <canvas> 元素上调用 getContext() 函数，调用时传入“webgl”参数：

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

当你获取到 canvas 元素的 WebGL 绘图上下文，你便可以在里面绘图。点击 WebGL 教程获取更多资料，例如，关于如何开始 WebGL 编程的知识。

如果你需要一个 WebGL 2.0 的上下文，请参见 WebGL2RenderingContext；其提供了对 OpenGL ES 3.0 图形实现的支持。

常量

请参考 WebGL 常量页面。

WebGL 上下文

以下的属性和方法提供只读的 WebGL 上下文的信息和特性：

WebGLRenderingContext.canvas: 只读属性，对 HTMLCanvasElement 的向后引用。如果上下文没有相联系的 <canvas> 元素，值将会为 null。
WebGLRenderingContext.commit() 实验性: 如果上下文没有指定的 canvas，把帧交给原始的HTMLCanvasElement元素。
WebGLRenderingContext.drawingBufferWidth: 只读属性，当前绘图缓冲区的宽度，等于和该上下文相联系的 canvas 元素的宽度。
WebGLRenderingContext.drawingBufferHeight: 只读属性，当前绘图缓冲区的高度，等于和该上下文相联系的 canvas 元素的高度。
WebGLRenderingContext.getContextAttributes(): 返回 WebGLContextAttributes 对象，该对象包含真实的上下文参数。如果上下文丢失，将会返回 null。
WebGLRenderingContext.isContextLost(): 如果上下文丢失，返回 true；否则，返回 false。
WebGLRenderingContext.makeXRCompatible(): 确保上下文与用户的 XR 硬件的兼容性，必要时使用新配置重新创建上下文。这可用于启动使用标准 2D 演示的应用程序，然后过度到使用 VR 或 AR 模式。

视图和裁剪

WebGLRenderingContext.scissor(): 设置裁剪框。
WebGLRenderingContext.viewport(): 设置视口。

状态信息

WebGLRenderingContext.activeTexture(): 选择要激活的纹理单元。
WebGLRenderingContext.blendColor(): 设置源和目标的混和因子。
WebGLRenderingContext.blendEquation(): 用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendEquationSeparate(): 分开设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendFunc(): 定义用于像素混合算法的函数。
WebGLRenderingContext.blendFuncSeparate(): 分别定义混合像素 RGB 通道和透明通道的函数。
WebGLRenderingContext.clearColor(): 设置用于清空用的颜色。
WebGLRenderingContext.clearDepth(): 设置清除深度缓存时的深度值。
WebGLRenderingContext.clearStencil(): 设置清除模板缓冲区时的模板值。
WebGLRenderingContext.colorMask(): 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
WebGLRenderingContext.cullFace(): 设置多边形的正面和/或反面是否要被排除。
WebGLRenderingContext.depthFunc(): 设置比较输入像素深度和深度缓存值得函数。
WebGLRenderingContext.depthMask(): 设置是否写入深度缓存。
WebGLRenderingContext.depthRange(): 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
WebGLRenderingContext.disable(): 禁用这个上下文的 WebGL 功能。
WebGLRenderingContext.enable(): 启用这个上下文的 WebGL 功能。
WebGLRenderingContext.frontFace(): 设置多边形的正面使用顺时针还是逆时针绘制表示。
WebGLRenderingContext.getParameter(): 返回给入参数名的值。
WebGLRenderingContext.getError(): 返回错误信息。
WebGLRenderingContext.hint(): 给某些行为设置建议使用的模式。具体建议需要看执行的情况。
WebGLRenderingContext.isEnabled(): 测试这个上下文的 WebGL 功能是否开启。
WebGLRenderingContext.lineWidth(): 设置线宽。
WebGLRenderingContext.pixelStorei(): 设置像素存储模式。
WebGLRenderingContext.polygonOffset(): 设置多边形偏移的比例和单位，从而计算深度值。（补充：解决深度冲突）
WebGLRenderingContext.sampleCoverage(): 为抗锯齿效果设置多重取样覆盖参数。
WebGLRenderingContext.stencilFunc(): 同时设置前面和背面的模板测试函数，及其引用值。
WebGLRenderingContext.stencilFuncSeparate(): 可分开设置前面或背面的模板测试函数，及其引用值。
WebGLRenderingContext.stencilMask(): 同时启用或禁用，前面和背面的模板测试掩码。
WebGLRenderingContext.stencilMaskSeparate(): 可分开启用或禁用，前面和背面的模板测试掩码。
WebGLRenderingContext.stencilOp(): 同时设置，在前面和背面的模板缓冲区上执行的操作。
WebGLRenderingContext.stencilOpSeparate(): 可分开设置，在前面和背面的模板缓冲区上执行的操作。

缓冲区

WebGLRenderingContext.bindBuffer(): 把 WebGLBuffer 对象绑定到指定目标上。
WebGLRenderingContext.bufferData(): 更新缓冲数据。
WebGLRenderingContext.bufferSubData(): 更新从给入偏移量开始的缓冲数据。
WebGLRenderingContext.createBuffer(): 创建 WebGLBuffer 对象。
WebGLRenderingContext.deleteBuffer(): 删除 WebGLBuffer 对象。
WebGLRenderingContext.getBufferParameter(): 返回缓冲信息。
WebGLRenderingContext.isBuffer(): 返回给入的缓冲是否有效。

帧缓冲区

WebGLRenderingContext.bindFramebuffer(): 把 WebGLFrameBuffer 对象绑定到指定对象上。
WebGLRenderingContext.checkFramebufferStatus(): 返回帧缓冲区的状态。
WebGLRenderingContext.createFramebuffer(): 创建 WebGLFrameBuffer 对象。
WebGLRenderingContext.deleteFramebuffer(): 删除 WebGLFrameBuffer 对象。
WebGLRenderingContext.framebufferRenderbuffer(): 把 WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
WebGLRenderingContext.framebufferTexture2D(): 把纹理图像附加到 WebGLFrameBuffer 对象。
WebGLRenderingContext.getFramebufferAttachmentParameter(): 返回帧缓冲区的信息。
WebGLRenderingContext.isFramebuffer(): 返回布尔值，表示给入的 WebGLFrameBuffer 对象是否有效。
WebGLRenderingContext.readPixels(): 读取 WebGLFrameBuffer 的像素。

渲染缓冲区

WebGLRenderingContext.bindRenderbuffer(): 把 WebGLRenderBuffer 对象绑定到指定的对象上。
WebGLRenderingContext.createRenderbuffer(): 创建 WebGLRenderBuffer 对象。
WebGLRenderingContext.deleteRenderbuffer(): 删除 WebGLRenderBuffer 对象。
WebGLRenderingContext.getRenderbufferParameter(): 返回渲染缓冲区的信息。
WebGLRenderingContext.isBuffer(): 返回布尔值，表示给入的 WebGLRenderingBuffer 是否有效。
WebGLRenderingContext.renderbufferStorage(): 创建渲染缓冲区数据存储。

纹理

WebGLRenderingContext.bindTexture(): 把 WebGLTexture 对象绑定到指定对象上。
WebGLRenderingContext.compressedTexImage2D(): 指定一个为压缩格式的 2D 纹理图片。
WebGLRenderingContext.compressedTexSubImage2D(): 指定一个为压缩格式的 2D 纹理子图片。
WebGLRenderingContext.copyTexImage2D(): 复制 2D 纹理图片。
WebGLRenderingContext.copyTexSubImage2D(): 复制 2D 纹理子图片。
WebGLRenderingContext.createTexture(): 创建 WebGLTexture 对象。
WebGLRenderingContext.deleteTexture(): 删除 WebGLTexture 对象。
WebGLRenderingContext.generateMipmap(): 为 WebGLTexture 对象生成一组纹理映射。
WebGLRenderingContext.getTexParameter(): 返回纹理信息。
WebGLRenderingContext.isTexture(): 返回 Boolean 值，表示给入的 WebGLTexture 是否有效。
WebGLRenderingContext.texImage2D(): 指定 2D 纹理图片。
WebGLRenderingContext.texSubImage2D(): 更新当前 WebGLTexture 的子矩形。
WebGLRenderingContext.texParameterf(): 设置纹理参数。
WebGLRenderingContext.texParameteri(): 设置纹理参数。

程序对象和着色器对象

WebGLRenderingContext.attachShader(): 把 WebGLShader 添加到 WebGLProgram。
WebGLRenderingContext.bindAttribLocation(): 绑定一个普通顶点索引到一个命名的 attribute 变量
WebGLRenderingContext.compileShader(): 编译 WebGLShader。
WebGLRenderingContext.createProgram(): 创建 WebGLProgram。
WebGLRenderingContext.createShader(): 创建 WebGLShader。
WebGLRenderingContext.deleteProgram(): 删除 WebGLProgram。
WebGLRenderingContext.deleteShader(): 删除 WebGLShader。
WebGLRenderingContext.detachShader(): 分离 WebGLShader。
WebGLRenderingContext.getAttachedShaders(): 返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
WebGLRenderingContext.getProgramParameter(): 返回程序对象的信息。
WebGLRenderingContext.getProgramInfoLog(): 返回 WebGLProgram 对象的信息日志。
WebGLRenderingContext.getShaderParameter(): 返回着色器的信息。
WebGLRenderingContext.getShaderPrecisionFormat(): 返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
WebGLRenderingContext.getShaderInfoLog(): 返回 WebGLShader 对象的信息日志。
WebGLRenderingContext.getShaderSource(): 以字符串形式返回 WebGLShader 的源码。
WebGLRenderingContext.isProgram(): 返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
WebGLRenderingContext.isShader(): 返回一个 Boolean 值，表示给入的 WebGLShader 是否有效。
WebGLRenderingContext.linkProgram(): 链接给入的 WebGLProgram 对象。
WebGLRenderingContext.shaderSource(): 设置一个 WebGLShader 的源码。
WebGLRenderingContext.useProgram(): 使用指定的 WebGLProgram 作为当前渲染状态的一部分。
WebGLRenderingContext.validateProgram(): 使 WebGLProgram 生效。

Uniform 和 Attribute

WebGLRenderingContext.disableVertexAttribArray(): 在给定的位置，禁用顶点 attribute 数组。
WebGLRenderingContext.enableVertexAttribArray(): 在给定的位置，启用顶点 attribute 数组。
WebGLRenderingContext.getActiveAttrib(): 返回激活状态的 attribute 变量信息。
WebGLRenderingContext.getActiveUniform(): 返回激活状态的 uniform 变量信息。
WebGLRenderingContext.getAttribLocation(): 返回 attribute 变量的指针位置。
WebGLRenderingContext.getUniform(): 返回指定位置的 uniform 变量。
WebGLRenderingContext.getUniformLocation(): 返回 uniform 变量的指针位置。
WebGLRenderingContext.getVertexAttrib(): 返回指定位置的顶点 attribute 变量。
WebGLRenderingContext.getVertexAttribOffset(): 获取给定索引的顶点 attribute 位置。
WebGLRenderingContext.uniform[1234][fi][v](): 指定一个 uniform 变量。
WebGLRenderingContext.uniformMatrix[234]fv(): 指定一个 uniform 矩阵变量。
WebGLRenderingContext.vertexAttrib[1234]f[v](): 指定一个普通顶点 attribute 的值。
WebGLRenderingContext.vertexAttribPointer(): 指定一个顶点 attributes 数组中，顶点 attributes 变量的数据格式和位置。

绘制缓冲区

WebGLRenderingContext.clear(): 把指定的缓冲区清空为预设的值。
WebGLRenderingContext.drawArrays(): 渲染数组中的原始数据。
WebGLRenderingContext.drawElements(): 渲染元素数组中的原始数据。
WebGLRenderingContext.finish(): 阻断执行，直到之前所有的操作都完成。
WebGLRenderingContext.flush(): 清空缓冲的命令，这会导致所有命令尽快执行完。

色彩空间

WebGLRenderingContext.drawingBufferColorSpace 实验性: 指定 WebGL 绘制缓冲区的色彩空间。
WebGLRenderingContext.unpackColorSpace 实验性: 指定导入纹理时要转换到的色彩空间。

使用扩展插件

这些方法用于管理 WebGL 扩展：

WebGLRenderingContext.getSupportedExtensions(): 返回一个包含字符串的 Array，每个元素都为支持的 WebGL 扩展。
WebGLRenderingContext.getExtension(): 返回一个扩展对象。

规范

Specification
WebGL Specification # 5.14

浏览器兼容性

BCD tables only load in the browser

参见

HTMLCanvasElement