WebGL

Khronos

WebGL 规范

编辑者草案 Thu Feb 19 12:14:33 2026 -0800

本版本:
https://www.khronos.org/registry/webgl/specs/latest/1.0/
WebIDL: https://www.khronos.org/registry/webgl/specs/latest/1.0/webgl.idl
最新版本:
https://www.khronos.org/registry/webgl/specs/latest/1.0/
WebIDL: https://www.khronos.org/registry/webgl/specs/latest/1.0/webgl.idl
上一版本:
https://www.khronos.org/registry/webgl/specs/1.0.3/
WebIDL: https://www.khronos.org/registry/webgl/specs/1.0.3/webgl.idl
编辑者:
Kelsey Gilbert (Mozilla Corp.)
Copyright © 2015 Khronos Group

摘要

本规范描述用于 HTML 5 canvas 元素 [CANVAS] 的一个额外渲染上下文和支持对象。 此上下文允许使用一个与 OpenGL ES 2.0 API 高度一致的 API 进行渲染。

本文档状态

本文档是编辑者草案。除作为进行中的工作外,请勿引用本文档。

反馈

欢迎在 the [email protected] 邮件列表上公开讨论本规范 (说明归档)。

请在 the 问题跟踪器中提交规范或其一致性测试的问题。也欢迎针对 Github 代码库提交拉取请求。

目录

介绍

WebGL™ 是一个为 Web 设计的即时模式 3D 渲染 API。 它源自 OpenGL® ES 2.0,并提供类似的渲染功能, 但处于 HTML 上下文中。WebGL 被设计为 HTML Canvas 元素的渲染上下文。 HTML Canvas 为网页中的程序化渲染提供目标, 并允许使用不同的渲染 API 来执行该渲染。 Canvas 规范中作为其一部分描述的唯一此类接口 是 2D canvas 渲染上下文 CanvasRenderingContext2D。 本文档描述另一个此类接口 WebGLRenderingContext, 它呈现 WebGL API。

API 的即时模式性质不同于大多数 Web API。 鉴于 3D 图形的众多用例,WebGL 选择提供可应用于任何用例的 灵活基元这一方法。库可以在 WebGL 之上提供更适合特定领域的 API, 从而为 WebGL 添加一个便利层,以加速并简化开发。 但是,由于其 OpenGL ES 2.0 渊源, 熟悉现代桌面 OpenGL 或 OpenGL ES 2.0 开发的开发者 应该可以直接过渡到 WebGL 开发。

约定

本文档中描述的许多函数包含指向 OpenGL ES 手册页的链接。虽然已尽一切努力使这些页面与 OpenGL ES 2.0 规范 [GLES20] 匹配, 但它们可能包含错误。若存在矛盾,则 OpenGL ES 2.0 规范为最终权威。

本文档的其余章节旨在与 OpenGL ES 2.0 规范(撰写本文时为 2.0.25, 可从 Khronos OpenGL ES API Registry 获取) 一起阅读。除非另有规定,每个方法的行为均由 OpenGL ES 2.0 规范定义。本规范可能偏离 OpenGL ES 2.0, 以确保互操作性或安全性,通常定义 OpenGL ES 2.0 留作实现定义的领域。 这些差异汇总在 WebGL 与 OpenGL ES 2.0 之间的差异一节中。

上下文创建和绘图缓冲区呈现

在使用 WebGL API 之前,作者必须按下文所述,为给定的 HTMLCanvasElement [CANVAS] 或 OffscreenCanvas [OFFSCREENCANVAS] 获取一个 WebGLRenderingContext 对象。 此对象用于管理 OpenGL 状态并渲染到绘图缓冲区, 该绘图缓冲区必须在上下文创建时创建。

上下文创建

每个 WebGLRenderingContext 都有一个 关联的 canvas,在创建时设置, 它是一个 canvas [CANVAS]offscreen canvas [OFFSCREENCANVAS]

每个 WebGLRenderingContext 都有 上下文 创建参数,在创建时设置, 位于一个 WebGLContextAttributes 对象中。

每个 WebGLRenderingContext 都有 实际 上下文参数,在每次创建绘图缓冲区时设置, 位于一个 WebGLContextAttributes 对象中。

每个 WebGLRenderingContext 都有一个 webgl context lost 标志,其初始为未设置。

canvas 元素或 offscreen canvas 对象的 getContext() 方法要为 contextId webgl [CANVASCONTEXTS] 返回一个新对象时, 用户代理必须执行以下步骤:

  1. 创建一个新的 WebGLRenderingContext 对象 context
  2. contextcanvasgetContext() 方法关联的 canvas 或 offscreen canvas。
  3. 创建一个新的 WebGLContextAttributes 对象 contextAttributes
  4. 如果调用 getContext() 时带有第二个参数 options, 则从 options 中指定的属性设置 contextAttributes 的属性。
  5. 使用 contextAttributes 中指定的设置 创建一个 drawing buffer, 并将该 drawing buffercontext 关联。
  6. 如果绘图缓冲区创建失败,执行以下步骤:
    1. canvas触发 WebGL 上下文创建 错误
    2. 返回 null 并终止这些步骤。
  7. 创建一个新的 WebGLContextAttributes 对象 actualAttributes
  8. 根据新创建的绘图缓冲区的属性设置 actualAttributes 的属性。
  9. context上下文创建 参数设置为 contextAttributes
  10. context实际上下文 参数设置为 actualAttributes
  11. 返回 context

canvas 上下文类型 'experimental-webgl' 在历史上曾用于提供对 尚未完成或尚未符合规范的 WebGL 实现的访问。

如果用户代理同时支持 webglexperimental-webgl canvas 上下文类型,则它们应被视为别名。例如,如果对 getContext('webgl') 的调用成功创建了 WebGLRenderingContext, 则随后对 getContext('experimental-webgl') 的调用应返回同一个上下文对象。

绘图缓冲区

API 调用所渲染到的绘图缓冲区应在 WebGLRenderingContext 对象创建时定义。以下描述定义如何 创建绘图缓冲区

下表显示构成绘图缓冲区的所有缓冲区,以及它们的 最小大小和默认情况下是否被定义。此绘图 缓冲区的大小应由 HTMLCanvasElement 或 OffscreenCanvas 的 widthheight 属性确定。 下表还显示这些缓冲区在首次创建、大小改变, 或当 preserveDrawingBuffer 上下文创建属性 为 false 时在呈现之后应清除到的值。

缓冲区 清除值 最小大小 默认定义?
颜色 (0, 0, 0, 0) 每个分量 8 位
深度 1.0 16 位整数
模板 0 8 位

小于 1 的 HTMLCanvasElement.width.height 值被视为 1。 0x0 canvas 将产生 1x1 的 drawingBufferWidth/Height。

如果请求的宽度或高度无法满足,无论是在首次创建绘图缓冲区时, 还是在 HTMLCanvasElementOffscreenCanvaswidthheight 属性改变时, 都应创建一个较小尺寸的绘图缓冲区。实际使用的尺寸取决于实现, 并且不保证会创建具有相同宽高比的缓冲区。 实际绘图缓冲区大小可从 drawingBufferWidthdrawingBufferHeight 属性获得。

WebGL 实现不得在高清显示器上对绘图 缓冲区的大小执行任何自动缩放。上下文的 drawingBufferWidthdrawingBufferHeight 必须在实现相关 约束的范围内尽可能接近 canvas 的 widthheight 属性。

上述约束不会改变 canvas 元素在网页上占用的空间量, 即使在高清显示器上也是如此。canvas 的 固有 尺寸 [CANVAS] 等于其坐标 空间的大小,其中数值按 CSS 像素解释,并且 CSS 像素 是分辨率无关的 [CSS]

WebGL 应用程序可以通过检查 window.devicePixelRatio 等属性, 按该因子缩放 canvas 的 widthheight,并将其 CSS 宽度和高度设置为原始宽度和高度, 从而在高清显示器上实现绘图缓冲区像素与屏幕像素之间的 1:1 比例。 应用程序只需放大 canvas 的 widthheight 属性,就可以模拟在更高分辨率显示器上运行的效果。

可选的 WebGLContextAttributes 对象可用于 改变缓冲区是否被定义。它还可用于定义颜色 缓冲区是否包含 alpha 通道。如果被定义,alpha 通道由 HTML 合成器用于将颜色缓冲区与页面的其余部分组合。 WebGLContextAttributes 对象仅在首次调用 getContext 时使用。没有提供用于在绘图 缓冲区创建后改变其属性的设施。

depthstencilantialias 属性设置 为 true 时,它们是请求,而不是要求。WebGL 实现应尽最大努力 满足它们。但是,当这些属性中的任何一个设置为 false 时,WebGL 实现不得提供相关功能。WebGL 实现或图形硬件不支持的属性组合 不应导致创建 WebGLRenderingContext 失败。 实际上下文 参数会被设置为已创建绘图缓冲区的属性。 WebGL 实现必须遵守 alphapremultipliedAlphapreserveDrawingBuffer 属性。

WebGL 会在合成操作之前立即将其绘图缓冲区呈现给 HTML 页面合成器, 但仅当自上一次合成操作以来至少调用过以下之一时:

在为合成呈现绘图缓冲区之前,实现应确保所有渲染操作 已刷新到绘图缓冲区。默认情况下,合成之后, 绘图缓冲区的内容应清除为其默认值,如上表所示。

可通过设置 WebGLContextAttributes 对象的 preserveDrawingBuffer 属性来改变此默认行为。 如果此标志为 true,则绘图缓冲区的内容应被保留, 直到作者清除或覆盖它们。如果此标志为 false, 则在渲染函数返回后尝试使用此上下文作为源图像执行操作 可能导致未定义行为。这包括 readPixelstoDataURL 调用, 将此上下文用作另一个上下文的 texImage2DdrawImage 调用的源图像,或从此上下文的 canvas 创建 一个 ImageBitmap [HTML]

虽然有时希望保留绘图缓冲区,但这在某些平台上可能造成显著的 性能损失。只要可能,此标志应保持为 false 并使用其他技术。同步绘图缓冲区访问等技术(例如, 在渲染到绘图缓冲区的同一函数中调用 readPixelstoDataURL)可用于获取绘图缓冲区的内容。 如果作者需要在一系列调用中渲染到同一个绘图缓冲区, 可以使用 Framebuffer 对象

只要能保证作者无法从另一个进程访问缓冲区内容, 实现可以优化掉绘图缓冲区所需的隐式清除操作。 例如,如果作者执行了显式清除,则不需要隐式清除。

undefined drawingBufferStorage(GLenum sizedFormat, unsigned long width, unsigned long height);
重新指定绘图缓冲区的格式和大小, 类似于在 Renderbuffers 上使用的 renderbufferStorage。 清除行为等同于设置 HTMLCanvasElement.widthHTMLCanvasElement.height,随后改变绘图缓冲区格式。 此方法遵守 WebGLContextAttributes.antialias
drawingBufferStorage 允许高效地同时重新指定宽度和高度。 使用 HTMLCanvasElement.widthHTMLCanvasElement.height 时, 先设置一个再设置另一个可能产生中间重新分配,尽管用户代理确实会尝试 优化掉这些重新分配。
如果 drawingBufferStorage 成功,则 drawingBufferFormat 变为 sizedFormatdrawingBufferWidthdrawingBufferHeight 分别变为 widthheight。 因此,对默认 framebuffer 的操作表现得就像是在一个带有 sizedFormat 附件的非默认 framebuffer 上操作。 例如,在 drawingBufferStorage(gl.RGBA16F, 1, 1) 之后,由于 framebuffer 是 "floatish", readPixels 的主要 format/type 对是 RGBA/FLOAT,而不是 RGBA/UNSIGNED_BYTE。 如果 WebGLContextAttributes.alphafalse,则生成 INVALID_OPERATIONRGBA8 总是作为 sizedFormat 被支持。 此外,如果以下枚举当前对 renderbufferStorage 有效,则也支持它们: 如果 sizedFormat 当前不受支持,则生成 INVALID_ENUM

在 WebGL 1.0 中,SRGB8_ALPHA8 需要扩展 EXT_sRGB。 在 WebGL 2.0 中,SRGB8_ALPHA8 不需要扩展。

在 WebGL 1.0 中,RGBA16F 需要扩展 EXT_color_buffer_half_float。 在 WebGL 2.0 中,RGBA16F 需要扩展 EXT_color_buffer_float

如果 widthheight 大于限制 MAX_RENDERBUFFER_SIZE, 则生成 INVALID_VALUE。 如果分配失败,则生成 OUT_OF_MEMORY

WebGL 视口

OpenGL 将矩形视口作为其状态的一部分进行管理,该视口定义渲染结果在 绘图缓冲区中的放置位置。在创建 WebGL 上下文 context 时,视口被初始化为一个原点为 (0, 0), 宽度和高度等于 (context.drawingBufferWidth, context.drawingBufferHeight) 的矩形。

WebGL 实现不得响应 canvas 元素大小调整而影响 OpenGL 视口的状态。

注意,如果 WebGL 程序不包含用于设置视口的逻辑, 它将无法正确处理 canvas 被调整大小的情况。 以下 ECMAScript 示例说明 WebGL 程序如何以编程方式调整 canvas 大小。
var canvas = document.getElementById('canvas1');
var gl = canvas.getContext('webgl');
canvas.width = newWidth;
canvas.height = newHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        

理由:自动设置视口会干扰手动设置视口的应用程序。 期望应用程序使用 onresize 处理程序来响应 canvas 大小变化,并相应地设置 OpenGL 视口。

预乘 Alpha、Canvas API 和 texImage2D

OpenGL API 允许应用程序修改渲染期间使用的混合模式, 因此允许控制绘图缓冲区中的 alpha 值如何被解释; 参见 the WebGLContextAttributes 一节中的 premultipliedAlpha 参数。

HTML Canvas API toDataURLdrawImage 必须遵守 premultipliedAlpha 上下文创建参数。 当对正在渲染 WebGL 内容的 Canvas 调用 toDataURL 时, 如果请求的图像格式未指定预乘 alpha,并且 WebGL 上下文的 premultipliedAlpha 参数设置为 true, 则像素值必须被去乘;即,颜色通道除以 alpha 通道。 注意,此操作是有损的。

将 WebGL 渲染的 Canvas 传递给 CanvasRenderingContext2DdrawImage 方法时, 在绘制操作期间可能需要也可能不需要修改已渲染的 WebGL 内容,这取决于 CanvasRenderingContext2D 实现的预乘需求。

将 WebGL 渲染的 Canvas 传递给 texImage2D API 时, 根据传入 canvas 的 premultipliedAlpha 上下文创建参数 以及目标 WebGL 上下文的 UNPACK_PREMULTIPLY_ALPHA_WEBGL pixel store 参数的设置,像素数据可能需要转换为或转换自预乘形式。

WebGL 资源

OpenGL 将若干类型的资源作为其状态的一部分进行管理。这些资源通过整数对象名称标识, 并通过各种创建调用从 OpenGL 获得。 与此相反,WebGL 将这些资源表示为 DOM 对象。 每个对象都派生自 WebGLObject 接口。目前支持的资源包括: 纹理、缓冲区(即 VBO)、framebuffer、renderbuffer、shader 和 program。WebGLRenderingContext 接口为每种类型提供一个用于创建 WebGLObject 子类的方法。来自底层图形库的数据 存储在这些对象中,并完全由它们管理。 DOM 对象不仅会在作者保留显式引用时保持存活, 还会在它被底层图形库使用期间保持存活。 当 DOM 对象被销毁时,它会将其资源标记为删除。 如果作者希望在 DOM 对象被销毁之前将对象标记为删除, 可以显式调用相应的删除函数。(例如 deleteTexture)

安全性

资源限制

WebGL 资源(例如纹理和顶点缓冲区对象(VBO))必须始终 包含已初始化的数据,即使它们是在没有初始用户 数据值的情况下创建的。创建没有初始值的资源通常用于 为纹理或 VBO 保留空间,然后使用 texSubImagebufferSubData 调用修改它。如果未向这些调用提供初始数据,WebGL 实现必须将其内容初始化为 0;深度资源必须清除为 默认的 1.0 clear depth。这可能需要创建一个大小为请求的 VBO 的清零临时缓冲区,以便能正确初始化。所有其他将 数据加载到纹理或 VBO 中的形式都涉及 ArrayBuffers 或图像等 DOM 对象, 因而已经要求被初始化。

当 WebGL 资源通过 drawElementsdrawArrays 等调用由 shader 访问时,WebGL 实现必须确保 shader 不能访问越界或未初始化的数据。 参见 启用的顶点属性和范围检查, 了解 WebGL 实现必须强制执行的限制。

源限制

为了防止信息泄露,WebGL 禁止将以下内容作为纹理上传:

如果在参数除此之外均正确的情况下, 使用违反这些限制的 HTMLImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 调用 texImage2DtexSubImage2D 方法, 则必须抛出 SECURITY_ERR 异常。

与 2D canvas 渲染上下文等其他 API 相比,WebGL 必然对 跨域媒体的使用施加更强的限制,因为 shader 可用于间接 推断已上传到 GPU 的纹理内容。

在托管媒体的服务器配合下,WebGL 应用程序可以使用来自其他域的图像和视频, 方式是使用 跨源资源 共享 [CORS]。为了使用此类媒体, 应用程序需要显式请求这样做的权限,服务器也需要显式授予 权限。对来自其他域的图像和视频元素的成功 CORS 启用抓取 会使 这些元素的来源设置为包含它们的 Document [HTML] 的来源。

以下 ECMAScript 示例演示如何对来自另一个域的图像发出 CORS 请求。 该图像在没有任何凭据(即 cookies)的情况下从服务器获取。

var gl = ...;
var image = new Image();

// The onload handler should be set to a function which uploads the HTMLImageElement
// using texImage2D or texSubImage2D.
image.onload = ...;

image.crossOrigin = "anonymous";

image.src = "http://other-domain.com/image.jpg";

注意,这些规则意味着使用 WebGL 渲染的 canvas 的 origin-clean 标志永远不会被设置为 false。

有关为图像和视频元素发出 CORS 请求的更多信息,请参阅:

支持的 GLSL 构造

WebGL 实现必须只接受符合 The OpenGL ES Shading Language, Version 1.00 [GLES20GLSL] 的 shader, 且其不得超出附录 A 第 4 节和第 5 节规定的最低功能。 特别是:

除上述规范中的保留标识符外,以 "webgl_" 和 "_webgl_" 开头的标识符 保留供 WebGL 使用。声明以这些前缀开头的函数、变量、结构名称或结构字段的 shader 不得被允许加载。

