WebGLRenderingContext

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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

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

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

要获取 WebGL 上下文以进行 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.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 和 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(): 设置正面和/或背面模板测试操作。