WebGLRenderingContext

基线广泛可用

此功能已发展成熟，可在许多设备和浏览器版本中正常运行。它已在所有浏览器中可用，自 2015 年 7 月.

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

要获取对 2D 和/或 3D 图形渲染的 WebGL 上下文的访问权限，请在 <canvas> 元素上调用 getContext()，并提供 "webgl" 作为参数

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

获得画布的 WebGL 渲染上下文后，您就可以在其中渲染。 WebGL 教程包含更多有关如何开始使用 WebGL 的信息、示例和资源。

如果您需要 WebGL 2.0 上下文，请参见 WebGL2RenderingContext；它提供了对 OpenGL ES 3.0 图形实现的访问权限。

常量

参见 WebGL 常量页面。

WebGL 上下文

以下属性和方法提供了一般信息和功能，以处理 WebGL 上下文

WebGLRenderingContext.canvas: 对 HTMLCanvasElement 的只读反向引用。如果它没有与 <canvas> 元素关联，则可能为 null。
WebGLRenderingContext.drawingBufferWidth: 当前绘图缓冲区的只读宽度。应与与此上下文关联的画布元素的宽度匹配。
WebGLRenderingContext.drawingBufferHeight: 当前绘图缓冲区的只读高度。应与与此上下文关联的画布元素的高度匹配。
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 和 Alpha 分量混合像素运算的函数。
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.isRenderbuffer(): 返回一个布尔值，指示传递的 WebGLRenderingBuffer 是否有效。
WebGLRenderingContext.renderbufferStorage(): 创建一个渲染缓冲区数据存储。

纹理

WebGLRenderingContext.bindTexture(): 将 WebGLTexture 对象绑定到给定目标。
WebGLRenderingContext.compressedTexImage2D(): 以压缩格式指定二维纹理图像。
WebGLRenderingContext.compressedTexSubImage2D(): 以压缩格式指定二维纹理子图像。
WebGLRenderingContext.copyTexImage2D(): 复制二维纹理图像。
WebGLRenderingContext.copyTexSubImage2D(): 复制二维纹理子图像。
WebGLRenderingContext.createTexture(): 创建一个 WebGLTexture 对象。
WebGLRenderingContext.deleteTexture(): 删除 WebGLTexture 对象。
WebGLRenderingContext.generateMipmap(): 为 WebGLTexture 对象生成一组mipmap。
WebGLRenderingContext.getTexParameter(): 返回有关纹理的信息。
WebGLRenderingContext.isTexture(): 返回一个布尔值，指示传递的 WebGLTexture 是否有效。
WebGLRenderingContext.texImage2D(): 指定二维纹理图像。
WebGLRenderingContext.texSubImage2D(): 更新当前 WebGLTexture 的子矩形。
WebGLRenderingContext.texParameterf(): 设置纹理参数。
WebGLRenderingContext.texParameteri(): 设置纹理参数。

程序和着色器

WebGLRenderingContext.attachShader(): 将 WebGLShader 附加到 WebGLProgram。
WebGLRenderingContext.bindAttribLocation(): 将通用顶点索引绑定到命名属性变量。
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(): 返回一个布尔值，指示传递的 WebGLProgram 是否有效。
WebGLRenderingContext.isShader(): 返回一个布尔值，指示传递的 WebGLShader 是否有效。
WebGLRenderingContext.linkProgram(): 链接传递的 WebGLProgram 对象。
WebGLRenderingContext.shaderSource(): 在 WebGLShader 中设置源代码。
WebGLRenderingContext.useProgram(): 将指定的 WebGLProgram 用作当前渲染状态的一部分。
WebGLRenderingContext.validateProgram(): 验证 WebGLProgram。

制服和属性

WebGLRenderingContext.disableVertexAttribArray(): 在给定位置禁用顶点属性数组。
WebGLRenderingContext.enableVertexAttribArray(): 在给定位置启用顶点属性数组。
WebGLRenderingContext.getActiveAttrib(): 返回有关活动属性变量的信息。
WebGLRenderingContext.getActiveUniform(): 返回有关活动统一变量的信息。
WebGLRenderingContext.getAttribLocation(): 返回属性变量的位置。
WebGLRenderingContext.getUniform(): 返回给定位置的统一变量的值。
WebGLRenderingContext.getUniformLocation(): 返回统一变量的位置。
WebGLRenderingContext.getVertexAttrib(): 返回给定位置的顶点属性信息。
WebGLRenderingContext.getVertexAttribOffset(): 返回给定顶点属性的地址。
WebGLRenderingContext.uniform[1234][fi][v](): 为统一变量指定一个值。
WebGLRenderingContext.uniformMatrix[234]fv(): 为统一变量指定一个矩阵值。
WebGLRenderingContext.vertexAttrib[1234]f[v](): 为通用顶点属性指定一个值。
WebGLRenderingContext.vertexAttribPointer(): 指定顶点属性数组中顶点属性的数据格式和位置。

绘制缓冲区

WebGLRenderingContext.clear(): 将指定的缓冲区清除为预设值。
WebGLRenderingContext.drawArrays(): 从数组数据渲染基元。
WebGLRenderingContext.drawElements(): 从元素数组数据渲染基元。
WebGLRenderingContext.finish(): 阻止执行，直到所有之前调用的命令都完成。
WebGLRenderingContext.flush(): 清空不同的缓冲区命令，导致所有命令尽快执行。

色彩空间

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

使用扩展

这些方法管理 WebGL 扩展

WebGLRenderingContext.getSupportedExtensions(): 返回一个包含所有支持的 WebGL 扩展的字符串的 Array。
WebGLRenderingContext.getExtension(): 返回一个扩展对象。

规范

规范
WebGL 规范 # 5.14

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

HTMLCanvasElement