WebGL 1.0 实现还必须支持 shader 中的行继续字符 '\'。

拒绝服务防御

有可能有意或无意地创建 shader 和几何体的组合, 使其渲染时间长到不可接受。此问题类似于长时间运行脚本的问题, 用户代理已经为后者提供了防护措施。但是,长时间运行的绘制 调用可能导致整个窗口系统失去交互性,而不仅仅是用户代理。

一般情况下,不可能对传入 shader 的结构施加限制来防范此问题。 实验表明,即使非常严格的结构限制也不足以防止长时间渲染, 而且此类限制会阻止 shader 作者实现常见算法。

用户代理应实现防护措施,以防止过长的渲染时间及相关的交互性丧失。 建议的防护措施包括:

预计 OS 和图形 API 层的支持基础设施会随着时间改进, 这也是没有指定这些防护措施确切性质的原因。

越界数组访问

不得允许 shader 读取或写入位于应用程序自身数据之外的数组元素。 这包括任何数组类型的变量,以及使用数组下标语法访问的 vec3mat4 等向量或矩阵类型。 如果在编译期间检测到此类访问,则必须生成错误并阻止 shader 编译。否则,在运行时,越界读取应返回以下任一值:

越界写入会被丢弃,或修改程序可访问的存储中的 某个未指定值。

此行为复制了 [KHRROBUSTACCESS] 中定义的行为。

参见 支持的 GLSL 构造, 了解关于简化 shader 中数组索引操作静态分析的限制的更多信息。

DOM 接口

本节描述添加到 DOM 中的接口和功能, 以支持对上述功能的运行时访问。

类型

以下类型用于下一节中的所有接口。

typedef unsigned long  GLenum;
typedef boolean        GLboolean;
typedef unsigned long  GLbitfield;
typedef byte           GLbyte;         /* 'byte' should be a signed 8 bit type. */
typedef short          GLshort;
typedef long           GLint;
typedef long           GLsizei;
typedef long long      GLintptr;
typedef long long      GLsizeiptr;
// Ideally the typedef below would use 'unsigned byte', but that doesn't currently exist in Web IDL.
typedef octet          GLubyte;        /* 'octet' should be an unsigned 8 bit type. */
typedef unsigned short GLushort;
typedef unsigned long  GLuint;
typedef unrestricted float GLfloat;
typedef unrestricted float GLclampf;

// The power preference settings are documented in the WebGLContextAttributes
// section of the specification.
enum WebGLPowerPreference { "default", "low-power", "high-performance" };

WebGLContextAttributes

WebGLContextAttributes 字典包含绘图表面属性, 并作为第二个参数传递给 getContext

dictionary WebGLContextAttributes {
    boolean alpha = true;
    boolean depth = true;
    boolean stencil = false;
    boolean antialias = true;
    boolean premultipliedAlpha = true;
    boolean preserveDrawingBuffer = false;
    WebGLPowerPreference powerPreference = "default";
    boolean failIfMajorPerformanceCaveat = false;
    boolean desynchronized = false;
};

上下文创建参数

以下列表描述 WebGLContextAttributes 对象中的每个属性及其 用途。每个属性的默认值如上所示。如果没有向 getContext 传递第二个参数,或者传递了一个用户对象 但该对象没有给定名称的属性,则使用默认值。

alpha
如果值为 true,则绘图缓冲区具有 alpha 通道,用于 执行 OpenGL 目标 alpha 操作以及与页面合成。如果 值为 false,则没有可用的 alpha 缓冲区。
depth
如果值为 true,则绘图缓冲区具有至少 16 位的深度缓冲区。如果 值为 false,则没有可用的深度缓冲区。
stencil
如果值为 true,则绘图缓冲区具有至少 8 位的模板缓冲区。如果 值为 false,则没有可用的模板缓冲区。
antialias
如果值为 true 且实现支持抗锯齿,则绘图缓冲区 将使用其选择的技术(多重采样/超采样) 和质量执行抗锯齿。如果值为 false 或实现不支持 抗锯齿,则不执行抗锯齿。
premultipliedAlpha

如果值为 true,页面合成器将假定绘图缓冲区包含 具有预乘 alpha 的颜色。如果值为 false,页面合成器将 假定绘图缓冲区中的颜色不是预乘的。如果 alpha 标志为 false,则忽略此标志。

premultipliedAlpha:true 时,发送到页面 合成器的任何像素都应具有小于或等于其 alpha 值的颜色值, 否则由合成这些越界像素值产生的颜色 是未定义的。

例如,当 premultipliedAlpha:true 时, vec4(1.0, 0.0, 0.0, 0.5) 可能显示为绿色 而不是红色,这可能是由于优化的打包合成数学运算溢出。 由于要求一致行为会带来难以处理的性能影响, 因此这里保留为未定义。

有关 premultipliedAlpha 标志效果的更多信息, 参见 预乘 Alpha

preserveDrawingBuffer
如果为 false,则一旦绘图缓冲区按 绘图缓冲区一节所述被呈现, 绘图缓冲区的内容将被清除为其默认值。绘图 缓冲区的所有元素(颜色、深度和模板)都会被清除。 如果值为 true,则这些缓冲区不会被清除, 并会保留其值,直到作者清除或覆盖它们。
在某些硬件上,将 preserveDrawingBuffer 标志 设置为 true 可能具有显著的性能影响。
powerPreference

向用户代理提供一个提示,指示哪种 GPU 配置适合 此 WebGL 上下文。这可能影响在具有多个 GPU 的系统中 使用哪个 GPU。例如,双 GPU 系统可能有一个 GPU 以较低功耗为代价牺牲渲染性能。注意,此属性只是一个提示, WebGL 实现可以选择忽略它。

无论此属性的值如何,WebGL 实现都使用上下文丢失和恢复事件 来调节功耗和内存消耗。

允许的值为:

default

让用户代理决定哪种 GPU 配置最合适。这是 默认值。

high-performance

表示请求一种优先考虑渲染性能而非功耗的 GPU 配置。鼓励开发者仅在认为 绝对必要时才指定此值,因为它可能会显著降低 移动设备的电池续航。实现可以决定最初尊重此请求, 并在一段时间后丢失上下文并恢复一个忽略该 请求的新上下文。

请求 high-performance 的应用程序应测试并 维护健壮的上下文丢失处理,因为用户代理很可能决定 丢失后台 high-performance 上下文。

low-power

表示请求一种优先考虑省电而非 渲染性能的 GPU 配置。通常,如果内容不太可能 受绘图性能限制,则应使用此值;例如,如果它每秒只渲染一帧, 只绘制相对简单的几何体并使用简单 shader,或使用 较小的 HTML canvas 元素。鼓励开发者在其内容允许时使用此值, 因为它可能显著改善移动 设备的电池续航。

failIfMajorPerformanceCaveat
如果值为 true,当实现确定所创建 WebGL 上下文的性能 会显著低于进行等效 OpenGL 调用的原生应用程序时, 上下文创建将失败。这可能由多种原因导致,包括: 不需要高性能的应用程序应将此参数保留为其 默认值 false。需要高性能的应用程序可以 将此参数设置为 true,如果上下文创建失败, 则应用程序可能更愿意使用诸如 2D canvas 上下文之类的后备渲染路径。 或者,应用程序可以在将此参数 设置为 false 的情况下重试 WebGL 上下文创建, 并了解到应使用降低保真度的渲染模式 来改善性能。
desynchronized

如果值为 true,则用户代理可以优化 canvas 的渲染, 通过将 canvas 绘制周期与事件循环去同步、绕过普通的 用户代理渲染算法,或同时采用两者,来降低 从输入事件到光栅化所测得的延迟。只要此模式涉及绕过 通常的绘制机制、光栅化或两者,它就可能引入可见的撕裂 伪影。

用户代理通常在一个未显示的缓冲区上渲染, 然后快速将其与正在扫描输出用于呈现的缓冲区交换; 前一个缓冲区称为 back buffer,后一个称为 front buffer。 一种流行的降低延迟技术称为 front buffer rendering, 也称为 single buffer rendering,其中渲染与扫描输出过程并行且竞争地发生。 此技术以可能引入撕裂伪影为代价降低延迟, 并可用于全部或部分实现 desynchronized boolean。[MULTIPLEBUFFERING]

desynchronized boolean 在实现某些类型的应用程序时可能有用, 例如绘图应用程序,其中输入与光栅化之间的延迟至关重要。

这里是一个 ECMAScript 示例,它向 getContext 传递 WebGLContextAttributes 参数。它假定页面上存在一个名为 "canvas1" 的 canvas 元素。
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl',
                                { antialias: false,
                                  stencil: true });
    

WebGLObject

WebGLObject 接口是所有 GL 对象的父接口。

每个 WebGLObject 都有一个内部 invalidated 标志,其初始为未设置。

每个 WebGLObject 都有一个 .label 属性, 其默认值为 ""。实现应使用此应用程序提供的标签字符串 来改善调试,例如在错误消息中, 和/或在可能的情况下将该标签提供给任何底层驱动程序, 以辅助原生级调试工具。实现不得因标签而改变行为。

[Exposed=(Window,Worker)]
interface WebGLObject {
    attribute USVString label;
};

WebGLBuffer

WebGLBuffer 接口表示 OpenGL Buffer Object。底层对象 就像通过调用 glGenBuffers 创建 (OpenGL ES 2.0 §2.9手册页) 、就像通过调用 glBindBuffer 绑定 (OpenGL ES 2.0 §2.9手册页) 并就像通过调用 glDeleteBuffers 标记为删除 (OpenGL ES 2.0 §2.9手册页)

[Exposed=(Window,Worker)]
interface WebGLBuffer : WebGLObject {
};

WebGLFramebuffer

WebGLFramebuffer 接口表示 OpenGL Framebuffer Object。底层对象 就像通过调用 glGenFramebuffers 创建 (OpenGL ES 2.0 §4.4.1手册页) 、就像通过调用 glBindFramebuffer 绑定 (OpenGL ES 2.0 §4.4.1手册页) 并就像通过调用 glDeleteFramebuffers 标记为删除 (OpenGL ES 2.0 §4.4.1手册 页)

[Exposed=(Window,Worker)]
interface WebGLFramebuffer : WebGLObject {
};

WebGLProgram

WebGLProgram 接口表示 OpenGL Program Object。底层对象 就像通过调用 glCreateProgram 创建 (OpenGL ES 2.0 §2.10.3手册页) 、就像通过调用 glUseProgram 使用 (OpenGL ES 2.0 §2.10.3手册页) 并就像通过调用 glDeleteProgram 标记为删除 (OpenGL ES 2.0 §2.10.3手册页)

[Exposed=(Window,Worker)]
interface WebGLProgram : WebGLObject {
};

WebGLRenderbuffer

WebGLRenderbuffer 接口表示 OpenGL Renderbuffer Object。底层对象 就像通过调用 glGenRenderbuffers 创建 (OpenGL ES 2.0 §4.4.3手册 页) 、就像通过调用 glBindRenderbuffer 绑定 (OpenGL ES 2.0 §4.4.3手册 页) 并就像通过调用 glDeleteRenderbuffers 标记为删除 (OpenGL ES 2.0 §4.4.3手册 页)

[Exposed=(Window,Worker)]
interface WebGLRenderbuffer : WebGLObject {
};

WebGLShader

WebGLShader 接口表示 OpenGL Shader Object。底层对象 就像通过调用 glCreateShader 创建 (OpenGL ES 2.0 §2.10.1手册页) 、就像通过调用 glAttachShader 附加到 Program (OpenGL ES 2.0 §2.10.3手册页) 并就像通过调用 glDeleteShader 标记为删除 (OpenGL ES 2.0 §2.10.1手册页)

[Exposed=(Window,Worker)]
interface WebGLShader : WebGLObject {
};

WebGLTexture

WebGLTexture 接口表示 OpenGL Texture Object。底层对象 就像通过调用 glGenTextures 创建 (OpenGL ES 2.0 §3.7.13手册页) 、就像通过调用 glBindTexture 绑定 (OpenGL ES 2.0 §3.7.13手册页) 并就像通过调用 glDeleteTextures 标记为删除 (OpenGL ES 2.0 §3.7.13手册页)

[Exposed=(Window,Worker)]
interface WebGLTexture : WebGLObject {
};

WebGLUniformLocation

WebGLUniformLocation 接口表示 shader program 中 uniform 变量的 位置。

[Exposed=(Window,Worker)]
interface WebGLUniformLocation {
};

WebGLActiveInfo

WebGLActiveInfo 接口表示从 getActiveAttrib 和 getActiveUniform 调用 返回的信息。

[Exposed=(Window,Worker)]
interface WebGLActiveInfo {
    readonly attribute GLint size;
    readonly attribute GLenum type;
    readonly attribute DOMString name;
};

属性

以下属性可用:

size 类型为 GLint
所请求变量的大小。
type 类型为 GLenum
所请求变量的数据类型。
name 类型为 DOMString
所请求变量的名称。

WebGLShaderPrecisionFormat

WebGLShaderPrecisionFormat 接口表示从 getShaderPrecisionFormat 调用 返回的信息。

[Exposed=(Window,Worker)]
interface WebGLShaderPrecisionFormat {
    readonly attribute GLint rangeMin;
    readonly attribute GLint rangeMax;
    readonly attribute GLint precision;
};

属性

以下属性可用:

rangeMin 类型为 GLint
可表示的最小值绝对值的以 2 为底的对数。
rangeMax 类型为 GLint
可表示的最大值绝对值的以 2 为底的对数。
precision 类型为 GLint
可表示的精度位数。对于整数格式,此值 始终为 0。

ArrayBufferTyped Arrays

顶点、索引、纹理和其他数据使用 ArrayBufferTyped ArraysDataView 传输给 WebGL 实现, 如 ECMAScript 规范 [ECMASCRIPT] 中所定义。

Typed Arrays 支持创建交错的、异构的顶点数据;将 不同的数据块上传到一个大型 vertex buffer object;以及 OpenGL program 所需的 大多数其他用例。

这里是一个 ECMAScript 示例,展示如何使用不同类型的 typed arrays 访问同一个 ArrayBuffer。在此情况下,缓冲区包含一个浮点顶点位置 (x, y, z),后跟一个由 4 个无符号字节表示的颜色 (r, g, b, a)。
var numVertices = 100; // for example

// Compute the size needed for the buffer, in bytes and floats
var vertexSize = 3 * Float32Array.BYTES_PER_ELEMENT +
     4 * Uint8Array.BYTES_PER_ELEMENT;
var vertexSizeInFloats = vertexSize / Float32Array.BYTES_PER_ELEMENT;

// Allocate the buffer
var buf = new ArrayBuffer(numVertices * vertexSize);

// Map this buffer to a Float32Array to access the positions
var positionArray = new Float32Array(buf);

// Map the same buffer to a Uint8Array to access the color
var colorArray = new Uint8Array(buf);

// Set up the initial offset of the vertices and colors within the buffer
var positionIdx = 0;
var colorIdx = 3 * Float32Array.BYTES_PER_ELEMENT;

// Initialize the buffer
for (var i = 0; i < numVertices; i++) {
    positionArray[positionIdx] = ...;
    positionArray[positionIdx + 1] = ...;
    positionArray[positionIdx + 2] = ...;
    colorArray[colorIdx] = ...;
    colorArray[colorIdx + 1] = ...;
    colorArray[colorIdx + 2] = ...;
    colorArray[colorIdx + 3] = ...;
    positionIdx += vertexSizeInFloats;
    colorIdx += vertexSize;
}
    

WebGL 上下文

WebGLRenderingContext 表示允许 在 canvas 元素中进行 OpenGL ES 2.0 风格渲染的 API。

在执行 WebGLRenderingContext 接口的任何方法,或由 getExtension 方法返回的接口的任何方法的实现之前, 必须执行以下步骤:

  1. 如果被调用的方法上出现 [WebGLHandlesContextLoss] 扩展属性, 则执行被调用方法的实现,返回其结果并终止 这些步骤。
  2. use default return value 为 false。
  3. 如果 webgl context lost 标志已设置, 则令 use default return value 为 true。
    1. 否则,如果传给该方法的任何实参是一个 其 invalidated 标志已设置的 WebGLObject,则生成 INVALID_OPERATION 错误,并令 use default return value 为 true。
  4. 如果 use default return value 为 true,则执行以下步骤:
    1. 如果被调用方法的返回类型是 any 或任何可空类型, 则返回 null。
    2. 终止此算法,而不调用该方法实现。
  5. 否则,执行被调用方法的实现并返回其结果。

更多细节参见 context lost 事件

typedef (ImageBitmap or
         ImageData or
         HTMLImageElement or
         HTMLCanvasElement or
         HTMLVideoElement or
         OffscreenCanvas or
         VideoFrame) TexImageSource;

typedef ([AllowShared] Float32Array or sequence<GLfloat>) Float32List;
typedef ([AllowShared] Int32Array or sequence<GLint>) Int32List;

interface mixin WebGLRenderingContextBase
{

    /* ClearBufferMask */
    const GLenum DEPTH_BUFFER_BIT               = 0x00000100;
    const GLenum STENCIL_BUFFER_BIT             = 0x00000400;
    const GLenum COLOR_BUFFER_BIT               = 0x00004000;

    /* BeginMode */
    const GLenum POINTS                         = 0x0000;
    const GLenum LINES                          = 0x0001;
    const GLenum LINE_LOOP                      = 0x0002;
    const GLenum LINE_STRIP                     = 0x0003;
    const GLenum TRIANGLES                      = 0x0004;
    const GLenum TRIANGLE_STRIP                 = 0x0005;
    const GLenum TRIANGLE_FAN                   = 0x0006;

    /* AlphaFunction (not supported in ES20) */
    /*      NEVER */
    /*      LESS */
    /*      EQUAL */
    /*      LEQUAL */
    /*      GREATER */
    /*      NOTEQUAL */
    /*      GEQUAL */
    /*      ALWAYS */

    /* BlendingFactorDest */
    const GLenum ZERO                           = 0;
    const GLenum ONE                            = 1;
    const GLenum SRC_COLOR                      = 0x0300;
    const GLenum ONE_MINUS_SRC_COLOR            = 0x0301;
    const GLenum SRC_ALPHA                      = 0x0302;
    const GLenum ONE_MINUS_SRC_ALPHA            = 0x0303;
    const GLenum DST_ALPHA                      = 0x0304;
    const GLenum ONE_MINUS_DST_ALPHA            = 0x0305;

    /* BlendingFactorSrc */
    /*      ZERO */
    /*      ONE */
    const GLenum DST_COLOR                      = 0x0306;
    const GLenum ONE_MINUS_DST_COLOR            = 0x0307;
    const GLenum SRC_ALPHA_SATURATE             = 0x0308;
    /*      SRC_ALPHA */
    /*      ONE_MINUS_SRC_ALPHA */
    /*      DST_ALPHA */
    /*      ONE_MINUS_DST_ALPHA */

    /* BlendEquationSeparate */
    const GLenum FUNC_ADD                       = 0x8006;
    const GLenum BLEND_EQUATION                 = 0x8009;
    const GLenum BLEND_EQUATION_RGB             = 0x8009;   /* same as BLEND_EQUATION */
    const GLenum BLEND_EQUATION_ALPHA           = 0x883D;

    /* BlendSubtract */
    const GLenum FUNC_SUBTRACT                  = 0x800A;
    const GLenum FUNC_REVERSE_SUBTRACT          = 0x800B;

    /* Separate Blend Functions */
    const GLenum BLEND_DST_RGB                  = 0x80C8;
    const GLenum BLEND_SRC_RGB                  = 0x80C9;
    const GLenum BLEND_DST_ALPHA                = 0x80CA;
    const GLenum BLEND_SRC_ALPHA                = 0x80CB;
    const GLenum CONSTANT_COLOR                 = 0x8001;
    const GLenum ONE_MINUS_CONSTANT_COLOR       = 0x8002;
    const GLenum CONSTANT_ALPHA                 = 0x8003;
    const GLenum ONE_MINUS_CONSTANT_ALPHA       = 0x8004;
    const GLenum BLEND_COLOR                    = 0x8005;

    /* Buffer Objects */
    const GLenum ARRAY_BUFFER                   = 0x8892;
    const GLenum ELEMENT_ARRAY_BUFFER           = 0x8893;
    const GLenum ARRAY_BUFFER_BINDING           = 0x8894;
    const GLenum ELEMENT_ARRAY_BUFFER_BINDING   = 0x8895;

    const GLenum STREAM_DRAW                    = 0x88E0;
    const GLenum STATIC_DRAW                    = 0x88E4;
    const GLenum DYNAMIC_DRAW                   = 0x88E8;

    const GLenum BUFFER_SIZE                    = 0x8764;
    const GLenum BUFFER_USAGE                   = 0x8765;

    const GLenum CURRENT_VERTEX_ATTRIB          = 0x8626;

    /* CullFaceMode */
    const GLenum FRONT                          = 0x0404;
    const GLenum BACK                           = 0x0405;
    const GLenum FRONT_AND_BACK                 = 0x0408;

    /* DepthFunction */
    /*      NEVER */
    /*      LESS */
    /*      EQUAL */
    /*      LEQUAL */
    /*      GREATER */
    /*      NOTEQUAL */
    /*      GEQUAL */
    /*      ALWAYS */

    /* EnableCap */
    /* TEXTURE_2D */
    const GLenum CULL_FACE                      = 0x0B44;
    const GLenum BLEND                          = 0x0BE2;
    const GLenum DITHER                         = 0x0BD0;
    const GLenum STENCIL_TEST                   = 0x0B90;
    const GLenum DEPTH_TEST                     = 0x0B71;
    const GLenum SCISSOR_TEST                   = 0x0C11;
    const GLenum POLYGON_OFFSET_FILL            = 0x8037;
    const GLenum SAMPLE_ALPHA_TO_COVERAGE       = 0x809E;
    const GLenum SAMPLE_COVERAGE                = 0x80A0;

    /* ErrorCode */
    const GLenum NO_ERROR                       = 0;
    const GLenum INVALID_ENUM                   = 0x0500;
    const GLenum INVALID_VALUE                  = 0x0501;
    const GLenum INVALID_OPERATION              = 0x0502;
    const GLenum OUT_OF_MEMORY                  = 0x0505;

    /* FrontFaceDirection */
    const GLenum CW                             = 0x0900;
    const GLenum CCW                            = 0x0901;

    /* GetPName */
    const GLenum LINE_WIDTH                     = 0x0B21;
    const GLenum ALIASED_POINT_SIZE_RANGE       = 0x846D;
    const GLenum ALIASED_LINE_WIDTH_RANGE       = 0x846E;
    const GLenum CULL_FACE_MODE                 = 0x0B45;
    const GLenum FRONT_FACE                     = 0x0B46;
    const GLenum DEPTH_RANGE                    = 0x0B70;
    const GLenum DEPTH_WRITEMASK                = 0x0B72;
    const GLenum DEPTH_CLEAR_VALUE              = 0x0B73;
    const GLenum DEPTH_FUNC                     = 0x0B74;
    const GLenum STENCIL_CLEAR_VALUE            = 0x0B91;
    const GLenum STENCIL_FUNC                   = 0x0B92;
    const GLenum STENCIL_FAIL                   = 0x0B94;
    const GLenum STENCIL_PASS_DEPTH_FAIL        = 0x0B95;
    const GLenum STENCIL_PASS_DEPTH_PASS        = 0x0B96;
    const GLenum STENCIL_REF                    = 0x0B97;
    const GLenum STENCIL_VALUE_MASK             = 0x0B93;
    const GLenum STENCIL_WRITEMASK              = 0x0B98;
    const GLenum STENCIL_BACK_FUNC              = 0x8800;
    const GLenum STENCIL_BACK_FAIL              = 0x8801;
    const GLenum STENCIL_BACK_PASS_DEPTH_FAIL   = 0x8802;
    const GLenum STENCIL_BACK_PASS_DEPTH_PASS   = 0x8803;
    const GLenum STENCIL_BACK_REF               = 0x8CA3;
    const GLenum STENCIL_BACK_VALUE_MASK        = 0x8CA4;
    const GLenum STENCIL_BACK_WRITEMASK         = 0x8CA5;
    const GLenum VIEWPORT                       = 0x0BA2;
    const GLenum SCISSOR_BOX                    = 0x0C10;
    /*      SCISSOR_TEST */
    const GLenum COLOR_CLEAR_VALUE              = 0x0C22;
    const GLenum COLOR_WRITEMASK                = 0x0C23;
    const GLenum UNPACK_ALIGNMENT               = 0x0CF5;
    const GLenum PACK_ALIGNMENT                 = 0x0D05;
    const GLenum MAX_TEXTURE_SIZE               = 0x0D33;
    const GLenum MAX_VIEWPORT_DIMS              = 0x0D3A;
    const GLenum SUBPIXEL_BITS                  = 0x0D50;
    const GLenum RED_BITS                       = 0x0D52;
    const GLenum GREEN_BITS                     = 0x0D53;
    const GLenum BLUE_BITS                      = 0x0D54;
    const GLenum ALPHA_BITS                     = 0x0D55;
    const GLenum DEPTH_BITS                     = 0x0D56;
    const GLenum STENCIL_BITS                   = 0x0D57;
    const GLenum POLYGON_OFFSET_UNITS           = 0x2A00;
    /*      POLYGON_OFFSET_FILL */
    const GLenum POLYGON_OFFSET_FACTOR          = 0x8038;
    const GLenum TEXTURE_BINDING_2D             = 0x8069;
    const GLenum SAMPLE_BUFFERS                 = 0x80A8;
    const GLenum SAMPLES                        = 0x80A9;
    const GLenum SAMPLE_COVERAGE_VALUE          = 0x80AA;
    const GLenum SAMPLE_COVERAGE_INVERT         = 0x80AB;

    /* GetTextureParameter */
    /*      TEXTURE_MAG_FILTER */
    /*      TEXTURE_MIN_FILTER */
    /*      TEXTURE_WRAP_S */
    /*      TEXTURE_WRAP_T */

    const GLenum COMPRESSED_TEXTURE_FORMATS     = 0x86A3;

    /* HintMode */
    const GLenum DONT_CARE                      = 0x1100;
    const GLenum FASTEST                        = 0x1101;
    const GLenum NICEST                         = 0x1102;

    /* HintTarget */
    const GLenum GENERATE_MIPMAP_HINT            = 0x8192;

    /* DataType */
    const GLenum BYTE                           = 0x1400;
    const GLenum UNSIGNED_BYTE                  = 0x1401;
    const GLenum SHORT                          = 0x1402;
    const GLenum UNSIGNED_SHORT                 = 0x1403;
    const GLenum INT                            = 0x1404;
    const GLenum UNSIGNED_INT                   = 0x1405;
    const GLenum FLOAT                          = 0x1406;

    /* PixelFormat */
    const GLenum DEPTH_COMPONENT                = 0x1902;
    const GLenum ALPHA                          = 0x1906;
    const GLenum RGB                            = 0x1907;
    const GLenum RGBA                           = 0x1908;
    const GLenum LUMINANCE                      = 0x1909;
    const GLenum LUMINANCE_ALPHA                = 0x190A;

    /* PixelType */
    /*      UNSIGNED_BYTE */
    const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033;
    const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034;
    const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363;

    /* Shaders */
    const GLenum FRAGMENT_SHADER                  = 0x8B30;
    const GLenum VERTEX_SHADER                    = 0x8B31;
    const GLenum MAX_VERTEX_ATTRIBS               = 0x8869;
    const GLenum MAX_VERTEX_UNIFORM_VECTORS       = 0x8DFB;
    const GLenum MAX_VARYING_VECTORS              = 0x8DFC;
    const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;
    const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS   = 0x8B4C;
    const GLenum MAX_TEXTURE_IMAGE_UNITS          = 0x8872;
    const GLenum MAX_FRAGMENT_UNIFORM_VECTORS     = 0x8DFD;
    const GLenum SHADER_TYPE                      = 0x8B4F;
    const GLenum DELETE_STATUS                    = 0x8B80;
    const GLenum LINK_STATUS                      = 0x8B82;
    const GLenum VALIDATE_STATUS                  = 0x8B83;
    const GLenum ATTACHED_SHADERS                 = 0x8B85;
    const GLenum ACTIVE_UNIFORMS                  = 0x8B86;
    const GLenum ACTIVE_ATTRIBUTES                = 0x8B89;
    const GLenum SHADING_LANGUAGE_VERSION         = 0x8B8C;
    const GLenum CURRENT_PROGRAM                  = 0x8B8D;

    /* StencilFunction */
    const GLenum NEVER                          = 0x0200;
    const GLenum LESS                           = 0x0201;
    const GLenum EQUAL                          = 0x0202;
    const GLenum LEQUAL                         = 0x0203;
    const GLenum GREATER                        = 0x0204;
    const GLenum NOTEQUAL                       = 0x0205;
    const GLenum GEQUAL                         = 0x0206;
    const GLenum ALWAYS                         = 0x0207;

    /* StencilOp */
    /*      ZERO */
    const GLenum KEEP                           = 0x1E00;
    const GLenum REPLACE                        = 0x1E01;
    const GLenum INCR                           = 0x1E02;
    const GLenum DECR                           = 0x1E03;
    const GLenum INVERT                         = 0x150A;
    const GLenum INCR_WRAP                      = 0x8507;
    const GLenum DECR_WRAP                      = 0x8508;

    /* StringName */
    const GLenum VENDOR                         = 0x1F00;
    const GLenum RENDERER                       = 0x1F01;
    const GLenum VERSION                        = 0x1F02;

    /* TextureMagFilter */
    const GLenum NEAREST                        = 0x2600;
    const GLenum LINEAR                         = 0x2601;

    /* TextureMinFilter */
    /*      NEAREST */
    /*      LINEAR */
    const GLenum NEAREST_MIPMAP_NEAREST         = 0x2700;
    const GLenum LINEAR_MIPMAP_NEAREST          = 0x2701;
    const GLenum NEAREST_MIPMAP_LINEAR          = 0x2702;
    const GLenum LINEAR_MIPMAP_LINEAR           = 0x2703;

    /* TextureParameterName */
    const GLenum TEXTURE_MAG_FILTER             = 0x2800;
    const GLenum TEXTURE_MIN_FILTER             = 0x2801;
    const GLenum TEXTURE_WRAP_S                 = 0x2802;
    const GLenum TEXTURE_WRAP_T                 = 0x2803;

    /* TextureTarget */
    const GLenum TEXTURE_2D                     = 0x0DE1;
    const GLenum TEXTURE                        = 0x1702;

    const GLenum TEXTURE_CUBE_MAP               = 0x8513;
    const GLenum TEXTURE_BINDING_CUBE_MAP       = 0x8514;
    const GLenum TEXTURE_CUBE_MAP_POSITIVE_X    = 0x8515;
    const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X    = 0x8516;
    const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y    = 0x8517;
    const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y    = 0x8518;
    const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z    = 0x8519;
    const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z    = 0x851A;
    const GLenum MAX_CUBE_MAP_TEXTURE_SIZE      = 0x851C;

    /* TextureUnit */
    const GLenum TEXTURE0                       = 0x84C0;
    const GLenum TEXTURE1                       = 0x84C1;
    const GLenum TEXTURE2                       = 0x84C2;
    const GLenum TEXTURE3                       = 0x84C3;
    const GLenum TEXTURE4                       = 0x84C4;
    const GLenum TEXTURE5                       = 0x84C5;
    const GLenum TEXTURE6                       = 0x84C6;
    const GLenum TEXTURE7                       = 0x84C7;
    const GLenum TEXTURE8                       = 0x84C8;
    const GLenum TEXTURE9                       = 0x84C9;
    const GLenum TEXTURE10                      = 0x84CA;
    const GLenum TEXTURE11                      = 0x84CB;
    const GLenum TEXTURE12                      = 0x84CC;
    const GLenum TEXTURE13                      = 0x84CD;
    const GLenum TEXTURE14                      = 0x84CE;
    const GLenum TEXTURE15                      = 0x84CF;
    const GLenum TEXTURE16                      = 0x84D0;
    const GLenum TEXTURE17                      = 0x84D1;
    const GLenum TEXTURE18                      = 0x84D2;
    const GLenum TEXTURE19                      = 0x84D3;
    const GLenum TEXTURE20                      = 0x84D4;
    const GLenum TEXTURE21                      = 0x84D5;
    const GLenum TEXTURE22                      = 0x84D6;
    const GLenum TEXTURE23                      = 0x84D7;
    const GLenum TEXTURE24                      = 0x84D8;
    const GLenum TEXTURE25                      = 0x84D9;
    const GLenum TEXTURE26                      = 0x84DA;
    const GLenum TEXTURE27                      = 0x84DB;
    const GLenum TEXTURE28                      = 0x84DC;
    const GLenum TEXTURE29                      = 0x84DD;
    const GLenum TEXTURE30                      = 0x84DE;
    const GLenum TEXTURE31                      = 0x84DF;
    const GLenum ACTIVE_TEXTURE                 = 0x84E0;

    /* TextureWrapMode */
    const GLenum REPEAT                         = 0x2901;
    const GLenum CLAMP_TO_EDGE                  = 0x812F;
    const GLenum MIRRORED_REPEAT                = 0x8370;

    /* Uniform Types */
    const GLenum FLOAT_VEC2                     = 0x8B50;
    const GLenum FLOAT_VEC3                     = 0x8B51;
    const GLenum FLOAT_VEC4                     = 0x8B52;
    const GLenum INT_VEC2                       = 0x8B53;
    const GLenum INT_VEC3                       = 0x8B54;
    const GLenum INT_VEC4                       = 0x8B55;
    const GLenum BOOL                           = 0x8B56;
    const GLenum BOOL_VEC2                      = 0x8B57;
    const GLenum BOOL_VEC3                      = 0x8B58;
    const GLenum BOOL_VEC4                      = 0x8B59;
    const GLenum FLOAT_MAT2                     = 0x8B5A;
    const GLenum FLOAT_MAT3                     = 0x8B5B;
    const GLenum FLOAT_MAT4                     = 0x8B5C;
    const GLenum SAMPLER_2D                     = 0x8B5E;
    const GLenum SAMPLER_CUBE                   = 0x8B60;

    /* Vertex Arrays */
    const GLenum VERTEX_ATTRIB_ARRAY_ENABLED        = 0x8622;
    const GLenum VERTEX_ATTRIB_ARRAY_SIZE           = 0x8623;
    const GLenum VERTEX_ATTRIB_ARRAY_STRIDE         = 0x8624;
    const GLenum VERTEX_ATTRIB_ARRAY_TYPE           = 0x8625;
    const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED     = 0x886A;
    const GLenum VERTEX_ATTRIB_ARRAY_POINTER        = 0x8645;
    const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;

    /* Read Format */
    const GLenum IMPLEMENTATION_COLOR_READ_TYPE   = 0x8B9A;
    const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;

    /* Shader Source */
    const GLenum COMPILE_STATUS                 = 0x8B81;

    /* Shader Precision-Specified Types */
    const GLenum LOW_FLOAT                      = 0x8DF0;
    const GLenum MEDIUM_FLOAT                   = 0x8DF1;
    const GLenum HIGH_FLOAT                     = 0x8DF2;
    const GLenum LOW_INT                        = 0x8DF3;
    const GLenum MEDIUM_INT                     = 0x8DF4;
    const GLenum HIGH_INT                       = 0x8DF5;

    /* Framebuffer Object. */
    const GLenum FRAMEBUFFER                    = 0x8D40;
    const GLenum RENDERBUFFER                   = 0x8D41;

    const GLenum RGBA4                          = 0x8056;
    const GLenum RGB5_A1                        = 0x8057;
    const GLenum RGBA8                          = 0x8058;
    const GLenum RGB565                         = 0x8D62;
    const GLenum DEPTH_COMPONENT16              = 0x81A5;
    const GLenum STENCIL_INDEX8                 = 0x8D48;
    const GLenum DEPTH_STENCIL                  = 0x84F9;

    const GLenum RENDERBUFFER_WIDTH             = 0x8D42;
    const GLenum RENDERBUFFER_HEIGHT            = 0x8D43;
    const GLenum RENDERBUFFER_INTERNAL_FORMAT   = 0x8D44;
    const GLenum RENDERBUFFER_RED_SIZE          = 0x8D50;
    const GLenum RENDERBUFFER_GREEN_SIZE        = 0x8D51;
    const GLenum RENDERBUFFER_BLUE_SIZE         = 0x8D52;
    const GLenum RENDERBUFFER_ALPHA_SIZE        = 0x8D53;
    const GLenum RENDERBUFFER_DEPTH_SIZE        = 0x8D54;
    const GLenum RENDERBUFFER_STENCIL_SIZE      = 0x8D55;

    const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE           = 0x8CD0;
    const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME           = 0x8CD1;
    const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL         = 0x8CD2;
    const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;

    const GLenum COLOR_ATTACHMENT0              = 0x8CE0;
    const GLenum DEPTH_ATTACHMENT               = 0x8D00;
    const GLenum STENCIL_ATTACHMENT             = 0x8D20;
    const GLenum DEPTH_STENCIL_ATTACHMENT       = 0x821A;

    const GLenum NONE                           = 0;

    const GLenum FRAMEBUFFER_COMPLETE                      = 0x8CD5;
    const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT         = 0x8CD6;
    const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;
    const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS         = 0x8CD9;
    const GLenum FRAMEBUFFER_UNSUPPORTED                   = 0x8CDD;

    const GLenum FRAMEBUFFER_BINDING            = 0x8CA6;
    const GLenum RENDERBUFFER_BINDING           = 0x8CA7;
    const GLenum MAX_RENDERBUFFER_SIZE          = 0x84E8;

    const GLenum INVALID_FRAMEBUFFER_OPERATION  = 0x0506;

    /* WebGL-specific enums */
    const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240;
    const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241;
    const GLenum CONTEXT_LOST_WEBGL             = 0x9242;
    const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;
    const GLenum BROWSER_DEFAULT_WEBGL          = 0x9244;

    readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;
    readonly attribute GLsizei drawingBufferWidth;
    readonly attribute GLsizei drawingBufferHeight;
    readonly attribute GLenum drawingBufferFormat;

    /* Upon context creation, drawingBufferColorSpace and unpackColorSpace both
       default to the value "srgb". */
    attribute PredefinedColorSpace drawingBufferColorSpace;
    attribute PredefinedColorSpace unpackColorSpace;

    [WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
    [WebGLHandlesContextLoss] boolean isContextLost();

    sequence<DOMString>? getSupportedExtensions();
    object? getExtension(DOMString name);

    undefined drawingBufferStorage(GLenum sizedFormat, unsigned long width, unsigned long height);

    undefined activeTexture(GLenum texture);
    undefined attachShader(WebGLProgram program, WebGLShader shader);
    undefined bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);
    undefined bindBuffer(GLenum target, WebGLBuffer? buffer);
    undefined bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);
    undefined bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);
    undefined bindTexture(GLenum target, WebGLTexture? texture);
    undefined blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
    undefined blendEquation(GLenum mode);
    undefined blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
    undefined blendFunc(GLenum sfactor, GLenum dfactor);
    undefined blendFuncSeparate(GLenum srcRGB, GLenum dstRGB,
                                GLenum srcAlpha, GLenum dstAlpha);

    [WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);
    undefined clear(GLbitfield mask);
    undefined clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
    undefined clearDepth(GLclampf depth);
    undefined clearStencil(GLint s);
    undefined colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
    undefined compileShader(WebGLShader shader);

    undefined copyTexImage2D(GLenum target, GLint level, GLenum internalformat,
                             GLint x, GLint y, GLsizei width, GLsizei height,
                             GLint border);
    undefined copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
                                GLint x, GLint y, GLsizei width, GLsizei height);

    WebGLBuffer createBuffer();
    WebGLFramebuffer createFramebuffer();
    WebGLProgram createProgram();
    WebGLRenderbuffer createRenderbuffer();
    WebGLShader? createShader(GLenum type);
    WebGLTexture createTexture();

    undefined cullFace(GLenum mode);

    undefined deleteBuffer(WebGLBuffer? buffer);
    undefined deleteFramebuffer(WebGLFramebuffer? framebuffer);
    undefined deleteProgram(WebGLProgram? program);
    undefined deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);
    undefined deleteShader(WebGLShader? shader);
    undefined deleteTexture(WebGLTexture? texture);

    undefined depthFunc(GLenum func);
    undefined depthMask(GLboolean flag);
    undefined depthRange(GLclampf zNear, GLclampf zFar);
    undefined detachShader(WebGLProgram program, WebGLShader shader);
    undefined disable(GLenum cap);
    undefined disableVertexAttribArray(GLuint index);
    undefined drawArrays(GLenum mode, GLint first, GLsizei count);
    undefined drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);

    undefined enable(GLenum cap);
    undefined enableVertexAttribArray(GLuint index);
    undefined finish();
    undefined flush();
    undefined framebufferRenderbuffer(GLenum target, GLenum attachment,
                                      GLenum renderbuffertarget,
                                      WebGLRenderbuffer? renderbuffer);
    undefined framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget,
                                   WebGLTexture? texture, GLint level);
    undefined frontFace(GLenum mode);

    undefined generateMipmap(GLenum target);

    WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
    WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
    sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);

    [WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);

    any getBufferParameter(GLenum target, GLenum pname);
    any getParameter(GLenum pname);

    [WebGLHandlesContextLoss] GLenum getError();

    any getFramebufferAttachmentParameter(GLenum target, GLenum attachment,
                                          GLenum pname);
    any getProgramParameter(WebGLProgram program, GLenum pname);
    DOMString? getProgramInfoLog(WebGLProgram program);
    any getRenderbufferParameter(GLenum target, GLenum pname);
    any getShaderParameter(WebGLShader shader, GLenum pname);
    WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
    DOMString? getShaderInfoLog(WebGLShader shader);

    DOMString? getShaderSource(WebGLShader shader);

    any getTexParameter(GLenum target, GLenum pname);

    any getUniform(WebGLProgram program, WebGLUniformLocation location);

    WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);

    any getVertexAttrib(GLuint index, GLenum pname);

    [WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);

    undefined hint(GLenum target, GLenum mode);
    [WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
    [WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
    [WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
    [WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
    [WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
    [WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
    [WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);
    undefined lineWidth(GLfloat width);
    undefined linkProgram(WebGLProgram program);
    undefined pixelStorei(GLenum pname, GLint param);
    undefined polygonOffset(GLfloat factor, GLfloat units);

    undefined renderbufferStorage(GLenum target, GLenum internalformat,
                                  GLsizei width, GLsizei height);
    undefined sampleCoverage(GLclampf value, GLboolean invert);
    undefined scissor(GLint x, GLint y, GLsizei width, GLsizei height);

    undefined shaderSource(WebGLShader shader, DOMString source);

    undefined stencilFunc(GLenum func, GLint ref, GLuint mask);
    undefined stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
    undefined stencilMask(GLuint mask);
    undefined stencilMaskSeparate(GLenum face, GLuint mask);
    undefined stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
    undefined stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);

    undefined texParameterf(GLenum target, GLenum pname, GLfloat param);
    undefined texParameteri(GLenum target, GLenum pname, GLint param);

    undefined uniform1f(WebGLUniformLocation? location, GLfloat x);
    undefined uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);
    undefined uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);
    undefined uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);

    undefined uniform1i(WebGLUniformLocation? location, GLint x);
    undefined uniform2i(WebGLUniformLocation? location, GLint x, GLint y);
    undefined uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);
    undefined uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);

    undefined useProgram(WebGLProgram? program);
    undefined validateProgram(WebGLProgram program);

    undefined vertexAttrib1f(GLuint index, GLfloat x);
    undefined vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);
    undefined vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);
    undefined vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);

    undefined vertexAttrib1fv(GLuint index, Float32List values);
    undefined vertexAttrib2fv(GLuint index, Float32List values);
    undefined vertexAttrib3fv(GLuint index, Float32List values);
    undefined vertexAttrib4fv(GLuint index, Float32List values);

    undefined vertexAttribPointer(GLuint index, GLint size, GLenum type,
                                  GLboolean normalized, GLsizei stride, GLintptr offset);

    undefined viewport(GLint x, GLint y, GLsizei width, GLsizei height);
};

interface mixin WebGLRenderingContextOverloads
{
    undefined bufferData(GLenum target, GLsizeiptr size, GLenum usage);
    undefined bufferData(GLenum target, AllowSharedBufferSource? data, GLenum usage);
    undefined bufferSubData(GLenum target, GLintptr offset, AllowSharedBufferSource data);

    undefined compressedTexImage2D(GLenum target, GLint level, GLenum internalformat,
                                   GLsizei width, GLsizei height, GLint border,
                                   [AllowShared] ArrayBufferView data);
    undefined compressedTexSubImage2D(GLenum target, GLint level,
                                      GLint xoffset, GLint yoffset,
                                      GLsizei width, GLsizei height, GLenum format,
                                      [AllowShared] ArrayBufferView data);

    undefined readPixels(GLint x, GLint y, GLsizei width, GLsizei height,
                         GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);

    undefined texImage2D(GLenum target, GLint level, GLint internalformat,
                         GLsizei width, GLsizei height, GLint border, GLenum format,
                         GLenum type, [AllowShared] ArrayBufferView? pixels);
    undefined texImage2D(GLenum target, GLint level, GLint internalformat,
                         GLenum format, GLenum type, TexImageSource source); // May throw DOMException

    undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
                            GLsizei width, GLsizei height,
                            GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
    undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset,
                            GLenum format, GLenum type, TexImageSource source); // May throw DOMException

    undefined uniform1fv(WebGLUniformLocation? location, Float32List v);
    undefined uniform2fv(WebGLUniformLocation? location, Float32List v);
    undefined uniform3fv(WebGLUniformLocation? location, Float32List v);
    undefined uniform4fv(WebGLUniformLocation? location, Float32List v);

    undefined uniform1iv(WebGLUniformLocation? location, Int32List v);
    undefined uniform2iv(WebGLUniformLocation? location, Int32List v);
    undefined uniform3iv(WebGLUniformLocation? location, Int32List v);
    undefined uniform4iv(WebGLUniformLocation? location, Int32List v);

    undefined uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
    undefined uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
    undefined uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);
};

[Exposed=(Window,Worker)]
interface WebGLRenderingContext
{
};
WebGLRenderingContext includes WebGLRenderingContextBase;
WebGLRenderingContext includes WebGLRenderingContextOverloads;

属性

以下属性可用:

canvas 类型为 (HTMLCanvasElement or OffscreenCanvas)
对创建此上下文的 canvas 元素或 OffscreenCanvas 对象的引用。
drawingBufferWidth 类型为 GLsizei
绘图缓冲区的实际宽度。如果实现无法满足请求的宽度或高度, 可能不同于 HTMLCanvasElementwidth 属性。
drawingBufferHeight 类型为 GLsizei
绘图缓冲区的实际高度。如果实现无法满足请求的宽度或高度, 可能不同于 HTMLCanvasElementheight 属性。
drawingBufferFormat 类型为 GLenum
绘图缓冲区的当前有效格式。 对于 alpha:truealpha:false, 初始分别为 RGBA8RGB8
drawingBufferColorSpace 类型为 PredefinedColorSpace (规范)
用于解释绘图缓冲区内容值的颜色空间。 更改此属性会导致绘图缓冲区被重新分配;其 当前内容会丢失。此属性会影响渲染上下文的屏幕显示, 以及当此上下文的绘图缓冲区绘制到 2D canvas 上下文、 或上传到另一个 WebGL 或 WebGPU 渲染 上下文中的纹理时的解释。
unpackColorSpace 类型为 PredefinedColorSpace (规范)
TexImageSource 源上传到此上下文中的纹理时, 这些源会转换到的颜色空间。

获取上下文信息

[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes()
如果 webgl context lost 标志已设置,则返回 null。否则,返回 实际 上下文参数的副本。

设置和获取状态

OpenGL ES 2.0 维护用于渲染的状态值。此 组中的所有调用,除非另有说明,均与其 OpenGL 对应项行为相同。

void activeTexture(GLenum texture) (OpenGL ES 2.0 §3.7手册 页)
void blendColor(GLfloat red, GLfloat green, GLfloat blue, GLfloat alpha) (OpenGL ES 2.0 §4.1.6手册页)
在 WebGL 1.0 中,除非启用了 EXT_color_buffer_half_float 或 WEBGL_color_buffer_float,否则 blendColor 会将其实参限制到 0 到 1 范围。
void blendEquation(GLenum mode) (OpenGL ES 2.0 §4.1.6手册 页)
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha) (OpenGL ES 2.0 §4.1.6手册 页)
void blendFunc(GLenum sfactor, GLenum dfactor) (OpenGL ES 2.0 §4.1.6手册页)
有关 WebGL 施加的限制,参见 使用常量颜色混合
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha) (OpenGL ES 2.0 §4.1.6手册 页)
有关 WebGL 施加的限制,参见 使用常量颜色混合
void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha) (OpenGL ES 2.0 §4.2.3手册页)
void clearDepth(GLclampf depth) (OpenGL ES 2.0 §4.2.3手册页)
depth 值会被限制到 0 到 1 范围。
void clearStencil(GLint s) (OpenGL ES 2.0 §4.2.3手册 页)
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha) (OpenGL ES 2.0 §4.2.2手册页)
void cullFace(GLenum mode) (OpenGL ES 2.0 §3.5.1手册页)
void depthFunc(GLenum func) (OpenGL ES 2.0 §4.1.5手册页)
void depthMask(GLboolean flag) (OpenGL ES 2.0 §4.2.2手册页)
void depthRange(GLclampf zNear, GLclampf zFar) (OpenGL ES 2.0 §2.12.1手册页)
zNearzFar 值会被限制到 0 到 1 范围, 且 zNear 必须小于或等于 zFar;参见 视口深度范围
void disable(GLenum cap) (手册页)
void enable(GLenum cap) (手册页)
void frontFace(GLenum mode) (OpenGL ES 2.0 §3.5.1手册页)
any getParameter(GLenum pname) (glGet OpenGL ES 2.0 手册页) (glGetString OpenGL ES 2.0 手册页)
返回所传入 pname 的值。返回的类型是所请求 pname 的自然类型, 如下表所示:
pname 返回类型
ACTIVE_TEXTURE GLenum
ALIASED_LINE_WIDTH_RANGE Float32Array(含 2 个元素)
ALIASED_POINT_SIZE_RANGE Float32Array(含 2 个元素)
ALPHA_BITS GLint
ARRAY_BUFFER_BINDING WebGLBuffer
BLEND GLboolean
BLEND_COLOR Float32Array(含 4 个值)
BLEND_DST_ALPHA GLenum
BLEND_DST_RGB GLenum
BLEND_EQUATION_ALPHA GLenum
BLEND_EQUATION_RGB GLenum
BLEND_SRC_ALPHA GLenum
BLEND_SRC_RGB GLenum
BLUE_BITS GLint
COLOR_CLEAR_VALUE Float32Array(含 4 个值)
COLOR_WRITEMASK sequence<GLboolean>(含 4 个值)
COMPRESSED_TEXTURE_FORMATS Uint32Array
CULL_FACE GLboolean
CULL_FACE_MODE GLenum
CURRENT_PROGRAM WebGLProgram
DEPTH_BITS GLint
DEPTH_CLEAR_VALUE GLfloat
DEPTH_FUNC GLenum
DEPTH_RANGE Float32Array(含 2 个元素)
DEPTH_TEST GLboolean
DEPTH_WRITEMASK GLboolean
DITHER GLboolean
ELEMENT_ARRAY_BUFFER_BINDING WebGLBuffer
FRAMEBUFFER_BINDING WebGLFramebuffer
FRONT_FACE GLenum
GENERATE_MIPMAP_HINT GLenum
GREEN_BITS GLint
IMPLEMENTATION_COLOR_READ_FORMAT GLenum
IMPLEMENTATION_COLOR_READ_TYPE GLenum
LINE_WIDTH GLfloat
MAX_COMBINED_TEXTURE_IMAGE_UNITS GLint
MAX_CUBE_MAP_TEXTURE_SIZE GLint
MAX_FRAGMENT_UNIFORM_VECTORS GLint
MAX_RENDERBUFFER_SIZE GLint
MAX_TEXTURE_IMAGE_UNITS GLint
MAX_TEXTURE_SIZE GLint
MAX_VARYING_VECTORS GLint
MAX_VERTEX_ATTRIBS GLint
MAX_VERTEX_TEXTURE_IMAGE_UNITS GLint
MAX_VERTEX_UNIFORM_VECTORS GLint
MAX_VIEWPORT_DIMS Int32Array(含 2 个元素)
PACK_ALIGNMENT GLint
POLYGON_OFFSET_FACTOR GLfloat
POLYGON_OFFSET_FILL GLboolean
POLYGON_OFFSET_UNITS GLfloat
RED_BITS GLint
RENDERBUFFER_BINDING WebGLRenderbuffer
RENDERER DOMString
SAMPLE_ALPHA_TO_COVERAGE GLboolean
SAMPLE_BUFFERS GLint
SAMPLE_COVERAGE GLboolean
SAMPLE_COVERAGE_INVERT GLboolean
SAMPLE_COVERAGE_VALUE GLfloat
SAMPLES GLint
SCISSOR_BOX Int32Array(含 4 个元素)
SCISSOR_TEST GLboolean
SHADING_LANGUAGE_VERSION DOMString
STENCIL_BACK_FAIL GLenum
STENCIL_BACK_FUNC GLenum
STENCIL_BACK_PASS_DEPTH_FAIL GLenum
STENCIL_BACK_PASS_DEPTH_PASS GLenum
STENCIL_BACK_REF GLint
STENCIL_BACK_VALUE_MASK GLuint
STENCIL_BACK_WRITEMASK GLuint
STENCIL_BITS GLint
STENCIL_CLEAR_VALUE GLint
STENCIL_FAIL GLenum
STENCIL_FUNC GLenum
STENCIL_PASS_DEPTH_FAIL GLenum
STENCIL_PASS_DEPTH_PASS GLenum
STENCIL_REF GLint
STENCIL_TEST GLboolean
STENCIL_VALUE_MASK GLuint
STENCIL_WRITEMASK GLuint
SUBPIXEL_BITS GLint
TEXTURE_BINDING_2D WebGLTexture
TEXTURE_BINDING_CUBE_MAP WebGLTexture
UNPACK_ALIGNMENT GLint
UNPACK_COLORSPACE_CONVERSION_WEBGL GLenum
UNPACK_FLIP_Y_WEBGL GLboolean
UNPACK_PREMULTIPLY_ALPHA_WEBGL GLboolean
VENDOR DOMString
VERSION DOMString
VIEWPORT Int32Array(含 4 个元素)

所有返回序列或 typed arrays 的查询每次都返回一个新对象。

如果 pname 不在上表中,则生成 INVALID_ENUM 错误并返回 null。

如果 pnameIMPLEMENTATION_COLOR_READ_FORMATIMPLEMENTATION_COLOR_READ_TYPE,且当前绑定的 framebuffer 不是 framebuffer complete,则生成 INVALID_OPERATION 错误并 返回 null。

以下 pname 实参返回描述当前 WebGL 实现某方面的字符串:

VERSION 返回形如 WebGL<space>1.0<optional><space><vendor-specific information></optional> 的版本或发布编号。
SHADING_LANGUAGE_VERSION 返回形如 WebGL<space>GLSL<space>ES<space>1.0<optional><space><vendor-specific information></optional> 的版本或发布编号。
VENDOR 返回负责此 WebGL 实现的公司。此名称不会随版本发布而改变。
RENDERER 返回渲染器的名称。此名称通常特定于某个硬件平台的特定配置。 它不会随版本发布而改变。

有关查询当前 WebGL 实现中可用扩展的信息,参见 扩展查询

[WebGLHandlesContextLoss] GLenum getError() (OpenGL ES 2.0 §2.5手册页)
如果上下文的 webgl context lost 标志已设置, 则此方法第一次被调用时返回 CONTEXT_LOST_WEBGL。 随后,在上下文恢复之前返回 NO_ERROR
void hint(GLenum target, GLenum mode) (OpenGL ES 2.0 §5.2手册页)
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap) (OpenGL ES 2.0 §6.1.1手册页)
对于任何 isEnabled 查询,都可以通过 getParameter 获得相同的布尔值。

如果上下文的 webgl context lost 标志已设置,则返回 false。
void lineWidth(GLfloat width) (OpenGL ES 2.0 §3.4手册页)
有关为 WebGL 指定的限制,参见 NaN 线宽
void pixelStorei(GLenum pname, GLint param) (OpenGL ES 2.0 §3.6.1手册页)
除了 OpenGL ES 2.0 规范中的参数之外,WebGL 规范还接受参数 UNPACK_FLIP_Y_WEBGLUNPACK_PREMULTIPLY_ALPHA_WEBGLUNPACK_COLORSPACE_CONVERSION_WEBGL。关于这些参数的文档, 参见 像素 存储参数
void polygonOffset(GLfloat factor, GLfloat units) (OpenGL ES 2.0 §3.5.2手册 页)
void sampleCoverage(GLclampf value, GLboolean invert) (OpenGL ES 2.0 §4.1.3手册 页)
void stencilFunc(GLenum func, GLint ref, GLuint mask) (OpenGL ES 2.0 §4.1.4手册页)
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask) (OpenGL ES 2.0 §4.1.4手册 页)
有关可允许实参值的 WebGL 特有限制信息,参见 模板分离掩码和参考值
void stencilMask(GLuint mask) (OpenGL ES 2.0 §4.2.2手册页)
有关可允许掩码值的 WebGL 特有限制信息,参见 模板分离掩码和参考值
void stencilMaskSeparate(GLenum face, GLuint mask) (OpenGL ES 2.0 §4.2.2手册 页)
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass) (OpenGL ES 2.0 §4.1.4手册页)
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass) (OpenGL ES 2.0 §4.1.4手册 页)

查看和裁剪

绘图命令只能修改当前绑定的 framebuffer 内部的像素。此外, 视口和剪裁框也会影响绘图。

视口指定从归一化设备坐标到窗口坐标的 x 和 y 仿射变换。 视口的大小最初按 WebGL 视口 一节中的规定确定。 剪裁框定义一个限制绘图的矩形。当启用剪裁测试时, 只有位于剪裁框内的像素才能被绘图命令修改, 包括 clear,并且图元只能绘制在视口、 当前绑定的 framebuffer 和剪裁框的交集内。当未启用剪裁 测试时,图元只能绘制在视口和当前绑定的 framebuffer 的交集内。

void scissor(GLint x, GLint y, GLsizei width, GLsizei height) (OpenGL ES 2.0 §4.1.2手册页)
void viewport(GLint x, GLint y, GLsizei width, GLsizei height) (OpenGL ES 2.0 §2.12.1手册页)

Buffer 对象

Buffer 对象(有时称为 VBO)保存 GLSL shader 的顶点属性数据。

void bindBuffer(GLenum target, WebGLBuffer? buffer) (OpenGL ES 2.0 §2.9手册页)
如果 buffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将给定的 WebGLBuffer 对象绑定到给定的绑定点(target),即 ARRAY_BUFFER 或 ELEMENT_ARRAY_BUFFER。如果 buffer 为 null,则当前 绑定到此 target 的任何 buffer 都将解除绑定。给定的 WebGLBuffer 对象 在其生命周期中只能绑定到 ARRAY_BUFFER 或 ELEMENT_ARRAY_BUFFER target 之一。 尝试将 buffer 对象绑定到另一个 target 将生成 INVALID_OPERATION 错误, 且当前绑定保持不变。 尝试绑定一个已标记为删除的对象将生成 INVALID_OPERATION 错误,且当前绑定保持不变。
void bufferData(GLenum target, GLsizeiptr size, GLenum usage) (OpenGL ES 2.0 §2.9手册页)
为传入的 target 设置当前绑定的 WebGLBuffer 对象的大小。该 buffer 会初始化为 0。
void bufferData(GLenum target, AllowSharedBufferSource? data, GLenum usage) (OpenGL ES 2.0 §2.9手册页)
将传入 target 的当前绑定 WebGLBuffer 对象的大小设置为 传入 data 的大小,然后将 data 的内容写入 buffer 对象。

如果传入的 data 为 null,则生成 INVALID_VALUE 错误。

void bufferSubData(GLenum target, GLintptr offset, AllowSharedBufferSource data) (OpenGL ES 2.0 §2.9手册 页)

对于绑定到传入 target 的 WebGLBuffer 对象,从传入的 offset 开始写入传入的 data。如果 data 会被写到 buffer 对象末尾之外, 则生成 INVALID_VALUE 错误。如果 data 为 null, 则生成 INVALID_VALUE 错误。
WebGLBuffer createBuffer() (OpenGL ES 2.0 §2.9,类似于 glGenBuffers)
创建一个 WebGLBuffer 对象,并像调用 glGenBuffers 一样用一个 buffer 对象名称初始化它。
void deleteBuffer(WebGLBuffer? buffer) (OpenGL ES 2.0 §2.9,类似于 glDeleteBuffers)
如果 buffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLBuffer 中包含的 buffer 对象标记为删除, 就像调用 glDeleteBuffers 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
any getBufferParameter(GLenum target, GLenum pname) (OpenGL ES 2.0 §6.1.3,类似于 glGetBufferParameteriv)
返回传入 pname 的值。返回的类型是所请求 pname 的自然类型, 如下表所示:
pname 返回类型
BUFFER_SIZE GLint
BUFFER_USAGE GLenum

如果 pname 不在上表中,则生成 INVALID_ENUM 错误。

如果生成 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer) (OpenGL ES 2.0 §6.1.6手册页)
如果传入的 WebGLBuffer 有效则返回 true,否则返回 false。

如果 buffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 buffer 的 invalidated 标志已设置,则返回 false。

Framebuffer 对象

Framebuffer 对象提供绘图缓冲区之外的替代渲染目标。它们 是颜色、alpha、深度和模板缓冲区的集合,常用于 渲染之后会被用作纹理的图像。

void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer) (OpenGL ES 2.0 §4.4.1手册 页)
如果 framebuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将给定的 WebGLFramebuffer 对象绑定到给定的绑定点 (target),其必须为 FRAMEBUFFER。 如果 framebuffer 为 null,则绑定由上下文提供的默认 framebuffer, 并且尝试修改或查询 target FRAMEBUFFER 上的状态将生成 INVALID_OPERATION 错误。 尝试绑定一个已标记为删除的对象将生成 INVALID_OPERATION 错误,且当前绑定保持不变。
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target) (OpenGL ES 2.0 §4.4.5手册 页)
如果上下文的 webgl context lost 标志已设置, 则返回 FRAMEBUFFER_UNSUPPORTED
WebGLFramebuffer createFramebuffer() (OpenGL ES 2.0 §4.4.1,类似于 glGenFramebuffers)
创建一个 WebGLFramebuffer 对象,并像调用 glGenFramebuffers 一样 用一个 framebuffer 对象名称初始化它。
void deleteFramebuffer(WebGLFramebuffer? buffer) (OpenGL ES 2.0 §4.4.1,类似于 glDeleteFramebuffers)
如果 framebuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLFramebuffer 中包含的 framebuffer 对象标记为删除, 就像调用 glDeleteFramebuffers 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer) (OpenGL ES 2.0 §4.4.3手册 页)
如果 renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level) (OpenGL ES 2.0 §4.4.3手册 页)
如果 texture 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname) (OpenGL ES 2.0 §6.1.3,类似于 glGetFramebufferAttachmentParameteriv)
在给定传入 target 和 attachment 的情况下,返回传入 pname 的值。返回的 类型是所请求 pname 的自然类型,如下表所示:
pname 返回类型
FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE GLenum
FRAMEBUFFER_ATTACHMENT_OBJECT_NAME WebGLRenderbuffer 或 WebGLTexture
FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL GLint
FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE GLint

如果 pname 不在上表中,则生成 INVALID_ENUM 错误。

如果生成 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer) (OpenGL ES 2.0 §6.1.7手册 页)
如果传入的 WebGLFramebuffer 有效则返回 true,否则返回 false。

如果 framebuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 framebuffer 的 invalidated 标志已设置,则返回 false。

Renderbuffer 对象

Renderbuffer 对象用于为 framebuffer 对象中使用的各个缓冲区 提供存储。

void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer) (OpenGL ES 2.0 §4.4.3手册 页)
如果 renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将给定的 WebGLRenderbuffer 对象绑定到给定的绑定点 (target),其必须为 RENDERBUFFER。 如果 renderbuffer 为 null,则当前绑定到 此 target 的 renderbuffer 对象会被解除绑定。 尝试绑定一个已标记为删除的对象将生成 INVALID_OPERATION 错误,且当前绑定保持不变。
WebGLRenderbuffer createRenderbuffer() (OpenGL ES 2.0 §4.4.3,类似于 glGenRenderbuffers)
创建一个 WebGLRenderbuffer 对象,并像调用 glGenRenderbuffers 一样 用一个 renderbuffer 对象名称初始化它。
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer) (OpenGL ES 2.0 §4.4.3,类似于 glDeleteRenderbuffers)
如果 renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLRenderbuffer 中包含的 renderbuffer 对象标记为删除, 就像调用 glDeleteRenderbuffers 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
any getRenderbufferParameter(GLenum target, GLenum pname) (OpenGL ES 2.0 §6.1.3,类似于 glGetRenderbufferParameteriv)
在给定传入 target 的情况下,返回传入 pname 的值。返回的类型 是所请求 pname 的自然类型,如下表所示:
pname 返回类型
RENDERBUFFER_WIDTH GLint
RENDERBUFFER_HEIGHT GLint
RENDERBUFFER_INTERNAL_FORMAT GLenum
RENDERBUFFER_RED_SIZE GLint
RENDERBUFFER_GREEN_SIZE GLint
RENDERBUFFER_BLUE_SIZE GLint
RENDERBUFFER_ALPHA_SIZE GLint
RENDERBUFFER_DEPTH_SIZE GLint
RENDERBUFFER_STENCIL_SIZE GLint

如果 pname 不在上表中,则生成 INVALID_ENUM 错误。

如果生成 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer) (OpenGL ES 2.0 §6.1.7手册 页)
如果传入的 WebGLRenderbuffer 有效则返回 true,否则返回 false。

如果 renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 renderbuffer 的 invalidated 标志已设置,则返回 false。
void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height) (OpenGL ES 2.0 §4.4.3手册 页)

Texture 对象

Texture 对象为纹理操作提供存储和状态。如果没有绑定 WebGLTexture (例如,向 bindTexture 传递 null 或 0),则尝试修改或查询该 texture 对象 应生成 INVALID_OPERATION 错误。这会在下面的函数中说明。

void bindTexture(GLenum target, WebGLTexture? texture) (OpenGL ES 2.0 §3.7.13手册页)
如果 texture 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

尝试绑定一个已标记为删除的对象将生成 INVALID_OPERATION 错误,且当前绑定保持不变。

void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView pixels) (OpenGL ES 2.0 §3.7.3手册 页)

void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView pixels) (OpenGL ES 2.0 §3.7.3手册 页)

如果在没有绑定 WebGLTexture 的情况下尝试调用这些函数(见上文), 则生成 INVALID_OPERATION 错误。

核心 WebGL 规范未定义任何受支持的压缩纹理格式。 默认情况下,这些方法生成 INVALID_ENUM 错误并立即返回。 参见 压缩纹理支持
void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border) (OpenGL ES 2.0 §3.7.2手册 页)
一个 [读取操作]
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

此函数表现得就像先以 null 数据调用 texImage2D, 随后调用 copyTexSubImage2D。 与 copyTexSubImage2D 一样,对于任何位于 framebuffer 之外的源像素,对应的目标 texel 保持不变, 因而它们会保留如同以 null 数据调用 texImage2D 时那样 被零初始化的内容。 这具有综合效果:对于位于 framebuffer 之外的源像素,对应目标像素的关联 texel 的所有通道都将初始化为 0; 参见 读取 Framebuffer 之外的像素

如果此函数尝试从缺少附件的完整 framebuffer 读取, 则根据 从缺失附件读取 生成 INVALID_OPERATION 错误。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height) (OpenGL ES 2.0 §3.7.2手册 页)
一个 [读取操作]
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

对于位于 frame buffer 之外的任何像素,对应的目标像素保持不变; 参见 读取 Framebuffer 之外的像素

如果此函数尝试从缺少附件的完整 framebuffer 读取, 则根据 从缺失附件读取 生成 INVALID_OPERATION 错误。
WebGLTexture createTexture() (OpenGL ES 2.0 §3.7.13手册页)
创建一个 WebGLTexture 对象,并像调用 glGenTextures 一样 用一个 texture 对象名称初始化它。
void deleteTexture(WebGLTexture? texture) (OpenGL ES 2.0 §3.7.13手册 页)
如果 texture 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLTexture 中包含的 texture 对象标记为删除, 就像调用 glDeleteTextures 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
void generateMipmap(GLenum target) (OpenGL ES 2.0 §3.7.11手册 页)
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。
any getTexParameter(GLenum target, GLenum pname) (OpenGL ES 2.0 §6.1.3手册 页)
在给定传入 target 的情况下,返回传入 pname 的值。返回的类型是所请求 pname 的自然类型, 如下表所示:
pname 返回类型
TEXTURE_MAG_FILTER GLenum
TEXTURE_MIN_FILTER GLenum
TEXTURE_WRAP_S GLenum
TEXTURE_WRAP_T GLenum

如果 pname 不在上表中,则生成 INVALID_ENUM 错误。

如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文),则生成 INVALID_OPERATION 错误。

如果生成 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture) (OpenGL ES 2.0 §6.1.4手册页)
如果传入的 WebGLTexture 有效则返回 true,否则返回 false。

如果 texture 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 texture 的 invalidated 标志已设置,则返回 false。
void texImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels) (OpenGL ES 2.0 §3.7.1手册页)
如果 pixels 为 null,则传入一个足够大小且初始化为 0 的 buffer。

如果 pixels 非 null,则 pixels 的类型必须与 要读取的数据类型匹配。如果它是 UNSIGNED_BYTE,则必须提供 Uint8Array 或 Uint8ClampedArray;如果它是 UNSIGNED_SHORT_5_6_5、UNSIGNED_SHORT_4_4_4_4 或 UNSIGNED_SHORT_5_5_5_1,则必须提供 Uint16Array。如果类型不匹配, 则生成 INVALID_OPERATION 错误。

如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

有关影响此函数行为的 WebGL 特定像素存储参数, 参见 像素存储参数

如果 pixels 非 null,但其大小小于由指定的 widthheightformattype 和像素存储参数所要求的大小,则生成 INVALID_OPERATION 错误。

void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource source) /* May throw DOMException */ (OpenGL ES 2.0 §3.7.1手册 页)

将给定元素或图像数据上传到当前绑定的 WebGLTexture。

纹理的宽度和高度按 纹理上传宽度和高度一节中的规定设置。

首先,从概念上将源图像数据转换为由 unpackColorSpace 属性指定的颜色空间,除非 the UNPACK_COLORSPACE_CONVERSION_WEBGL 像素存储参数设置 为 NONE

此颜色空间转换也适用于 ImageBitmap 对象,尽管 其他纹理解包参数不适用于 ImageBitmap,因为它们 应在 ImageBitmap 构造期间指定。 实现经验表明,在上传到 WebGL 纹理时尽可能晚地 执行 ImageBitmap 的颜色空间转换是有益的。
接下来,源图像数据会转换为由 formattype 实参指定的数据类型和格式,然后传输到 WebGL 实现。格式转换按下表执行。如果指定了会导致 从图像数据丢失精度位的打包像素格式,则必须发生此精度损失。

源 DOM 图像格式 目标 WebGL 格式
ALPHA RGB RGBA LUMINANCE LUMINANCE_ALPHA
灰度(1 通道) A = 255 (1.0) R = sourceGray
G = sourceGray
B = sourceGray
R = sourceGray
G = sourceGray
B = sourceGray
A = 255 (1.0)
L = sourceGray L = sourceGray
A = 255 (1.0)
灰度 + Alpha(2 通道) A = sourceAlpha R = sourceGray
G = sourceGray
B = sourceGray
R = sourceGray
G = sourceGray
B = sourceGray
A = sourceAlpha
L = sourceGray
L = sourceGray
A = sourceAlpha
颜色(3 通道) A = 255 (1.0) R = sourceRed
G = sourceGreen
B = sourceBlue
R = sourceRed
G = sourceGreen
B = sourceBlue
A = 255 (1.0)
L = sourceRed L = sourceRed
A = 255 (1.0)
颜色 + Alpha(4 通道) A = sourceAlpha R = sourceRed
G = sourceGreen
B = sourceBlue
R = sourceRed
G = sourceGreen
B = sourceBlue
A = sourceAlpha
L = sourceRed L = sourceRed
A = sourceAlpha

有关当此函数以 ImageBitmap 之外的任何实参类型调用时 影响其行为的 WebGL 特定像素存储参数, 参见 像素存储参数

从源传输到 WebGL 实现的第一个像素对应于源的左上角。 此行为会被 UNPACK_FLIP_Y_WEBGL 像素存储 参数修改,但 ImageBitmap 实参除外,如上述 章节所述。

如果源是包含每通道 8 位的 RGB 或 RGBA 无损图像的 HTMLImageElementImageBitmap,浏览器保证 保留所有通道的完整精度。

如果原始 HTMLImageElement 包含 alpha 通道,并且 UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数为 false, 则保证 RGB 值从未被 alpha 通道预乘,无论这些值 是直接来自原始文件格式还是从某些其他颜色格式转换而来。

HTMLCanvasElement 或 OffscreenCanvas 的 CanvasRenderingContext2D 的某些实现会在内部以预乘形式存储颜色值。如果这样的 canvas 在 UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数 设置为 false 的情况下上传到 WebGL 纹理,则颜色通道必须被 alpha 通道 去乘,这是一种有损操作。因此,当颜色先通过 CanvasRenderingContext2D 绘制到 canvas,然后在 UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数设置为 false 时上传到 WebGL 纹理,WebGL 实现无法保证 alpha < 1.0 的颜色会被无损保留。
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

如果此函数以其 data 属性已被 neutered 的 ImageData 调用,则生成 INVALID_VALUE 错误。

如果此函数以已被 neutered 的 ImageBitmap 调用, 则生成 INVALID_VALUE 错误。

如果此函数以其来源不同于包含 Document 的来源的 HTMLImageElementHTMLVideoElement 调用, 或以其位图的 origin-clean 标志设置为 false 的 HTMLCanvasElementImageBitmapOffscreenCanvas 调用, 则必须抛出 SECURITY_ERR 异常。 参见 源限制

如果 source 为 null,则生成 INVALID_VALUE 错误。

void texParameterf(GLenum target, GLenum pname, GLfloat param) (OpenGL ES 2.0 §3.7.4手册 页)
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。
void texParameteri(GLenum target, GLenum pname, GLint param) (OpenGL ES 2.0 §3.7.4手册 页)
如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。
void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels) (OpenGL ES 2.0 §3.7.2手册 页)
有关 formatpixels 实参的限制, 参见 texImage2D

如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

如果 type 与最初用于定义纹理的类型不匹配, 则生成 INVALID_OPERATION 错误。

如果 pixels 为 null,则生成 INVALID_VALUE 错误。

如果 pixels 非 null,但其大小小于由指定的 widthheightformattype 和像素存储参数所要求的大小,则生成 INVALID_OPERATION 错误。

有关影响此函数行为的 WebGL 特定像素存储参数, 参见 像素存储参数

void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source) /* May throw DOMException */ (OpenGL ES 2.0 §3.7.2手册 页)

使用给定元素或图像数据的内容更新当前绑定的 WebGLTexture 的子矩形。

已更新子矩形的宽度和高度按 纹理上传宽度和高度一节中的规定确定。

关于 formattype 实参的解释、WebGL 特定像素 存储参数的处理,以及输入可能发生的颜色空间变换, 参见 texImage2D

从源传输到 WebGL 实现的第一个像素对应于源的左上角。 此行为会被 UNPACK_FLIP_Y_WEBGL 像素存储 参数修改,但 ImageBitmap 实参除外,如上述 章节所述。

如果在没有绑定 WebGLTexture 的情况下尝试调用此函数(见上文), 则生成 INVALID_OPERATION 错误。

如果 type 与最初用于定义纹理的类型不匹配, 则生成 INVALID_OPERATION 错误。

如果此函数以其 data 属性已被 neutered 的 ImageData 调用,则生成 INVALID_VALUE 错误。

如果此函数以已被 neutered 的 ImageBitmap 调用, 则生成 INVALID_VALUE 错误。

如果此函数以其来源不同于包含 Document 的来源的 HTMLImageElementHTMLVideoElement 调用, 或以其位图的 origin-clean 标志设置为 false 的 HTMLCanvasElementImageBitmapOffscreenCanvas 调用, 则必须抛出 SECURITY_ERR 异常。参见 源限制

如果 source 为 null,则生成 INVALID_VALUE 错误。

Program 和 Shader

使用 OpenGL ES 2.0 进行渲染需要使用以 OpenGL ES 的着色语言 GLSL ES 编写的 shaders。 Shaders 必须以源字符串加载(shaderSource)、编译 (compileShader)并附加到一个 program(attachShader),该 program 必须被链接 (linkProgram),然后再被使用(useProgram)。

void attachShader(WebGLProgram program, WebGLShader shader) (OpenGL ES 2.0 §2.10.3手册 页)
如果 programshader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。
void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name) (OpenGL ES 2.0 §2.10.4手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

如果传入的 name 长于 最大 Uniform 和 Attribute 位置长度中定义的限制, 则生成 INVALID_VALUE 错误。

如果 nameGLSL 构造中规定的 WebGL 保留前缀之一开头, 则生成 INVALID_OPERATION 错误。

关于 WebGL 实现执行的额外验证,参见 GLSL 源字符集之外的字符
void compileShader(WebGLShader shader) (OpenGL ES 2.0 §2.10.1手册 页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

关于 WebGL 实现所强制执行的额外约束、额外支持的构造以及额外执行的验证, 参见 支持的 GLSL 构造最大 GLSL Token 大小GLSL 源字符集之外的 字符GLSL Shader 中结构的最大嵌套,以及 Uniform 和 Varying 的打包限制
WebGLProgram createProgram() (OpenGL ES 2.0 §2.10.3手册 页)
创建一个 WebGLProgram 对象,并像调用 glCreateProgram 一样用一个 program 对象名称初始化它。
WebGLShader? createShader(GLenum type) (OpenGL ES 2.0 §2.10.1手册 页)
创建一个 WebGLShader 对象,并像调用 glCreateShader 一样用一个 shader 对象名称初始化它。
void deleteProgram(WebGLProgram? program) (OpenGL ES 2.0 §2.10.3手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLProgram 中包含的 program 对象标记为删除, 就像调用 glDeleteProgram 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
void deleteShader(WebGLShader? shader) (OpenGL ES 2.0 §2.10.1手册 页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

将传入 WebGLShader 中包含的 shader 对象标记为删除, 就像调用 glDeleteShader 一样。 如果对象已经被标记为删除,则该调用没有效果。注意, 当 JS 对象被销毁时,底层 GL 对象会被自动标记为删除, 不过此方法允许作者提前将对象标记为删除。
void detachShader(WebGLProgram program, WebGLShader shader) (OpenGL ES 2.0 §2.10.3手册 页)
如果 programshader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program) (OpenGL ES 2.0 §6.1.8手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

返回一个表示附加到传入 program 的 shader 列表的新对象。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

any getProgramParameter(WebGLProgram program, GLenum pname) (OpenGL ES 2.0 §6.1.8,类似于 手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

在给定传入 program 的情况下,返回传入 pname 的值。返回的类型是所请求 pname 的自然类型,如下表所示:
pname 返回类型
DELETE_STATUS GLboolean
LINK_STATUS GLboolean
VALIDATE_STATUS GLboolean
ATTACHED_SHADERS GLint
ACTIVE_ATTRIBUTES GLint
ACTIVE_UNIFORMS GLint

如果 pname 不在上表中,则生成 INVALID_ENUM 错误并返回 null。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

DOMString? getProgramInfoLog(WebGLProgram program) (OpenGL ES 2.0 §6.1.8手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

any getShaderParameter(WebGLShader shader, GLenum pname) (OpenGL ES 2.0 §6.1.8,类似于 手册页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

在给定传入 shader 的情况下,返回传入 pname 的值。返回的类型是所请求 pname 的自然类型,如下表所示:
pname 返回类型
SHADER_TYPE GLenum
DELETE_STATUS GLboolean
COMPILE_STATUS GLboolean

如果 pname 不在上表中,则生成 INVALID_ENUM 错误并返回 null。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype) (OpenGL ES 2.0 §6.1.8,类似于 手册 页)

返回一个新的 WebGLShaderPrecisionFormat,描述指定 shader 数值格式的 范围和精度。shadertype 值可以是 FRAGMENT_SHADER 或 VERTEX_SHADER。precisiontype 值可以是 LOW_FLOAT、MEDIUM_FLOAT、HIGH_FLOAT、 LOW_INT、MEDIUM_INT 或 HIGH_INT。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

DOMString? getShaderInfoLog(WebGLShader shader) (OpenGL ES 2.0 §6.1.8手册 页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

DOMString? getShaderSource(WebGLShader shader) (OpenGL ES 2.0 §6.1.8手册 页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program) (OpenGL ES 2.0 §6.1.8手册页)
如果传入的 WebGLProgram 有效则返回 true,否则返回 false。

如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 program 的 invalidated 标志已设置,则返回 false。
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader) (OpenGL ES 2.0 §6.1.8手册页)
如果传入的 WebGLShader 有效则返回 true,否则返回 false。

如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则返回 false。

如果 shader 的 invalidated 标志已设置,则返回 false。
void linkProgram(WebGLProgram program) (OpenGL ES 2.0 §2.10.3手册页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

链接传入的 program 对象。行为细节由 OpenGL ES 2.0 规范定义,并带有以下澄清:linkProgram 是 此组中唯一影响传入 program 的链接状态以及其引用的内部可执行 代码的 API。将 shader 对象附加到 program 或从 program 分离、 修改附加到 program 的 shader 对象,或编译附加到 program 的 shader 对象等操作,既不会影响该 program 的链接状态,也不会影响 该 program 可能引用的可执行代码。

如果给定的 program 也是下面由 useProgram 定义的当前正在使用的 program 对象,则: 关于 WebGL 实现所强制执行的额外约束以及额外执行的验证, 参见 Uniform 和 Varying 的打包限制
void shaderSource(WebGLShader shader, DOMString source) (OpenGL ES 2.0 §2.10.1手册 页)
如果 shader 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

关于 WebGL 实现所强制执行的额外约束、额外支持的构造以及额外执行的验证, 参见 支持的 GLSL 构造最大 GLSL Token 大小GLSL 源字符集之外的 字符GLSL Shader 中结构的最大嵌套,以及 Uniform 和 Varying 的打包限制
void useProgram(WebGLProgram? program) (OpenGL ES 2.0 §2.10.3手册页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

void validateProgram(WebGLProgram program) (OpenGL ES 2.0 §2.10.5手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

Uniform 和 attribute

Shader 使用的值作为 uniform 或 vertex attribute 传入。

void disableVertexAttribArray(GLuint index) (OpenGL ES 2.0 §2.8手册 页)
void enableVertexAttribArray(GLuint index) (OpenGL ES 2.0 §2.8手册 页)
index 处的 vertex attribute 作为数组启用。 WebGL 对启用的 vertex attribute 施加了超出 OpenGL ES 2.0 的额外 规则;参见 启用的顶点属性和范围 检查
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index) (OpenGL ES 2.0 §2.10.4手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

返回一个新的 WebGLActiveInfo 对象,描述传入 program 对象中 传入 index 处的 vertex attribute 的大小、类型和名称。如果传入的 index 超出范围,则生成 INVALID_VALUE 错误并返回 null。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index) (OpenGL ES 2.0 §2.10.4手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

返回一个新的 WebGLActiveInfo 对象,描述传入 program 对象中 传入 index 处的 uniform 的大小、类型和名称。如果传入的 index 超出 范围,则生成 INVALID_VALUE 错误并返回 null。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name) (OpenGL ES 2.0 §2.10.4手册 页)
如果上下文的 webgl context lost 标志已设置, 则不生成错误,并且无论传入的参数如何都返回 -1。

如果传入的 programinvalidated 标志已设置, 则生成 INVALID_OPERATION 错误并返回 -1。

如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误并返回 -1。

如果 program 已被删除, 则生成 INVALID_VALUE 错误并返回 -1。

如果 program 未链接, 则生成 INVALID_OPERATION 错误并返回 -1。

如果传入的 name 长于 最大 Uniform 和 Attribute 位置长度中定义的限制, 则生成 INVALID_VALUE 错误并返回 -1。

如果传入的 name 包含 GLSL 源字符集之外的字符, 则生成 INVALID_VALUE 错误并返回 -1。

如果传入的 nameGLSL 构造中规定的 WebGL 保留前缀之一开头, 且上述错误条件均不适用,则不生成错误并返回 -1。
any getUniform(WebGLProgram program, WebGLUniformLocation location) (OpenGL ES 2.0 §6.1.8手册页)
如果 programlocation 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误。

返回传入 program 中传入 location 处的 uniform 值。返回的类型 取决于 uniform 类型,如下表所示:
uniform 类型 返回类型
boolean GLboolean
int GLint
float GLfloat
vec2 Float32Array(含 2 个元素)
ivec2 Int32Array(含 2 个元素)
bvec2 sequence<GLboolean>(含 2 个元素)
vec3 Float32Array(含 3 个元素)
ivec3 Int32Array(含 3 个元素)
bvec3 sequence<GLboolean>(含 3 个元素)
vec4 Float32Array(含 4 个元素)
ivec4 Int32Array(含 4 个元素)
bvec4 sequence<GLboolean>(含 4 个元素)
mat2 Float32Array(含 4 个元素)
mat3 Float32Array(含 9 个元素)
mat4 Float32Array(含 16 个元素)
sampler2D GLint
samplerCube GLint

所有返回序列或 typed arrays 的查询每次都返回一个新对象。

如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。

WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name) (OpenGL ES 2.0 §2.10.4手册 页)
如果 program 是由不同于此上下文的另一个 WebGLRenderingContext 生成的,则生成 INVALID_OPERATION 错误并返回 null。

如果 program 已被删除, 则生成 INVALID_VALUE 错误并返回 null。

如果 program 未链接, 则生成 INVALID_OPERATION 错误并返回 null。

如果传入的 name 长于 最大 Uniform 和 Attribute 位置长度中定义的限制, 则生成 INVALID_VALUE 错误并返回 null。

如果传入的 name 包含 GLSL 源字符集之外的字符, 则生成 INVALID_VALUE 错误并返回 null。

如果传入的 nameGLSL 构造中规定的 WebGL 保留前缀之一开头, 且上述错误条件均不适用,则不生成错误并返回 null。

返回一个新的 WebGLUniformLocation,它表示 program 对象内某个特定 uniform 变量的位置。如果 name 不对应于传入 program 中的活动 uniform 变量,则返回值为 null。
any getVertexAttrib(GLuint index, GLenum pname) (OpenGL ES 2.0 §6.1.8手册 页)
返回传入 index 处 vertex attribute 中由 pname 请求的信息。返回的 类型取决于所请求的信息,如下表所示:
pname 返回类型
VERTEX_ATTRIB_ARRAY_BUFFER_BINDING WebGLBuffer
VERTEX_ATTRIB_ARRAY_ENABLED GLboolean
VERTEX_ATTRIB_ARRAY_SIZE GLint
VERTEX_ATTRIB_ARRAY_STRIDE GLint
VERTEX_ATTRIB_ARRAY_TYPE GLenum
VERTEX_ATTRIB_ARRAY_NORMALIZED GLboolean
CURRENT_VERTEX_ATTRIB Float32Array(含 4 个元素)

所有返回序列或 typed arrays 的查询每次都返回一个新对象。

如果 pname 不在上表中,则生成 INVALID_ENUM 错误。

如果生成 OpenGL 错误,则返回 null。

[WebGLHandlesContextLoss] GLsizeiptr getVertexAttribOffset(GLuint index, GLenum pname) (OpenGL ES 2.0 §6.1.8,类似于 手册 页)
如果上下文的 webgl context lost 标志已设置,则返回 0。

void uniform[1234][fi](WebGLUniformLocation? location, ...)

void uniform[1234][fi]v(WebGLUniformLocation? location, ...)

void uniformMatrix[234]fv(WebGLUniformLocation? location, GLboolean transpose, ...) (OpenGL ES 2.0 §2.10.4手册页)

上述每个 uniform* 函数都会将指定的一个或多个 uniform 设置为所提供的 值。如果传入的 location 不为 null,且不是通过先前对 getUniformLocation 的调用从当前使用的 program 获得的, 则会生成 INVALID_OPERATION 错误。如果传入的 location 为 null,则传入的数据会被静默忽略, 且不会改变任何 uniform 变量。

如果传给任何向量形式(以 v 结尾的形式)的数组具有 无效长度,则会生成 INVALID_VALUE 错误。如果长度 对于所赋值类型来说太短,或不是该类型的整数倍,则该长度无效。
在某些实现上,使用 uniform1i 更新 sampler uniform 时已观察到性能问题。 为了改变 sampler uniform 引用的纹理,应优先将新纹理绑定到 该 uniform 引用的 texture unit,而不是使用 uniform1i 更新 uniform 本身。

void vertexAttrib[1234]f(GLuint index, ...)

void vertexAttrib[1234]fv(GLuint index, ...) (OpenGL ES 2.0 §2.7手册 页)

将传入 index 处的 vertex attribute 设置为给定的常量值。 即使中间有对 drawArraysdrawElements 的调用, 也保证通过 vertexAttrib 设置的值会从带有 CURRENT_VERTEX_ATTRIB 参数的 getVertexAttrib 函数返回。

如果传给任何向量形式(以 v 结尾的形式)的数组太短, 则会生成 INVALID_VALUE 错误。
void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset) (OpenGL ES 2.0 §2.8手册 页)
将当前绑定到 ARRAY_BUFFER target 的 WebGLBuffer 对象分配给传入 index 处的 vertex attribute。Size 是每个 attribute 的分量数。Stride 和 offset 的单位为字节。传入的 stride 和 offset 必须适合 传入的 type 和 size,否则会生成 INVALID_OPERATION 错误; 参见 Buffer 偏移和步长要求。如果 offset 为负,则会生成 INVALID_VALUE 错误。如果没有 WebGLBuffer 绑定到 ARRAY_BUFFER target,且 offset 非零, 则会生成 INVALID_OPERATION 错误。在 WebGL 中,最大支持的 stride 为 255;参见 顶点属性数据步长

绘制操作

OpenGL ES 2.0 有若干允许写入当前绑定的(draw)framebuffer 的调用。 WebGL 将所有此类调用归类为 [绘制操作]

此外,渲染可以定向到绘图缓冲区或 Framebuffer 对象。当渲染 定向到绘图缓冲区时,进行任何渲染调用都应导致 绘图缓冲区在下一次合成操作开始时呈现给 HTML 页面合成器。

这些调用包括但(由于扩展或 WebGL 2.0 中的新增内容)不限于:

例如, ANGLE_instanced_arrays 添加了 drawArraysInstancedANGLE,并且 WebGL 2.0 添加了 drawArraysInstanced

如果这些调用中的任一个尝试绘制到完整 framebuffer 的缺失附件, 则不会向该附件绘制任何内容,并且根据 绘制到缺失附件 不会生成错误。

void clear(GLbitfield mask) (OpenGL ES 2.0 §4.2.3手册页)
一个 [绘制操作]
void drawArrays(GLenum mode, GLint first, GLsizei count) (OpenGL ES 2.0 §2.8手册页)
一个 [绘制操作]
如果 first 为负,则会生成 INVALID_VALUE 错误。 如果 CURRENT_PROGRAM 为 null,则会生成 INVALID_OPERATION 错误。
void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset) (OpenGL ES 2.0 §2.8手册 页)
一个 [绘制操作]
使用当前绑定的 element array buffer 进行绘制。给定 offset 的单位为字节, 并且必须是给定 type 大小的有效倍数,否则会生成 INVALID_OPERATION 错误;此外 offset 必须非负,否则会生成 INVALID_VALUE 错误;参见 Buffer 偏移和步长要求。如果 count 大于零, 则必须有一个非 null 的 WebGLBuffer 绑定到 ELEMENT_ARRAY_BUFFER 绑定点,否则会生成 INVALID_OPERATION 错误。

如果 CURRENT_PROGRAM 为 null,则会生成 INVALID_OPERATION 错误。
WebGL 在调用 drawArraysdrawElements 期间会执行 OpenGL ES 2.0 规定之外的 额外错误检查。参见 启用的顶点 属性和范围检查
void finish() (OpenGL ES 2.0 §5.1手册页)
void flush() (OpenGL ES 2.0 §5.1手册页)

读取操作

OpenGL ES 2.0 有若干允许从当前绑定的(read)framebuffer 读取的调用。 WebGL 将所有此类调用归类为 [读取操作]

这些调用包括但(由于扩展或 WebGL 2.0 中的新增内容)不限于:

void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels) (OpenGL ES 2.0 §4.3.1手册页)
一个 [读取操作]
当前 framebuffer 中的像素会被读回到 ArrayBufferView 对象中。
使用 frame buffer 的指定矩形中的像素数据填充 pixels。 从 readPixels 返回的数据必须截至最近发送的绘图命令为止是最新的。

pixels 的类型必须与要读取的数据类型匹配。例如, 如果它是 UNSIGNED_BYTE,则必须提供 Uint8Array 或 Uint8ClampedArray; 如果它是 UNSIGNED_SHORT_5_6_5、UNSIGNED_SHORT_4_4_4_4 或 UNSIGNED_SHORT_5_5_5_1,则必须提供 Uint16Array;如果它是 FLOAT, 则必须提供 Float32Array。如果类型不匹配,则生成 INVALID_OPERATION 错误。

只接受两种 formattype 组合。 第一种是 format 为 RGBA 且 type 为 UNSIGNED_BYTE。 第二种是由实现选择的格式。此格式的 formattype 值可以分别通过使用符号常量 IMPLEMENTATION_COLOR_READ_FORMAT 和 IMPLEMENTATION_COLOR_READ_TYPE 调用 getParameter 来确定。 由实现选择的格式可能因当前绑定的渲染表面的格式而异。 不受支持的 formattype 组合 将生成 INVALID_OPERATION 错误。

由于 IMPLEMENTATION_COLOR_READ_[FORMAT,TYPE] 查询可能返回其他地方未使用的枚举, 将这些枚举提供给 readPixels 不一定会生成 INVALID_ENUM。

如果 pixels 为 null,则生成 INVALID_VALUE 错误。如果 pixels 非 null,但在考虑 pixel store 模式的情况下其大小不足以取回 指定矩形中的所有像素,则生成 INVALID_OPERATION 错误。

对于位于 frame buffer 之外的任何像素,对应的目标 buffer 范围 保持不变;参见 读取 Framebuffer 之外的像素

如果此函数尝试从缺少颜色附件的完整 framebuffer 读取, 则根据 从缺失附件读取 生成 INVALID_OPERATION 错误。

检测 context lost 事件

移动设备上的电源事件等情况可能导致 WebGL 渲染上下文 在任何时候丢失,并要求应用程序重建它; 更多细节参见 WebGLContextEvent。 以下方法有助于检测 context lost 事件。

[WebGLHandlesContextLoss] boolean isContextLost()
如果 webgl context lost 标志已设置,则返回 true,否则返回 false。

检测和启用扩展

WebGL 的实现不得支持任何额外的参数、常量或函数, 除非先通过扩展机制启用该功能。 getSupportedExtensions 函数返回此实现支持的扩展字符串数组。 通过将这些字符串之一传递给 getExtension 函数来启用扩展。 此调用返回一个对象,其中包含该扩展定义的任何常量或函数。 该对象的定义特定于扩展,并且必须由扩展规范定义。

一旦扩展被启用,只有在 WebGL 渲染上下文丢失时才会被禁用(见下文), 但 "WEBGL_lose_context" 扩展除外,它在任何上下文丢失期间仍保持活动。 被禁用扩展引用的任何对象,例如 getExtension 返回的对象, 不再与 WebGL 渲染上下文关联。任何派生自 WebGLObject 的 扩展对象都会将其 invalidated 标志设置为 true。上下文丢失后扩展方法的行为由 "WebGL 上下文"一节中的步骤定义。

没有其他机制可以禁用扩展。

对同一扩展字符串进行多次 getExtension 调用,在考虑 不区分 ASCII 大小写的比较时,只要该扩展处于启用状态,就必须返回同一个对象。 尝试在未先调用 getExtension 启用扩展的情况下使用扩展的任何功能, 必须生成适当的 GL 错误,且不得使用该功能。

本规范不定义任何扩展。单独的 WebGL 扩展注册表定义了特定 WebGL 实现可能支持的扩展。

sequence<DOMString>? getSupportedExtensions()
返回所有受支持扩展字符串的列表。
object? getExtension(DOMString name)
当且仅当 name 与从 getSupportedExtensions 返回的名称之一 是 ASCII 不区分大小写匹配 [HTML] 时, 返回一个对象;否则返回 null。 从 getExtension 返回的对象包含扩展提供的任何常量或函数。 如果扩展未定义任何常量或函数,则返回对象可以不含常量或函数, 但仍必须返回一个唯一对象。该对象用于表示扩展已被启用。

WebGLContextEvent

WebGL 会响应 WebGL 渲染上下文状态的重要变化生成 WebGLContextEvent 事件。事件使用 DOM Event System [DOM3EVENTS] 发送,并被派发到 与 WebGL 渲染上下文关联的 HTMLCanvasElement 或 OffscreenCanvas。 可触发 WebGLContextEvent 事件的状态变化类型包括 上下文丢失上下文恢复,以及 无法创建上下文

触发名为 e 的 WebGL 上下文事件是指, 使用 WebGLContextEvent 接口的 一个 event, 其 type 属性 [DOM4] 初始化为 e, 其 cancelable 属性初始化为 true, 并且其 isTrusted 属性 [DOM4] 初始化为 true, 要在给定对象处被 派发

[Exposed=(Window,Worker)]
interface WebGLContextEvent : Event {
    constructor(DOMString type, optional WebGLContextEventInit eventInit = {});
    readonly attribute DOMString statusMessage;
};

// EventInit is defined in the DOM4 specification.
dictionary WebGLContextEventInit : EventInit {
    DOMString statusMessage = "";
};

本节中所有被 排队 [HTML]taskstask sourceWebGL task source

属性

以下属性可用:

statusMessage 类型为 DOMString
包含额外信息的字符串;如果没有可用的额外信息,则为空字符串。

Context Lost 事件

当用户代理检测到与 WebGLRenderingContext context 关联的 drawing buffer 已丢失时,它必须运行以下步骤:

  1. canvascontextcanvas
  2. 如果 context 的 webgl context lost 标志 已设置,则中止这些步骤。
  3. 设置 contextwebgl context lost 标志。
  4. 设置此上下文创建的每个 WebGLObject 实例的 invalidated 标志
  5. 禁用除 "WEBGL_lose_context" 之外的所有扩展。
  6. 排队一个 task 以 执行以下步骤:
    1. canvas触发 WebGL context 事件, 事件名为 "webglcontextlost",并将其 statusMessage 属性设置 为 ""。
    2. 如果该 event 的 canceled flag 未设置,则中止这些步骤。
    3. 异步执行以下步骤。
    4. 等待一个可恢复的 drawing buffer
    5. 排队一个 task,以为 context 恢复 drawing buffer

在上下文丢失期间创建的 WebGLObject (例如通过 createBuffer() 创建的 WebGLBuffer) 在其生命周期开始时,其 invalidated 标志已设置。

以下代码阻止 webglcontextlost 事件的默认行为,并使 webglcontextrestored 事件能够被送达:
canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); 

Context Restored 事件

当用户代理要为 WebGLRenderingContext context 恢复 drawing buffer 时,它必须运行以下步骤:

  1. canvas 为与 context 关联的 canvas 对象。
  2. 如果 contextwebgl context lost flag 未设置,则中止这些步骤。
  3. 使用 contextcontext creation parameters 中指定的设置 创建一个 drawing buffer, 并将该 drawing buffercontext 关联, 丢弃任何先前的 drawing buffer
  4. 清除 contextwebgl context lost flag
  5. 重置 context 的 OpenGL 错误状态。
  6. canvas触发 WebGL context event, 名为 "webglcontextrestored",并将其 statusMessage 属性设置 为 ""。

一旦上下文被恢复,在上下文恢复之前创建的 WebGL 资源(例如纹理和缓冲区) 将不再有效。 先前启用的扩展不会被恢复。 应用程序需要恢复所有被修改的状态以及被销毁的扩展和资源。
以下代码说明应用程序如何处理上下文丢失和恢复:
function initializeGame() {
  initializeWorld();
  initializeResources();
}

function initializeResources() {
  initializeShaders();
  initializeBuffers();
  initializeTextures();

  // ready to draw, start the main loop
  renderFrame();
}

function renderFrame() {
  updateWorld();
  drawSkyBox();
  drawWalls();
  drawMonsters();

  requestId = window.requestAnimationFrame(
      renderFrame, canvas);
}

canvas.addEventListener(
    "webglcontextlost", function (event) {

  // inform WebGL that we handle context restoration
  event.preventDefault();

  // Stop rendering
  window.cancelAnimationFrame(requestId);
}, false);

canvas.addEventListener(
    "webglcontextrestored", function (event) {

  initializeResources();
}, false);

initializeGame();

Context Creation Error 事件

当用户代理要在 canvas触发 WebGL context creation error 时,它必须执行以下步骤:

  1. canvas触发 WebGL context event, 名为 "webglcontextcreationerror",可选地将其 statusMessage 属性设置为描述失败性质的平台相关字符串。

以下代码说明应用程序如何获取关于上下文创建失败的信息:
var errorInfo = "";
function onContextCreationError(event) {

  canvas.removeEventListener(
     "webglcontextcreationerror",
     onContextCreationError, false);

  errorInfo = e.statusMessage || "Unknown";
}

canvas.addEventListener(
    "webglcontextcreationerror",
    onContextCreationError, false);

var gl = canvas.getContext("webgl");
if(!gl) {
  alert("A WebGL context could not be created.\nReason: " +
        errorInfo);
}

WebGL 与 OpenGL ES 2.0 之间的差异

本节描述相对于 OpenGL ES 2.0 API 对 WebGL API 所做的更改, 以提高其在各种操作系统和设备之间的可移植性。

Buffer Object 绑定

在 WebGL API 中,给定的 buffer object 在其生命周期中只能绑定到 ARRAY_BUFFERELEMENT_ARRAY_BUFFER 绑定点之一。 此限制意味着给定的 buffer object 可以包含顶点或索引,但不能同时包含两者。

WebGLBuffer 的类型在它第一次作为实参传递给 bindBuffer 时初始化。 后续调用 bindBuffer 试图将同一个 WebGLBuffer 绑定到另一个 绑定点时,将生成 INVALID_OPERATION 错误,并且绑定点的状态 将保持不变。

无客户端侧数组

WebGL API 不支持客户端侧数组。

如果通过 enableVertexAttribArray 将 vertex attribute 作为数组启用, 但没有 buffer 绑定到该 attribute(通常通过 bindBuffervertexAttribPointer),则绘制命令(drawArraysdrawElements)将生成 INVALID_OPERATION 错误。

如果调用 indexed draw 命令(drawElements),且没有 WebGLBuffer 绑定到 ELEMENT_ARRAY_BUFFER 绑定点,则生成 INVALID_OPERATION 错误。

如果调用 vertexAttribPointer 时没有 WebGLBuffer 绑定到 ARRAY_BUFFER 绑定点,并且 offset 非零,则生成 INVALID_OPERATION 错误。

即使从不支持客户端侧数组,也允许将 VERTEX_ATTRIB_ARRAY_BUFFER_BINDING 设置为 null, 这允许将绑定清除回其原始状态,否则严格来说这是不可能的。

这也与 OpenGL ES 3.0.5 [GLES30] 第 25 页中 非默认 VAO 对象的行为相匹配。

无默认纹理

WebGL API 不支持默认纹理。必须绑定非 null 的 WebGLTexture 对象, 才能使与纹理相关的操作和查询成功。

无 Shader 二进制

WebGL API 不支持访问已编译 shader 的二进制表示。 这包括 OpenGL ES 2.0 的 ShaderBinary 入口点。 此外,WebGL API 不支持通过 getParameter 查询 shader 二进制格式和 shader 编译器的可用性。

所有 WebGL 实现都必须隐式支持在线 shader 编译器。

Buffer 偏移和步长要求

传递给 drawElementsvertexAttribPointeroffset 实参,以及传递给 vertexAttribPointerstride 实参,必须是传递给该调用的数据类型大小的倍数, 否则生成 INVALID_OPERATION 错误。

这强制执行 OpenGL ES 2.0.25 [GLES20] 第 24 页中的以下要求:

"Clients must align data elements consistent with the requirements of the client platform, with an additional base-level requirement that an offset within a buffer to a datum comprising N basic machine units be a multiple of N."

此外,传递给 drawElementsoffset 实参必须为非负, 否则生成 INVALID_VALUE 错误。

启用的顶点属性和范围检查

当调用需要为活动 vertex attribute 获取数据的绘图命令时, 如果该 attribute 被作为数组启用,无论是直接(drawArrays), 还是从 indexed draw 间接(drawElements), 绘图命令都可能请求 WebGLBuffer 边界之外的数据。 如果发生这种情况,则会导致以下行为之一:

  1. WebGL 实现可以生成 INVALID_OPERATION 错误,并且不绘制任何几何体。
  2. 越界顶点获取可以返回以下任一值:

此行为复制了 [KHRROBUSTACCESS] 中定义的行为。

如果 vertex attribute 被作为数组启用,且 buffer 绑定到该 attribute, 但该 attribute 未被当前 program 消费,则无论绑定 buffer 的大小如何, 它都不会导致在调用 drawArraysdrawElements 期间生成任何错误。

从 index buffer 进行越界获取

调用 indexed drawing 命令(drawElements)获取 ELEMENT_ARRAY_BUFFER 边界之外的 index 元素时,将导致 INVALID_OPERATION 错误。

Framebuffer Object 附件

WebGL 添加了 DEPTH_STENCIL_ATTACHMENT framebuffer object 附件点和 DEPTH_STENCIL renderbuffer internal format。要将 depth 和 stencil 缓冲区同时附加到 framebuffer object,请以 DEPTH_STENCIL internal format 调用 renderbufferStorage, 然后以 DEPTH_STENCIL_ATTACHMENT 附件点调用 framebufferRenderbuffer

附加到 DEPTH_ATTACHMENT 附件点的 renderbuffer 必须以 DEPTH_COMPONENT16 internal format 分配。附加到 STENCIL_ATTACHMENT 附件点的 renderbuffer 必须以 STENCIL_INDEX8 internal format 分配。附加到 DEPTH_STENCIL_ATTACHMENT 附件点的 renderbuffer 必须以 DEPTH_STENCIL internal format 分配。

在 WebGL API 中,同时将 renderbuffer 附加到以下附件点组合是错误:

如果违反上述任何约束,则: 以下 framebuffer object 附件组合,在所有附件均为 framebuffer attachment complete、 非零且具有相同宽度和高度时,必须使 framebuffer 成为 framebuffer complete:

纹理上传宽度和高度

除非显式指定 widthheight 参数, 否则由 texImage2D 设置的纹理宽度和高度, 以及由 texSubImage2D 更新的子矩形宽度和高度, 将基于所上传的 TexImageSource source 对象确定:

source 类型为 ImageData
纹理的宽度和高度设置为 ImageData 对象的 width 和 height 属性当前值,表示 ImageData 对象的实际像素宽度和高度。
source 类型为 HTMLImageElement
如果上传的是位图,则纹理的宽度和高度设置为所上传位图的像素宽度和高度。 如果上传的是 SVG 图像,则纹理的宽度和高度设置为 HTMLImageElement 对象的 width 和 height 属性当前值。
source 类型为 HTMLCanvasElementOffscreenCanvas
纹理的宽度和高度设置为 HTMLCanvasElementOffscreenCanvas 对象的 width 和 height 属性当前值。
source 类型为 HTMLVideoElementVideoFrame[WEBCODECS]
纹理的宽度和高度设置为视频中所上传帧的像素宽度和高度。

像素存储参数

WebGL API 支持以下额外参数传递给 pixelStorei

UNPACK_FLIP_Y_WEBGL 类型为 boolean
如果设置,则在任何后续对 texImage2DtexSubImage2D 的调用期间,源数据会沿垂直轴翻转, 使得概念上的最后一行成为第一个被传输的行。初始值为 false。 任何非零值均解释为 true
UNPACK_PREMULTIPLY_ALPHA_WEBGL 类型为 boolean
如果设置,则在任何后续对 texImage2DtexSubImage2D 的调用期间,如果源数据存在 alpha 通道, 则在数据传输期间将 alpha 通道乘入颜色通道。初始值为 false。 任何非零值均解释为 true
UNPACK_COLORSPACE_CONVERSION_WEBGL 类型为 unsigned long
如果设置为 BROWSER_DEFAULT_WEBGL,则浏览器的默认颜色空间转换 (例如将 display-p3 图像转换为 srgb) 会在后续接受 TexImageSource 实参的纹理数据上传调用 (例如 texImage2DtexSubImage2D)期间应用。 精确转换可能同时取决于浏览器和文件类型。 如果设置为 NONE,则不应用颜色空间转换,除了转换为 RGBA。 (例如,rec709 YUV 视频仍会转换为 rec709 RGB 数据,但随后不会再转换为例如 srgb RGB 数据) 初始值为 BROWSER_DEFAULT_WEBGL

如果 TexImageSourceImageBitmap,则这三个参数会被忽略。 取而代之的是,应使用等价的 ImageBitmapOptions 来创建具有所需格式的 ImageBitmap

读取 Framebuffer 之外的像素

对于 [读取操作], 从越界像素子区域的读取不会触及其对应的目标子区域。

WebGL(表现得像是)将资源预初始化为零。 因此,例如 copyTexImage2D 在对应于 framebuffer 越界读取的子区域中会有零。

模板分离掩码和参考值

在 WebGL API 中,如果启用了 stencil testing 且当前绑定的 framebuffer 具有 stencil buffer, 则在以下任一情况为 true 时进行绘制是非法的。 这样做将生成 INVALID_OPERATION 错误。

其中 maxStencilValue((1 << s) - 1), 其中 s 是 draw framebuffer 中 stencil 位的数量。 (当不存在 stencil 位时,这些检查总是通过。)

顶点属性数据步长

WebGL API 支持最高 255 字节的 vertex attribute 数据步长。 如果 stride 参数的值超过 255,则对 vertexAttribPointer 的调用将生成 INVALID_VALUE 错误。

视口深度范围

WebGL API 不支持将近裁剪平面映射到大于远裁剪平面值的深度范围。 如果 zNear 大于 zFar,则对 depthRange 的调用将生成 INVALID_OPERATION 错误。

使用常量颜色混合

在 WebGL API 中,constant color 和 constant alpha 不能在 blend function 中 同时用作 source 和 destination factors。如果两个因子之一设置为 CONSTANT_COLORONE_MINUS_CONSTANT_COLOR, 而另一个设置为 CONSTANT_ALPHAONE_MINUS_CONSTANT_ALPHA,则对 blendFunc 的调用将生成 INVALID_OPERATION 错误。如果 srcRGB 设置为 CONSTANT_COLORONE_MINUS_CONSTANT_COLOR, 且 dstRGB 设置为 CONSTANT_ALPHAONE_MINUS_CONSTANT_ALPHA,或反之,则对 blendFuncSeparate 的调用将生成 INVALID_OPERATION 错误。

定点支持

WebGL API 不支持 GL_FIXED 数据类型。

GLSL 构造

根据 支持的 GLSL 构造, 以 "webgl_" 和 "_webgl_" 开头的标识符保留供 WebGL 使用。

扩展查询

在 OpenGL ES 2.0 API 中,可用扩展通过调用 glGetString(GL_EXTENSIONS) 确定,它返回一个以空格分隔的扩展字符串列表。 在 WebGL API 中,EXTENSIONS 枚举已被移除。 取而代之的是,必须调用 getSupportedExtensions 来确定可用 扩展的集合。

压缩纹理支持

核心 WebGL 规范不定义任何受支持的压缩纹理格式。 因此,在没有启用任何其他扩展的情况下:

WebGL 实现应只暴露比未压缩形式更高效的压缩纹理格式。

最大 GLSL Token 大小

GLSL ES 规范 [GLES20GLSL] 未定义 token 长度限制。WebGL 要求支持长度最多为 256 个字符的 token。 包含超过 256 个字符 token 的 shader 必须编译失败。

GLSL 源字符集之外的字符

WebGL 支持将任何 HTML DOMString [DOMSTRING] 传递给 shaderSource 而不出错。 然而,在 shader 编译期间,在 GLSL 预处理和注释剥离之后,所有剩余字符 必须位于 [GLES20GLSL] 的字符集中。 否则,shader 必须编译失败。

具体而言,这允许:

GLSL ES 规范 [GLES20GLSL] 将 OpenGL ES shading language 的源字符集定义为 ISO/IEC 646:1991 的子集, 通常称为 ASCII [ASCII]。 某些 GLSL 实现不允许任何 ASCII 范围之外的字符,即使是在注释中。 虽然浏览器必须正确处理完整 DOMString 字符集的预处理, 但 WebGL 实现通常必须确保发送给 GLSL driver 的 shader 源只包含 ASCII, 以确保安全。 实现应保留用于调试目的的行号,必要时可以插入空行。

如果将包含在此集合中的字符的字符串传递给任何其他 shader 相关入口点 bindAttribLocationgetAttribLocation、 或 getUniformLocation, 将生成 INVALID_VALUE 错误。

GLSL Shader 中结构的最大嵌套

WebGL 对 GLSL shader 中结构的嵌套施加限制。当 struct 中的字段引用另一个 struct 类型时就会发生嵌套;GLSL ES 规范 [GLES20GLSL] 禁止嵌入式结构定义。 顶层 struct 定义中的字段具有 1 的嵌套级别。

WebGL 要求支持结构嵌套级别为 4。包含嵌套超过 4 层深结构的 shader 必须编译失败。

最大 Uniform 和 Attribute 位置长度

WebGL 对 uniform 和 attribute 位置的长度施加 256 个字符的限制。

字符串长度查询

在 WebGL API 中,枚举 INFO_LOG_LENGTHSHADER_SOURCE_LENGTHACTIVE_UNIFORM_MAX_LENGTHACTIVE_ATTRIBUTE_MAX_LENGTH 已被移除。在 OpenGL ES 2.0 API 中,需要这些枚举来确定传递给 glGetActiveAttrib 等调用的缓冲区大小。在 WebGL API 中, 类似的调用(getActiveAttribgetActiveUniformgetProgramInfoLoggetShaderInfoLoggetShaderSource)全都返回 DOMString

TexSubImage2D 调用中的纹理类型

在 WebGL API 中,传递给 texSubImage2Dtype 实参 必须匹配最初用于定义 texture object 的类型(即使用 texImage2D)。

Uniform 和 Varying 的打包限制

OpenGL ES Shading Language, Version 1.00 [GLES20GLSL] 附录 A 第 7 节 "Counting of Varyings and Uniforms" 定义了一个保守算法, 用于计算 shader 中所有 uniform 和 varying 变量所需的存储。 GLSL ES 规范要求,如果附录 A 中定义的打包算法成功, 则 shader 必须在目标平台上成功编译。WebGL API 进一步要求, 如果该打包算法对 shader 的 uniform 变量或对 program 的 varying 变量失败, 则编译或链接必须失败。

目标架构中的行数不是使用固定大小的寄存器网格,而是按以下方式确定:

上述文本定义了由于打包算法强制执行的约束而必须使 shader 或 program 的编译或链接失败的情况。不能保证使用了超过最小要求数量变量的 shader,即使其变量根据此算法成功打包,也一定能成功编译。 已在实现中观察到低效率情况,包括将标量数组展开以占用多个列。 开发者应避免过度依赖将多个变量自动打包到列中。相反,应定义更大的变量 (例如 vec4),并将值显式打包到最右侧列中。

纹理与 Framebuffer 之间的反馈循环

在 OpenGL ES 2.0 API 中,可以进行既写入又读取同一纹理的调用, 从而创建反馈循环。 其规定,当这些反馈循环存在时,将导致未定义行为。

在 WebGL API 中,这类会导致此类反馈循环的操作(根据 OpenGL ES 2.0 规范中的定义)将改为生成 INVALID_OPERATION 错误。

从缺失附件读取

在 OpenGL ES 2.0 API 中,当命令尝试从缺失附件获取数据时会发生什么并未指定, 例如从一个没有颜色附件的完整 framebuffer 对颜色数据执行 ReadPixels。

在 WebGL API 中,任何需要来自缺失附件的数据的 [读取操作] 都会 生成 INVALID_OPERATION 错误。

绘制到缺失附件

在 OpenGL ES 2.0 API 中,当命令尝试绘制到缺失附件时会发生什么并未指定, 例如从一个没有颜色附件的完整 framebuffer 清除 draw buffer。

在 WebGL API 中,任何绘制到缺失附件的 [绘制操作] 都不会向该附件绘制任何内容。不会生成错误。

NaN 线宽

在 WebGL API 中,如果传递给 lineWidthwidth 参数 设置为 NaN,则生成 INVALID_VALUE 错误,并且线宽不会改变。

Attribute 别名

应用程序可以将多个 attribute 名称绑定到同一个位置。 这称为 aliasing。当别名到同一位置的多个 attribute 在可执行 program 中处于活动状态时, linkProgram 应失败。

gl_Position 的初始值

GLSL ES [GLES20GLSL] 规范规定, 除非在 vertex shader 中写入 gl_Position,否则其值是未定义的。 WebGL 保证 gl_Position 的初始值为 (0,0,0,0)

GLSL ES 全局变量初始化

GLSL ES 1.00 [GLES20GLSL] 规范将全局变量 初始化器限制为常量表达式。在 WebGL API 中,允许在 GLSL ES 1.00 shader 的全局 变量初始化器中使用未以 const 限定符限定的其他全局变量和 uniform 值。 全局变量初始化器必须是全局初始化器表达式,其定义为以下之一:

以下内容不得用于全局初始化器表达式:

当全局变量初始化器违反未修改的 GLSL ES 规范时,即当全局变量初始化器 不是常量表达式时,编译器应生成警告。

此行为已在 WebGL 实现中存在多年。将此行为修正为与 GLSL ES 规范一致, 会对现有内容产生很大的兼容性影响。

GLSL ES 预处理器 "defined" 运算符

GLSL ES 预处理器规范引用的 C++ 标准规定,当在解析 #if#elif 指令的控制表达式时, defined 运算符由宏替换生成,则行为未定义。当 WebGL API 处理的 shader 代码在预处理器表达式内部的宏替换期间生成 token defined 时, 必须导致编译器错误。

这不会影响处理 defined 运算符的预处理器指令之外的宏展开。

在 C++ 标准中,使用 defined 作为宏名也具有未定义行为。 在 WebGL API 中,使用 defined 作为宏名必须导致编译器错误。

在原生 API 规范允许未定义行为的情况下,WebGL API 的行为应保持一致。

GLSL ES #extension 指令位置

GLSL ES 1.00 [GLES20GLSL] 规范规定, 除非扩展规范另有说明,#extension 指令必须出现在任何非预处理器 token 之前。在 WebGL API 中,在 GLSL ES 1.00 shader 中, #extension 指令始终可以出现在非预处理器 token 之后。 GLSL ES 1.00 shader 中 #extension 指令的作用域始终是整个 shader, 且较晚出现的 #extension 指令会针对整个 shader 覆盖较早看到的指令。

让扩展决定 #extension 指令应放置的位置,已经导致规范中存在很大的解释空间。 实际上 GLES 实现没有强制执行 GLSL ES 规范中写明的规则,WebGL 实现也没有,因此放宽该规则是使规范在兼容现有内容的同时定义良好的唯一方式。

Cube Map Framebuffer 附件的完整性

在 WebGL API 中,非 cube complete 的 cube map 面不是 framebuffer attachment complete。当附加了不完整 cube map 的面时,查询 framebuffer status 必须 返回 FRAMEBUFFER_INCOMPLETE_ATTACHMENT

WebGL 所实现于其上的 API,包括较新的 OpenGL core 版本以及 OpenGL ES 3.0 及更新版本,都要求用作 framebuffer attachment 的 cube map 面必须属于 cube complete cube map。参见例如 OpenGL ES 3.0.4 §4.4.4 "Framebuffer Completeness" 中的 "Framebuffer Attachment Completeness" 小节。

当前 program 为 null 时传输顶点

如果 CURRENT_PROGRAM 为 null,任何将顶点传输到 GL 的命令都会生成 INVALID_OPERATION。这包括 drawElementsdrawArrays

Fragment shader 输出

如果 fragment shader 既不写入 gl_FragColor 也不写入 gl_FragData,则 shader 执行后 fragment color 的值保持不变。

GLSL 局部和全局变量的初始值

GLSL ES [GLES20GLSL] 规范规定, 除非局部和全局变量由 shader 初始化,否则其值是未定义的。 WebGL 保证这些变量初始化为零: 0.0vec4(0.0)0false 等。

从归一化有符号整数到浮点的顶点属性转换

OpenGL ES 2.0 规范 [GLES20] 第 2.1.2 节 "Data Conversions",小节 "Conversion from Integer to Floating-Point", 将从归一化有符号整数 c(其类型的位宽为 b) 到浮点值 f 的转换定义为:

f = (2*c + 1) / (2^b - 1)
在将有符号归一化 vertex attribute 转换为浮点期间,WebGL 1.0 实现可以可选地使用此保留零的转换规则:
f = max(c / (2^(b - 1) - 1), -1.0)
WebGL 1.0 构建于其上的某些 API 使用第二种规则,并且由于此转换 在固定功能硬件中完成,因此无法模拟一种行为或另一种行为。 此行为差异不会影响大多数应用程序,因此尚未向 WebGL 渲染上下文添加 用于确定正在使用哪种行为的查询。

Uniform 和 attribute 名称冲突

如果附加到 WebGL program 的任一 shader 声明了一个与静态使用的 vertex attribute 同名的 uniform,则 program 链接应失败。

此行为不同于 GLSL ES 3.00.6 第 12.47 节中指定的行为。
WebGL 实现多年来一直强制执行此行为,因为某些 OpenGL 驱动程序不接受具有相同名称的 uniform 和 vertex attribute。

宽点图元裁剪

如果顶点位于裁剪体之外,但位于近裁剪平面和远裁剪平面之间, POINTS 图元可能会被丢弃,也可能不会被丢弃。

宽点的裁剪在 GLES 和 GL 中行为不同,并且这种行为差异对于实现来说 难以规避。

OpenGL ES 2.0.25 第 46 页:

If the primitive under consideration is a point, then clipping discards it if it lies outside the near or far clip plane; otherwise it is passed unchanged.

OpenGL 3.2 Core 第 97 页:

If the primitive under consideration is a point, then clipping passes it unchanged if it lies within the clip volume; otherwise, it is discarded.

链接不成功时当前 program 失效

在 WebGL API 中,如果传递给 linkProgram 的 program 也是 由 useProgram 定义的当前正在使用的 program 对象,并且链接不成功, 则当前渲染状态引用的可执行代码会立即失效。继续使用当前 program 的绘制调用会生成 INVALID_OPERATION 错误。

对重新链接失败的 program 立即拒绝绘制调用,可以使 WebGL 实现更加健壮。OpenGL ES API 的行为是,在当前 program 被更改之前保留当前可执行文件。 在所有场景中正确实现此行为具有挑战性,并且曾导致安全漏洞。

Shader 标识符中的双下划线

shader 中的标识符可以包含双下划线,例如 "g__Foo"

为确保稳健的可移植性,即使底层 driver 不支持此特性,实现也应支持它。 (例如通过名称改写)

参考文献

[CANVAS]
HTML5: The Canvas Element, World Wide Web Consortium (W3C).
[OFFSCREENCANVAS]
HTML Living Standard - The OffscreenCanvas interface, WHATWG.
[CANVASCONTEXTS]
Canvas Context Registry, WHATWG.
[ECMASCRIPT]
ECMAScript® 2015 Language Specification, Ecma International, 2015.
[GL32CORE]
The OpenGL® Graphics System: A Specification (Version 3.2 (Core Profile) - December 7, 2009), M. Segal, K. Akeley, December 2009.
[GLES20]
OpenGL® ES Common Profile Specification Version 2.0.25, A. Munshi, J. Leech, November 2010.
[GLES20GLSL]
The OpenGL® ES Shading Language Version 1.00, R. Simpson, May 2009.
[REGISTRY]
WebGL Extension Registry
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels, S. Bradner. IETF, March 1997.
[CSS]
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, B. Bos, T. Celik, I. Hickson, H. W. Lie, June 2011.
[CORS]
Cross-Origin Resource Sharing, A. van Kesteren, July 2010.
[DOM4]
DOM4, A. van Kesteren, A. Gregor, Ms2ger.
[DOM3EVENTS]
Document Object Model (DOM) Level 3 Events Specification, Doug Schepers and Jacob Rossi. W3C.
[HTML]
HTML, I. Hickson, June 2011.
[WEBIDL]
Web IDL - Living Standard, E. Chen, T. Gu, B. Zbarsky, C. McCormack, T. Langel.
[ASCII]
International Standard ISO/IEC 646:1991. Information technology - ISO 7-bit coded character set for information interchange
[DOMSTRING]
Document Object Model Core: The DOMString type, World Wide Web Consortium (W3C).
[KHRROBUSTACCESS]
KHR_robust_buffer_access_behavior OpenGL ES extension, Leech, J. and Daniell, P., August, 2014.
[MULTIPLEBUFFERING]
(非规范性) Multiple buffering. Wikipedia.
[WEBCODECS]
(非规范性)WebCodecs API, C. Cunningham, P. Adenot, B. Aboba. W3C.
[PREDEFINEDCOLORSPACE]
HTML Living Standard - The PredefinedColorSpace enum, WHATWG.
[WEBGPU]
WebGPU Editor's Draft, WebGPU Community Group.

致谢

本规范由 Khronos WebGL Working Group 制作。

特别感谢:Arun Ranganathan (Mozilla)、Chris Marrin (Apple)、Jon Leech、Kenneth Russell (Google)、Kenneth Waters (Google)、Mark Callow (HI)、Mark Steele (Mozilla)、Oliver Hunt (Apple)、Tim Johansson (Opera)、Vangelis Kokkevis (Google)、Vladimir Vukicevic (Mozilla)、Gregg Tavares (Google)

另外感谢:Alan Hudson (Yumetech)、Benoit Jacob (Mozilla)、Bill Licea Kane (AMD)、 Boris Zbarsky (Mozilla)、Cameron McCormack (Mozilla)、Cedric Vivier (Zegami)、Dan Gessel (Apple)、David Ligon (Qualcomm)、David Sheets (Ashima Arts)、Glenn Maynard、Greg Roth (Nvidia)、Jacob Strom (Ericsson)、Jeff Gilbert (Mozilla)、Kari Pulli (Nokia)、Teddie Stenvi (ST-Ericsson)、Neil Trevett (Nvidia)、Per Wennersten (Ericsson)、Per-Erik Brodin (Ericsson)、 Shiki Okasaka (Google)、Tom Olson (ARM)、Zhengrong Yao (Ericsson),以及 Khronos WebGL Working Group 的成员。