本规范描述用于 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] 返回一个新对象时,
用户代理必须执行以下步骤:
WebGLRenderingContext 对象 context。
getContext() 方法关联的 canvas 或 offscreen
canvas。
WebGLContextAttributes 对象 contextAttributes。
getContext() 时带有第二个参数 options,
则从 options 中指定的属性设置
contextAttributes 的属性。
WebGLContextAttributes 对象 actualAttributes。
canvas 上下文类型 'experimental-webgl' 在历史上曾用于提供对 尚未完成或尚未符合规范的 WebGL 实现的访问。
如果用户代理同时支持 webgl 和 experimental-webgl
canvas 上下文类型,则它们应被视为别名。例如,如果对
getContext('webgl') 的调用成功创建了 WebGLRenderingContext,
则随后对 getContext('experimental-webgl') 的调用应返回同一个上下文对象。
API 调用所渲染到的绘图缓冲区应在 WebGLRenderingContext 对象创建时定义。以下描述定义如何 创建绘图缓冲区。
下表显示构成绘图缓冲区的所有缓冲区,以及它们的
最小大小和默认情况下是否被定义。此绘图
缓冲区的大小应由 HTMLCanvasElement 或 OffscreenCanvas 的
width 和 height 属性确定。
下表还显示这些缓冲区在首次创建、大小改变,
或当 preserveDrawingBuffer 上下文创建属性
为 false 时在呈现之后应清除到的值。
| 缓冲区 | 清除值 | 最小大小 | 默认定义? |
|---|---|---|---|
| 颜色 | (0, 0, 0, 0) | 每个分量 8 位 | 是 |
| 深度 | 1.0 | 16 位整数 | 是 |
| 模板 | 0 | 8 位 | 否 |
小于 1 的 HTMLCanvasElement.width 和 .height 值被视为 1。
0x0 canvas 将产生 1x1 的 drawingBufferWidth/Height。
如果请求的宽度或高度无法满足,无论是在首次创建绘图缓冲区时,
还是在 HTMLCanvasElement 或 OffscreenCanvas 的
width 和 height 属性改变时,
都应创建一个较小尺寸的绘图缓冲区。实际使用的尺寸取决于实现,
并且不保证会创建具有相同宽高比的缓冲区。
实际绘图缓冲区大小可从
drawingBufferWidth 和 drawingBufferHeight 属性获得。
WebGL 实现不得在高清显示器上对绘图
缓冲区的大小执行任何自动缩放。上下文的 drawingBufferWidth
和 drawingBufferHeight 必须在实现相关
约束的范围内尽可能接近 canvas 的 width
和 height 属性。
上述约束不会改变 canvas 元素在网页上占用的空间量, 即使在高清显示器上也是如此。canvas 的 固有 尺寸 [CANVAS] 等于其坐标 空间的大小,其中数值按 CSS 像素解释,并且 CSS 像素 是分辨率无关的 [CSS]。
WebGL 应用程序可以通过检查
window.devicePixelRatio 等属性,
按该因子缩放 canvas 的 width
和 height,并将其 CSS 宽度和高度设置为原始宽度和高度,
从而在高清显示器上实现绘图缓冲区像素与屏幕像素之间的 1:1 比例。
应用程序只需放大 canvas 的 width
和 height 属性,就可以模拟在更高分辨率显示器上运行的效果。
可选的 WebGLContextAttributes 对象可用于
改变缓冲区是否被定义。它还可用于定义颜色
缓冲区是否包含 alpha 通道。如果被定义,alpha 通道由
HTML 合成器用于将颜色缓冲区与页面的其余部分组合。
WebGLContextAttributes 对象仅在首次调用
getContext 时使用。没有提供用于在绘图
缓冲区创建后改变其属性的设施。
当 depth、stencil 和 antialias 属性设置
为 true 时,它们是请求,而不是要求。WebGL 实现应尽最大努力
满足它们。但是,当这些属性中的任何一个设置为 false 时,WebGL
实现不得提供相关功能。WebGL 实现或图形硬件不支持的属性组合
不应导致创建 WebGLRenderingContext 失败。
实际上下文
参数会被设置为已创建绘图缓冲区的属性。
WebGL 实现必须遵守
alpha、premultipliedAlpha 和 preserveDrawingBuffer
属性。
WebGL 会在合成操作之前立即将其绘图缓冲区呈现给 HTML 页面合成器, 但仅当自上一次合成操作以来至少调用过以下之一时:
在为合成呈现绘图缓冲区之前,实现应确保所有渲染操作 已刷新到绘图缓冲区。默认情况下,合成之后, 绘图缓冲区的内容应清除为其默认值,如上表所示。
可通过设置 WebGLContextAttributes 对象的
preserveDrawingBuffer 属性来改变此默认行为。
如果此标志为 true,则绘图缓冲区的内容应被保留,
直到作者清除或覆盖它们。如果此标志为 false,
则在渲染函数返回后尝试使用此上下文作为源图像执行操作
可能导致未定义行为。这包括 readPixels 或 toDataURL 调用,
将此上下文用作另一个上下文的 texImage2D 或
drawImage 调用的源图像,或从此上下文的 canvas 创建
一个 ImageBitmap [HTML]。
虽然有时希望保留绘图缓冲区,但这在某些平台上可能造成显著的
性能损失。只要可能,此标志应保持为 false
并使用其他技术。同步绘图缓冲区访问等技术(例如,
在渲染到绘图缓冲区的同一函数中调用 readPixels 或
toDataURL)可用于获取绘图缓冲区的内容。
如果作者需要在一系列调用中渲染到同一个绘图缓冲区,
可以使用
Framebuffer 对象。
只要能保证作者无法从另一个进程访问缓冲区内容, 实现可以优化掉绘图缓冲区所需的隐式清除操作。 例如,如果作者执行了显式清除,则不需要隐式清除。
renderbufferStorage。
清除行为等同于设置 HTMLCanvasElement.width 和
HTMLCanvasElement.height,随后改变绘图缓冲区格式。
此方法遵守 WebGLContextAttributes.antialias。
drawingBufferStorage 允许高效地同时重新指定宽度和高度。
使用 HTMLCanvasElement.width 和 HTMLCanvasElement.height 时,
先设置一个再设置另一个可能产生中间重新分配,尽管用户代理确实会尝试
优化掉这些重新分配。
drawingBufferStorage 成功,则 drawingBufferFormat 变为
sizedFormat。
drawingBufferWidth 和 drawingBufferHeight 分别变为
width 和 height。
因此,对默认 framebuffer 的操作表现得就像是在一个带有
sizedFormat 附件的非默认 framebuffer 上操作。
例如,在 drawingBufferStorage(gl.RGBA16F, 1, 1) 之后,由于 framebuffer 是 "floatish",
readPixels 的主要 format/type 对是 RGBA/FLOAT,而不是
RGBA/UNSIGNED_BYTE。
如果 WebGLContextAttributes.alpha 为 false,则生成 INVALID_OPERATION。
RGBA8 总是作为 sizedFormat 被支持。
此外,如果以下枚举当前对
renderbufferStorage 有效,则也支持它们:
RGBA8
SRGB8_ALPHA8 (0x8C43)(例如来自 EXT_sRGB)
RGBA16F (0x881A)(例如来自 EXT_color_buffer_half_float)
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。
width 或 height 大于限制 MAX_RENDERBUFFER_SIZE,
则生成 INVALID_VALUE。
如果分配失败,则生成 OUT_OF_MEMORY。
OpenGL 将矩形视口作为其状态的一部分进行管理,该视口定义渲染结果在 绘图缓冲区中的放置位置。在创建 WebGL 上下文 context 时,视口被初始化为一个原点为 (0, 0), 宽度和高度等于 (context.drawingBufferWidth, context.drawingBufferHeight) 的矩形。
WebGL 实现不得响应 canvas 元素大小调整而影响 OpenGL 视口的状态。
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 视口。
OpenGL API 允许应用程序修改渲染期间使用的混合模式,
因此允许控制绘图缓冲区中的 alpha 值如何被解释;
参见
the WebGLContextAttributes 一节中的
premultipliedAlpha 参数。
HTML Canvas API toDataURL 和 drawImage 必须遵守
premultipliedAlpha 上下文创建参数。
当对正在渲染 WebGL 内容的 Canvas 调用 toDataURL 时,
如果请求的图像格式未指定预乘 alpha,并且 WebGL 上下文的
premultipliedAlpha 参数设置为 true,
则像素值必须被去乘;即,颜色通道除以 alpha 通道。
注意,此操作是有损的。
将 WebGL 渲染的 Canvas 传递给
CanvasRenderingContext2D 的 drawImage 方法时,
在绘制操作期间可能需要也可能不需要修改已渲染的
WebGL 内容,这取决于 CanvasRenderingContext2D 实现的预乘需求。
将 WebGL 渲染的 Canvas 传递给 texImage2D API 时,
根据传入 canvas 的 premultipliedAlpha 上下文创建参数
以及目标 WebGL 上下文的 UNPACK_PREMULTIPLY_ALPHA_WEBGL
pixel store 参数的设置,像素数据可能需要转换为或转换自预乘形式。
OpenGL 将若干类型的资源作为其状态的一部分进行管理。这些资源通过整数对象名称标识, 并通过各种创建调用从 OpenGL 获得。 与此相反,WebGL 将这些资源表示为 DOM 对象。 每个对象都派生自 WebGLObject 接口。目前支持的资源包括: 纹理、缓冲区(即 VBO)、framebuffer、renderbuffer、shader 和 program。WebGLRenderingContext 接口为每种类型提供一个用于创建 WebGLObject 子类的方法。来自底层图形库的数据 存储在这些对象中,并完全由它们管理。 DOM 对象不仅会在作者保留显式引用时保持存活, 还会在它被底层图形库使用期间保持存活。 当 DOM 对象被销毁时,它会将其资源标记为删除。 如果作者希望在 DOM 对象被销毁之前将对象标记为删除, 可以显式调用相应的删除函数。(例如 deleteTexture)
WebGL 资源(例如纹理和顶点缓冲区对象(VBO))必须始终
包含已初始化的数据,即使它们是在没有初始用户
数据值的情况下创建的。创建没有初始值的资源通常用于
为纹理或 VBO 保留空间,然后使用 texSubImage 或
bufferSubData 调用修改它。如果未向这些调用提供初始数据,WebGL
实现必须将其内容初始化为 0;深度资源必须清除为
默认的 1.0 clear depth。这可能需要创建一个大小为请求的 VBO
的清零临时缓冲区,以便能正确初始化。所有其他将
数据加载到纹理或 VBO 中的形式都涉及 ArrayBuffers 或图像等 DOM 对象,
因而已经要求被初始化。
当 WebGL 资源通过 drawElements 或
drawArrays 等调用由 shader 访问时,WebGL 实现必须确保
shader 不能访问越界或未初始化的数据。
参见 启用的顶点属性和范围检查,
了解 WebGL 实现必须强制执行的限制。
为了防止信息泄露,WebGL 禁止将以下内容作为纹理上传:
如果在参数除此之外均正确的情况下,
使用违反这些限制的 HTMLImageElement、HTMLVideoElement、
HTMLCanvasElement 或 ImageBitmap 调用
texImage2D 或 texSubImage2D 方法,
则必须抛出 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 请求的更多信息,请参阅:
WebGL 实现必须只接受符合 The OpenGL ES Shading Language, Version 1.00 [GLES20GLSL] 的 shader, 且其不得超出附录 A 第 4 节和第 5 节规定的最低功能。 特别是:
for 循环必须符合附录 A 中的结构约束。 while 和 do-while 循环被禁止,因为它们在附录 A 中是可选的。除上述规范中的保留标识符外,以 "webgl_" 和 "_webgl_" 开头的标识符 保留供 WebGL 使用。声明以这些前缀开头的函数、变量、结构名称或结构字段的 shader 不得被允许加载。
WebGL 1.0 实现还必须支持 shader 中的行继续字符 '\'。
有可能有意或无意地创建 shader 和几何体的组合, 使其渲染时间长到不可接受。此问题类似于长时间运行脚本的问题, 用户代理已经为后者提供了防护措施。但是,长时间运行的绘制 调用可能导致整个窗口系统失去交互性,而不仅仅是用户代理。
一般情况下,不可能对传入 shader 的结构施加限制来防范此问题。 实验表明,即使非常严格的结构限制也不足以防止长时间渲染, 而且此类限制会阻止 shader 作者实现常见算法。
用户代理应实现防护措施,以防止过长的渲染时间及相关的交互性丧失。 建议的防护措施包括:
预计 OS 和图形 API 层的支持基础设施会随着时间改进, 这也是没有指定这些防护措施确切性质的原因。
不得允许 shader 读取或写入位于应用程序自身数据之外的数组元素。
这包括任何数组类型的变量,以及使用数组下标语法访问的
vec3 或 mat4 等向量或矩阵类型。
如果在编译期间检测到此类访问,则必须生成错误并阻止 shader
编译。否则,在运行时,越界读取应返回以下任一值:
越界写入会被丢弃,或修改程序可访问的存储中的 某个未指定值。
此行为复制了 [KHRROBUSTACCESS] 中定义的行为。
参见 支持的 GLSL 构造, 了解关于简化 shader 中数组索引操作静态分析的限制的更多信息。
本节描述添加到 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 字典包含绘图表面属性,
并作为第二个参数传递给 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 传递第二个参数,或者传递了一个用户对象
但该对象没有给定名称的属性,则使用默认值。
如果值为 true,页面合成器将假定绘图缓冲区包含 具有预乘 alpha 的颜色。如果值为 false,页面合成器将 假定绘图缓冲区中的颜色不是预乘的。如果 alpha 标志为 false,则忽略此标志。
当 premultipliedAlpha:true 时,发送到页面
合成器的任何像素都应具有小于或等于其 alpha 值的颜色值,
否则由合成这些越界像素值产生的颜色
是未定义的。
premultipliedAlpha:true 时,
vec4(1.0, 0.0, 0.0, 0.5) 可能显示为绿色
而不是红色,这可能是由于优化的打包合成数学运算溢出。
由于要求一致行为会带来难以处理的性能影响,
因此这里保留为未定义。
有关 premultipliedAlpha 标志效果的更多信息,
参见 预乘 Alpha。
在某些硬件上,将 preserveDrawingBuffer 标志
设置为 true 可能具有显著的性能影响。
向用户代理提供一个提示,指示哪种 GPU 配置适合 此 WebGL 上下文。这可能影响在具有多个 GPU 的系统中 使用哪个 GPU。例如,双 GPU 系统可能有一个 GPU 以较低功耗为代价牺牲渲染性能。注意,此属性只是一个提示, WebGL 实现可以选择忽略它。
无论此属性的值如何,WebGL 实现都使用上下文丢失和恢复事件 来调节功耗和内存消耗。
允许的值为:
default
让用户代理决定哪种 GPU 配置最合适。这是 默认值。
high-performance
表示请求一种优先考虑渲染性能而非功耗的 GPU 配置。鼓励开发者仅在认为 绝对必要时才指定此值,因为它可能会显著降低 移动设备的电池续航。实现可以决定最初尊重此请求, 并在一段时间后丢失上下文并恢复一个忽略该 请求的新上下文。
请求 high-performance 的应用程序应测试并
维护健壮的上下文丢失处理,因为用户代理很可能决定
丢失后台 high-performance 上下文。
low-power
表示请求一种优先考虑省电而非 渲染性能的 GPU 配置。通常,如果内容不太可能 受绘图性能限制,则应使用此值;例如,如果它每秒只渲染一帧, 只绘制相对简单的几何体并使用简单 shader,或使用 较小的 HTML canvas 元素。鼓励开发者在其内容允许时使用此值, 因为它可能显著改善移动 设备的电池续航。
false。需要高性能的应用程序可以
将此参数设置为 true,如果上下文创建失败,
则应用程序可能更愿意使用诸如 2D canvas 上下文之类的后备渲染路径。
或者,应用程序可以在将此参数
设置为 false 的情况下重试 WebGL 上下文创建,
并了解到应使用降低保真度的渲染模式
来改善性能。
如果值为 true,则用户代理可以优化 canvas 的渲染, 通过将 canvas 绘制周期与事件循环去同步、绕过普通的 用户代理渲染算法,或同时采用两者,来降低 从输入事件到光栅化所测得的延迟。只要此模式涉及绕过 通常的绘制机制、光栅化或两者,它就可能引入可见的撕裂 伪影。
用户代理通常在一个未显示的缓冲区上渲染,
然后快速将其与正在扫描输出用于呈现的缓冲区交换;
前一个缓冲区称为 back buffer,后一个称为 front buffer。
一种流行的降低延迟技术称为 front buffer rendering,
也称为 single
buffer rendering,其中渲染与扫描输出过程并行且竞争地发生。
此技术以可能引入撕裂伪影为代价降低延迟,
并可用于全部或部分实现 desynchronized
boolean。[MULTIPLEBUFFERING]
desynchronized boolean 在实现某些类型的应用程序时可能有用,
例如绘图应用程序,其中输入与光栅化之间的延迟至关重要。
getContext
传递 WebGLContextAttributes 参数。它假定页面上存在一个名为
"canvas1" 的 canvas 元素。
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl',
{ antialias: false,
stencil: true });
WebGLObject 接口是所有 GL 对象的父接口。
每个 WebGLObject 都有一个内部
invalidated 标志,其初始为未设置。
每个 WebGLObject 都有一个 .label 属性,
其默认值为 ""。实现应使用此应用程序提供的标签字符串
来改善调试,例如在错误消息中,
和/或在可能的情况下将该标签提供给任何底层驱动程序,
以辅助原生级调试工具。实现不得因标签而改变行为。
[Exposed=(Window,Worker)]
interface WebGLObject {
attribute USVString label;
};
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 接口表示 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 接口表示 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 接口表示 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 接口表示 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 接口表示 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 接口表示 shader program 中 uniform 变量的
位置。
[Exposed=(Window,Worker)]
interface WebGLUniformLocation {
};
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 接口表示从 getShaderPrecisionFormat 调用
返回的信息。
[Exposed=(Window,Worker)]
interface WebGLShaderPrecisionFormat {
readonly attribute GLint rangeMin;
readonly attribute GLint rangeMax;
readonly attribute GLint precision;
};
以下属性可用:
rangeMin
类型为 GLint
rangeMax
类型为 GLint
precision
类型为 GLint
顶点、索引、纹理和其他数据使用 ArrayBuffer、 Typed Arrays 和 DataView 传输给 WebGL 实现, 如 ECMAScript 规范 [ECMASCRIPT] 中所定义。
Typed Arrays 支持创建交错的、异构的顶点数据;将 不同的数据块上传到一个大型 vertex buffer object;以及 OpenGL program 所需的 大多数其他用例。
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;
}
WebGLRenderingContext 表示允许
在 canvas 元素中进行 OpenGL ES 2.0 风格渲染的 API。
在执行 WebGLRenderingContext
接口的任何方法,或由 getExtension 方法返回的接口的任何方法的实现之前,
必须执行以下步骤:
[WebGLHandlesContextLoss] 扩展属性,
则执行被调用方法的实现,返回其结果并终止
这些步骤。 WebGLObject,则生成
INVALID_OPERATION 错误,并令 use default return value 为
true。
any 或任何可空类型,
则返回 null。 更多细节参见 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)
drawingBufferWidth
类型为 GLsizei
HTMLCanvasElement 的
width 属性。
drawingBufferHeight
类型为 GLsizei
HTMLCanvasElement 的
height 属性。
drawingBufferFormat
类型为 GLenum
alpha:true 和 alpha:false,
初始分别为 RGBA8 或 RGB8。
drawingBufferColorSpace
类型为
PredefinedColorSpace
(规范)
unpackColorSpace
类型为
PredefinedColorSpace
(规范)
TexImageSource 源上传到此上下文中的纹理时,
这些源会转换到的颜色空间。
OpenGL ES 2.0 维护用于渲染的状态值。此 组中的所有调用,除非另有说明,均与其 OpenGL 对应项行为相同。
blendColor 会将其实参限制到 0 到 1 范围。
depth 值会被限制到 0 到 1 范围。
zNear 和 zFar 值会被限制到 0 到 1 范围,
且 zNear 必须小于或等于 zFar;参见
视口深度范围。
| 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。
如果 pname 是 IMPLEMENTATION_COLOR_READ_FORMAT
或 IMPLEMENTATION_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 实现中可用扩展的信息,参见 扩展查询。
CONTEXT_LOST_WEBGL。
随后,在上下文恢复之前返回 NO_ERROR。
isEnabled 查询,都可以通过
getParameter 获得相同的布尔值。
UNPACK_FLIP_Y_WEBGL、
UNPACK_PREMULTIPLY_ALPHA_WEBGL
和 UNPACK_COLORSPACE_CONVERSION_WEBGL。关于这些参数的文档,
参见 像素
存储参数。
绘图命令只能修改当前绑定的 framebuffer 内部的像素。此外, 视口和剪裁框也会影响绘图。
视口指定从归一化设备坐标到窗口坐标的 x 和 y 仿射变换。
视口的大小最初按 WebGL 视口 一节中的规定确定。
剪裁框定义一个限制绘图的矩形。当启用剪裁测试时,
只有位于剪裁框内的像素才能被绘图命令修改,
包括 clear,并且图元只能绘制在视口、
当前绑定的 framebuffer 和剪裁框的交集内。当未启用剪裁
测试时,图元只能绘制在视口和当前绑定的 framebuffer 的交集内。
Buffer 对象(有时称为 VBO)保存 GLSL shader 的顶点属性数据。
buffer 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。INVALID_OPERATION 错误,
且当前绑定保持不变。
尝试绑定一个已标记为删除的对象将生成
INVALID_OPERATION 错误,且当前绑定保持不变。
INVALID_VALUE 错误。
void bufferSubData(GLenum target, GLintptr offset, AllowSharedBufferSource data) (OpenGL ES 2.0 §2.9,手册 页)
INVALID_VALUE 错误。如果 data 为 null,
则生成 INVALID_VALUE 错误。
buffer 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。| pname | 返回类型 |
|---|---|
| BUFFER_SIZE | GLint |
| BUFFER_USAGE | GLenum |
如果 pname 不在上表中,则生成 INVALID_ENUM 错误。
如果生成 OpenGL 错误,则返回 null。
WebGLRenderingContext 生成的,则返回 false。Framebuffer 对象提供绘图缓冲区之外的替代渲染目标。它们 是颜色、alpha、深度和模板缓冲区的集合,常用于 渲染之后会被用作纹理的图像。
framebuffer 是由不同于此上下文的另一个
WebGLRenderingContext 生成的,则生成
INVALID_OPERATION 错误。WebGLFramebuffer 对象绑定到给定的绑定点
(target),其必须为 FRAMEBUFFER。
如果 framebuffer 为 null,则绑定由上下文提供的默认 framebuffer,
并且尝试修改或查询 target FRAMEBUFFER
上的状态将生成 INVALID_OPERATION 错误。
尝试绑定一个已标记为删除的对象将生成
INVALID_OPERATION 错误,且当前绑定保持不变。
FRAMEBUFFER_UNSUPPORTED。
framebuffer 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。texture 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。| 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。
WebGLRenderingContext 生成的,则返回 false。Renderbuffer 对象用于为 framebuffer 对象中使用的各个缓冲区 提供存储。
renderbuffer 是由不同于此上下文的另一个
WebGLRenderingContext 生成的,则生成
INVALID_OPERATION 错误。WebGLRenderbuffer 对象绑定到给定的绑定点
(target),其必须为 RENDERBUFFER。
如果 renderbuffer 为 null,则当前绑定到
此 target 的 renderbuffer 对象会被解除绑定。
尝试绑定一个已标记为删除的对象将生成
INVALID_OPERATION 错误,且当前绑定保持不变。
renderbuffer 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。| 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。
WebGLRenderingContext 生成的,则返回 false。
Texture 对象为纹理操作提供存储和状态。如果没有绑定 WebGLTexture
(例如,向 bindTexture 传递 null 或 0),则尝试修改或查询该 texture 对象
应生成 INVALID_OPERATION 错误。这会在下面的函数中说明。
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,手册 页)
INVALID_OPERATION 错误。INVALID_ENUM 错误并立即返回。
参见 压缩纹理支持。
INVALID_OPERATION 错误。texImage2D,
随后调用 copyTexSubImage2D。
与 copyTexSubImage2D 一样,对于任何位于
framebuffer 之外的源像素,对应的目标 texel 保持不变,
因而它们会保留如同以 null 数据调用 texImage2D 时那样
被零初始化的内容。
这具有综合效果:对于位于
framebuffer 之外的源像素,对应目标像素的关联
texel 的所有通道都将初始化为 0;
参见 读取 Framebuffer 之外的像素。INVALID_OPERATION 错误。
INVALID_OPERATION 错误。INVALID_OPERATION 错误。
texture 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。INVALID_OPERATION 错误。
| 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。
WebGLRenderingContext 生成的,则返回 false。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 错误。
INVALID_OPERATION 错误。pixels 非 null,但其大小小于由指定的
width、height、format、type
和像素存储参数所要求的大小,则生成
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,手册 页)
UNPACK_COLORSPACE_CONVERSION_WEBGL 像素存储参数设置
为 NONE。ImageBitmap 对象,尽管
其他纹理解包参数不适用于 ImageBitmap,因为它们
应在 ImageBitmap 构造期间指定。
实现经验表明,在上传到 WebGL 纹理时尽可能晚地
执行 ImageBitmap 的颜色空间转换是有益的。
| 源 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 特定像素存储参数,
参见 像素存储参数。UNPACK_FLIP_Y_WEBGL
像素存储
参数修改,但 ImageBitmap 实参除外,如上述
章节所述。HTMLImageElement 或 ImageBitmap,浏览器保证
保留所有通道的完整精度。HTMLImageElement 包含 alpha 通道,并且
UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数为 false,
则保证 RGB 值从未被 alpha 通道预乘,无论这些值
是直接来自原始文件格式还是从某些其他颜色格式转换而来。UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数
设置为 false 的情况下上传到 WebGL 纹理,则颜色通道必须被 alpha 通道
去乘,这是一种有损操作。因此,当颜色先通过
CanvasRenderingContext2D 绘制到 canvas,然后在
UNPACK_PREMULTIPLY_ALPHA_WEBGL 像素存储参数设置为 false 时上传到
WebGL 纹理,WebGL 实现无法保证 alpha < 1.0 的颜色会被无损保留。
INVALID_OPERATION 错误。data 属性已被 neutered 的
ImageData 调用,则生成 INVALID_VALUE 错误。ImageBitmap 调用,
则生成 INVALID_VALUE 错误。HTMLImageElement 或 HTMLVideoElement 调用,
或以其位图的 origin-clean 标志设置为 false 的
HTMLCanvasElement、ImageBitmap
或 OffscreenCanvas 调用,
则必须抛出 SECURITY_ERR 异常。
参见 源限制。source 为 null,则生成 INVALID_VALUE 错误。INVALID_OPERATION 错误。
INVALID_OPERATION 错误。
INVALID_OPERATION 错误。INVALID_OPERATION 错误。pixels 为 null,则生成 INVALID_VALUE 错误。pixels 非 null,但其大小小于由指定的
width、height、format、type
和像素存储参数所要求的大小,则生成
INVALID_OPERATION 错误。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,手册 页)
UNPACK_FLIP_Y_WEBGL
像素存储
参数修改,但 ImageBitmap 实参除外,如上述
章节所述。INVALID_OPERATION 错误。INVALID_OPERATION 错误。data 属性已被 neutered 的
ImageData 调用,则生成 INVALID_VALUE 错误。ImageBitmap 调用,
则生成 INVALID_VALUE 错误。HTMLImageElement 或 HTMLVideoElement 调用,
或以其位图的 origin-clean 标志设置为 false 的
HTMLCanvasElement、ImageBitmap
或 OffscreenCanvas 调用,
则必须抛出 SECURITY_ERR 异常。参见
源限制。source 为 null,则生成 INVALID_VALUE 错误。使用 OpenGL ES 2.0 进行渲染需要使用以 OpenGL ES 的着色语言 GLSL ES 编写的 shaders。 Shaders 必须以源字符串加载(shaderSource)、编译 (compileShader)并附加到一个 program(attachShader),该 program 必须被链接 (linkProgram),然后再被使用(useProgram)。
program 或 shader 是由不同于此上下文的另一个
WebGLRenderingContext 生成的,则生成
INVALID_OPERATION 错误。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。INVALID_VALUE 错误。name 以
GLSL 构造中规定的 WebGL 保留前缀之一开头,
则生成 INVALID_OPERATION 错误。shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。program 或 shader 是由不同于此上下文的另一个
WebGLRenderingContext 生成的,则生成
INVALID_OPERATION 错误。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。返回一个表示附加到传入 program 的 shader 列表的新对象。
如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。| 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。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。| pname | 返回类型 |
|---|---|
| SHADER_TYPE | GLenum |
| DELETE_STATUS | GLboolean |
| COMPILE_STATUS | GLboolean |
如果 pname 不在上表中,则生成 INVALID_ENUM 错误并返回
null。
如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
返回一个新的 WebGLShaderPrecisionFormat,描述指定 shader 数值格式的
范围和精度。shadertype 值可以是 FRAGMENT_SHADER 或
VERTEX_SHADER。precisiontype 值可以是 LOW_FLOAT、MEDIUM_FLOAT、HIGH_FLOAT、
LOW_INT、MEDIUM_INT 或 HIGH_INT。
如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
WebGLRenderingContext 生成的,则返回 false。WebGLRenderingContext 生成的,则返回 false。program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。useProgram 定义的当前正在使用的
program 对象,则:
INVALID_OPERATION 错误。
参见 链接不成功时当前 program
失效。
shader 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。Shader 使用的值作为 uniform 或 vertex attribute 传入。
index 处的 vertex attribute 作为数组启用。
WebGL 对启用的 vertex attribute 施加了超出 OpenGL ES 2.0 的额外
规则;参见 启用的顶点属性和范围
检查。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。WebGLActiveInfo 对象,描述传入 program 对象中
传入 index 处的 vertex attribute 的大小、类型和名称。如果传入的
index 超出范围,则生成 INVALID_VALUE 错误并返回 null。
如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误。WebGLActiveInfo 对象,描述传入 program 对象中
传入 index 处的 uniform 的大小、类型和名称。如果传入的 index 超出
范围,则生成 INVALID_VALUE 错误并返回 null。
如果在执行此函数期间生成任何 OpenGL 错误,则返回 null。
program 的
invalidated 标志已设置,
则生成 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。name 以
GLSL 构造中规定的 WebGL 保留前缀之一开头,
且上述错误条件均不适用,则不生成错误并返回 -1。
program 或 location 是由不同于此上下文的另一个
WebGLRenderingContext 生成的,则生成
INVALID_OPERATION 错误。| 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。
program 是由不同于此上下文的另一个 WebGLRenderingContext
生成的,则生成 INVALID_OPERATION 错误并返回 null。program 已被删除,
则生成 INVALID_VALUE 错误并返回 null。program 未链接,
则生成 INVALID_OPERATION 错误并返回 null。name 长于
最大 Uniform 和 Attribute 位置长度中定义的限制,
则生成 INVALID_VALUE 错误并返回 null。name 包含
GLSL 源字符集之外的字符,
则生成 INVALID_VALUE 错误并返回 null。name 以
GLSL 构造中规定的 WebGL 保留前缀之一开头,
且上述错误条件均不适用,则不生成错误并返回 null。WebGLUniformLocation,它表示
program 对象内某个特定 uniform 变量的位置。如果 name
不对应于传入 program 中的活动 uniform 变量,则返回值为 null。
| 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。
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,手册页)
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,手册 页)
drawArrays 或 drawElements 的调用,
也保证通过 vertexAttrib 设置的值会从带有
CURRENT_VERTEX_ATTRIB 参数的 getVertexAttrib 函数返回。
v 结尾的形式)的数组太短,
则会生成 INVALID_VALUE 错误。
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 中的新增内容)不限于:
cleardrawArraysdrawElementsdrawArraysInstancedANGLE,并且
WebGL 2.0
添加了 drawArraysInstanced。
如果这些调用中的任一个尝试绘制到完整 framebuffer 的缺失附件, 则不会向该附件绘制任何内容,并且根据 绘制到缺失附件 不会生成错误。
INVALID_VALUE 错误。
如果 CURRENT_PROGRAM 为 null,则会生成 INVALID_OPERATION 错误。
INVALID_OPERATION 错误;此外 offset 必须非负,否则会生成
INVALID_VALUE 错误;参见
Buffer 偏移和步长要求。如果 count 大于零,
则必须有一个非 null 的 WebGLBuffer 绑定到
ELEMENT_ARRAY_BUFFER 绑定点,否则会生成
INVALID_OPERATION 错误。INVALID_OPERATION 错误。
drawArrays
和 drawElements 期间会执行 OpenGL ES 2.0 规定之外的
额外错误检查。参见 启用的顶点
属性和范围检查。
OpenGL ES 2.0 有若干允许从当前绑定的(read)framebuffer 读取的调用。 WebGL 将所有此类调用归类为 [读取操作]。
这些调用包括但(由于扩展或 WebGL 2.0 中的新增内容)不限于:
copyTexImage2DcopyTexSubImage2DreadPixelspixels。
从 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 错误。
format 和 type 组合。
第一种是 format 为 RGBA 且 type 为 UNSIGNED_BYTE。
第二种是由实现选择的格式。此格式的 format 和 type
值可以分别通过使用符号常量 IMPLEMENTATION_COLOR_READ_FORMAT 和
IMPLEMENTATION_COLOR_READ_TYPE 调用
getParameter 来确定。
由实现选择的格式可能因当前绑定的渲染表面的格式而异。
不受支持的 format 和 type 组合
将生成 INVALID_OPERATION 错误。
readPixels 不一定会生成 INVALID_ENUM。
pixels 为 null,则生成 INVALID_VALUE 错误。如果
pixels 非 null,但在考虑 pixel store 模式的情况下其大小不足以取回
指定矩形中的所有像素,则生成 INVALID_OPERATION 错误。
INVALID_OPERATION 错误。
移动设备上的电源事件等情况可能导致 WebGL 渲染上下文 在任何时候丢失,并要求应用程序重建它; 更多细节参见 WebGLContextEvent。 以下方法有助于检测 context lost 事件。
WebGL 的实现不得支持任何额外的参数、常量或函数,
除非先通过扩展机制启用该功能。
getSupportedExtensions 函数返回此实现支持的扩展字符串数组。
通过将这些字符串之一传递给 getExtension 函数来启用扩展。
此调用返回一个对象,其中包含该扩展定义的任何常量或函数。
该对象的定义特定于扩展,并且必须由扩展规范定义。
一旦扩展被启用,只有在 WebGL 渲染上下文丢失时才会被禁用(见下文),
但 "WEBGL_lose_context" 扩展除外,它在任何上下文丢失期间仍保持活动。
被禁用扩展引用的任何对象,例如 getExtension 返回的对象,
不再与 WebGL 渲染上下文关联。任何派生自 WebGLObject 的
扩展对象都会将其 invalidated
标志设置为 true。上下文丢失后扩展方法的行为由
"WebGL 上下文"一节中的步骤定义。
没有其他机制可以禁用扩展。
对同一扩展字符串进行多次 getExtension 调用,在考虑
不区分 ASCII 大小写的比较时,只要该扩展处于启用状态,就必须返回同一个对象。
尝试在未先调用 getExtension 启用扩展的情况下使用扩展的任何功能,
必须生成适当的 GL 错误,且不得使用该功能。
本规范不定义任何扩展。单独的 WebGL 扩展注册表定义了特定 WebGL 实现可能支持的扩展。
getSupportedExtensions 返回的名称之一
是
ASCII
不区分大小写匹配 [HTML] 时,
返回一个对象;否则返回 null。
从 getExtension 返回的对象包含扩展提供的任何常量或函数。
如果扩展未定义任何常量或函数,则返回对象可以不含常量或函数,
但仍必须返回一个唯一对象。该对象用于表示扩展已被启用。
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] 的 tasks 的 task source 是 WebGL task source。
以下属性可用:
statusMessage 类型为 DOMString
当用户代理检测到与
WebGLRenderingContext context 关联的
drawing buffer 已丢失时,它必须运行以下步骤:
WebGLObject 实例的
invalidated 标志。
statusMessage 属性设置
为 ""。
在上下文丢失期间创建的 WebGLObject
(例如通过 createBuffer() 创建的 WebGLBuffer)
在其生命周期开始时,其 invalidated 标志已设置。
webglcontextlost
事件的默认行为,并使 webglcontextrestored 事件能够被送达:
canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false);
当用户代理要为 WebGLRenderingContext context
恢复 drawing
buffer 时,它必须运行以下步骤:
statusMessage 属性设置
为 ""。
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();
当用户代理要在 canvas 上 触发 WebGL context creation error 时,它必须执行以下步骤:
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);
}
本节描述相对于 OpenGL ES 2.0 API 对 WebGL API 所做的更改, 以提高其在各种操作系统和设备之间的可移植性。
在 WebGL API 中,给定的 buffer object 在其生命周期中只能绑定到
ARRAY_BUFFER 或 ELEMENT_ARRAY_BUFFER 绑定点之一。
此限制意味着给定的 buffer object 可以包含顶点或索引,但不能同时包含两者。
WebGLBuffer 的类型在它第一次作为实参传递给 bindBuffer 时初始化。
后续调用 bindBuffer 试图将同一个 WebGLBuffer 绑定到另一个
绑定点时,将生成 INVALID_OPERATION 错误,并且绑定点的状态
将保持不变。
WebGL API 不支持客户端侧数组。
如果通过 enableVertexAttribArray 将 vertex attribute 作为数组启用,
但没有 buffer 绑定到该 attribute(通常通过 bindBuffer 和
vertexAttribPointer),则绘制命令(drawArrays 或
drawElements)将生成 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 对象,
才能使与纹理相关的操作和查询成功。
WebGL API 不支持访问已编译 shader 的二进制表示。
这包括 OpenGL ES 2.0 的 ShaderBinary 入口点。
此外,WebGL API 不支持通过 getParameter 查询 shader
二进制格式和 shader 编译器的可用性。
所有 WebGL 实现都必须隐式支持在线 shader 编译器。
传递给 drawElements 和 vertexAttribPointer 的
offset 实参,以及传递给 vertexAttribPointer 的
stride 实参,必须是传递给该调用的数据类型大小的倍数,
否则生成 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."
此外,传递给 drawElements 的 offset 实参必须为非负,
否则生成 INVALID_VALUE 错误。
当调用需要为活动 vertex attribute 获取数据的绘图命令时,
如果该 attribute 被作为数组启用,无论是直接(drawArrays),
还是从 indexed draw 间接(drawElements),
绘图命令都可能请求 WebGLBuffer 边界之外的数据。
如果发生这种情况,则会导致以下行为之一:
如果 vertex attribute 被作为数组启用,且 buffer 绑定到该 attribute,
但该 attribute 未被当前 program 消费,则无论绑定 buffer 的大小如何,
它都不会导致在调用 drawArrays
或 drawElements 期间生成任何错误。
调用 indexed drawing 命令(drawElements)获取
ELEMENT_ARRAY_BUFFER 边界之外的 index 元素时,将导致 INVALID_OPERATION 错误。
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 附加到以下附件点组合是错误:
DEPTH_ATTACHMENT + DEPTH_STENCIL_ATTACHMENT
STENCIL_ATTACHMENT + DEPTH_STENCIL_ATTACHMENT
DEPTH_ATTACHMENT + STENCIL_ATTACHMENT
checkFramebufferStatus 必须返回 FRAMEBUFFER_UNSUPPORTED。
INVALID_FRAMEBUFFER_OPERATION 错误并提前返回,使 framebuffer、
目标纹理或目标内存的内容保持不变。
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT =
DEPTH_COMPONENT16 renderbuffer
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture +
DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer
除非显式指定 width 和 height 参数,
否则由 texImage2D 设置的纹理宽度和高度,
以及由 texSubImage2D 更新的子矩形宽度和高度,
将基于所上传的 TexImageSource source 对象确定:
source 类型为 ImageData
ImageData 对象的实际像素宽度和高度。
source 类型为 HTMLImageElement
HTMLImageElement 对象的 width 和 height 属性当前值。
source 类型为 HTMLCanvasElement 或
OffscreenCanvas
HTMLCanvasElement 或
OffscreenCanvas 对象的 width 和 height 属性当前值。
source 类型为 HTMLVideoElement 或 VideoFrame[WEBCODECS]
WebGL API 支持以下额外参数传递给 pixelStorei。
UNPACK_FLIP_Y_WEBGL 类型为 boolean
texImage2D 或
texSubImage2D 的调用期间,源数据会沿垂直轴翻转,
使得概念上的最后一行成为第一个被传输的行。初始值为 false。
任何非零值均解释为 true。
UNPACK_PREMULTIPLY_ALPHA_WEBGL 类型为 boolean
texImage2D
或 texSubImage2D 的调用期间,如果源数据存在 alpha 通道,
则在数据传输期间将 alpha 通道乘入颜色通道。初始值为 false。
任何非零值均解释为 true。
UNPACK_COLORSPACE_CONVERSION_WEBGL 类型为 unsigned long
BROWSER_DEFAULT_WEBGL,则浏览器的默认颜色空间转换
(例如将 display-p3 图像转换为 srgb)
会在后续接受 TexImageSource 实参的纹理数据上传调用
(例如 texImage2D 和 texSubImage2D)期间应用。
精确转换可能同时取决于浏览器和文件类型。
如果设置为 NONE,则不应用颜色空间转换,除了转换为 RGBA。
(例如,rec709 YUV 视频仍会转换为 rec709 RGB 数据,但随后不会再转换为例如 srgb
RGB 数据)
初始值为 BROWSER_DEFAULT_WEBGL。
如果 TexImageSource 是 ImageBitmap,则这三个参数会被忽略。
取而代之的是,应使用等价的
ImageBitmapOptions
来创建具有所需格式的 ImageBitmap。
对于 [读取操作], 从越界像素子区域的读取不会触及其对应的目标子区域。
WebGL(表现得像是)将资源预初始化为零。
因此,例如 copyTexImage2D 在对应于
framebuffer 越界读取的子区域中会有零。
在 WebGL API 中,如果启用了 stencil testing 且当前绑定的 framebuffer 具有 stencil buffer,
则在以下任一情况为 true 时进行绘制是非法的。
这样做将生成 INVALID_OPERATION 错误。
(STENCIL_WRITEMASK & maxStencilValue) != (STENCIL_BACK_WRITEMASK & maxStencilValue)
stencilMaskSeparate 针对与 face 的
FRONT 和 BACK 值相关联的 mask 参数指定)
(STENCIL_VALUE_MASK & maxStencilValue) != (STENCIL_BACK_VALUE_MASK & maxStencilValue)
stencilFuncSeparate 针对与 face 的
FRONT 和 BACK 值相关联的 mask 参数指定)
clamp(STENCIL_REF, 0, maxStencilValue) != clamp(STENCIL_BACK_REF, 0, maxStencilValue)
stencilFuncSeparate 针对与 face 的
FRONT 和 BACK 值相关联的 ref 参数指定)
其中 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_COLOR 或 ONE_MINUS_CONSTANT_COLOR,
而另一个设置为 CONSTANT_ALPHA 或
ONE_MINUS_CONSTANT_ALPHA,则对 blendFunc 的调用将生成
INVALID_OPERATION 错误。如果 srcRGB 设置为
CONSTANT_COLOR 或 ONE_MINUS_CONSTANT_COLOR,
且 dstRGB 设置为 CONSTANT_ALPHA 或
ONE_MINUS_CONSTANT_ALPHA,或反之,则对
blendFuncSeparate 的调用将生成
INVALID_OPERATION 错误。
GL_FIXED 数据类型。
根据 支持的 GLSL 构造, 以 "webgl_" 和 "_webgl_" 开头的标识符保留供 WebGL 使用。
在 OpenGL ES 2.0 API 中,可用扩展通过调用
glGetString(GL_EXTENSIONS) 确定,它返回一个以空格分隔的扩展字符串列表。
在 WebGL API 中,EXTENSIONS 枚举已被移除。
取而代之的是,必须调用 getSupportedExtensions 来确定可用
扩展的集合。
核心 WebGL 规范不定义任何受支持的压缩纹理格式。 因此,在没有启用任何其他扩展的情况下:
compressedTexImage2D
和 compressedTexSubImage2D 方法
生成 INVALID_ENUM 错误。 COMPRESSED_TEXTURE_FORMATS 调用
getParameter 返回一个零长度数组
(类型为 Uint32Array)。
WebGL 实现应只暴露比未压缩形式更高效的压缩纹理格式。
GLSL ES 规范 [GLES20GLSL] 未定义 token 长度限制。WebGL 要求支持长度最多为 256 个字符的 token。 包含超过 256 个字符 token 的 shader 必须编译失败。
WebGL 支持将任何 HTML DOMString [DOMSTRING]
传递给 shaderSource 而不出错。
然而,在 shader 编译期间,在 GLSL 预处理和注释剥离之后,所有剩余字符
必须位于 [GLES20GLSL] 的字符集中。
否则,shader 必须编译失败。
具体而言,这允许:
// 你好
#ifdef __cplusplus #line 42 "foo.glsl" #endif(双引号字符在 GLSL 字符集之外,但由于它会被 预处理移除,因此允许出现在 shader 源中)
GLSL ES 规范 [GLES20GLSL] 将 OpenGL ES shading language 的源字符集定义为 ISO/IEC 646:1991 的子集, 通常称为 ASCII [ASCII]。 某些 GLSL 实现不允许任何 ASCII 范围之外的字符,即使是在注释中。 虽然浏览器必须正确处理完整 DOMString 字符集的预处理, 但 WebGL 实现通常必须确保发送给 GLSL driver 的 shader 源只包含 ASCII, 以确保安全。 实现应保留用于调试目的的行号,必要时可以插入空行。
如果将包含不在此集合中的字符的字符串传递给任何其他 shader 相关入口点
bindAttribLocation、
getAttribLocation、
或 getUniformLocation,
将生成 INVALID_VALUE 错误。
WebGL 对 GLSL shader 中结构的嵌套施加限制。当 struct 中的字段引用另一个 struct 类型时就会发生嵌套;GLSL ES 规范 [GLES20GLSL] 禁止嵌入式结构定义。 顶层 struct 定义中的字段具有 1 的嵌套级别。
WebGL 要求支持结构嵌套级别为 4。包含嵌套超过 4 层深结构的 shader 必须编译失败。
WebGL 对 uniform 和 attribute 位置的长度施加 256 个字符的限制。
在 WebGL API 中,枚举 INFO_LOG_LENGTH、SHADER_SOURCE_LENGTH、
ACTIVE_UNIFORM_MAX_LENGTH 和 ACTIVE_ATTRIBUTE_MAX_LENGTH
已被移除。在 OpenGL ES 2.0 API 中,需要这些枚举来确定传递给
glGetActiveAttrib 等调用的缓冲区大小。在 WebGL API 中,
类似的调用(getActiveAttrib、getActiveUniform、
getProgramInfoLog、getShaderInfoLog 和
getShaderSource)全都返回 DOMString。
在 WebGL API 中,传递给 texSubImage2D 的 type 实参
必须匹配最初用于定义 texture object 的类型(即使用 texImage2D)。
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 变量失败, 则编译或链接必须失败。
目标架构中的行数不是使用固定大小的寄存器网格,而是按以下方式确定:
getParameter(MAX_VERTEX_UNIFORM_VECTORS)
getParameter(MAX_FRAGMENT_UNIFORM_VECTORS)
getParameter(MAX_VARYING_VECTORS)
上述文本定义了由于打包算法强制执行的约束而必须使 shader 或 program 的编译或链接失败的情况。不能保证使用了超过最小要求数量变量的 shader,即使其变量根据此算法成功打包,也一定能成功编译。 已在实现中观察到低效率情况,包括将标量数组展开以占用多个列。 开发者应避免过度依赖将多个变量自动打包到列中。相反,应定义更大的变量 (例如 vec4),并将值显式打包到最右侧列中。
在 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 中,任何绘制到缺失附件的 [绘制操作] 都不会向该附件绘制任何内容。不会生成错误。
在 WebGL API 中,如果传递给 lineWidth 的 width 参数
设置为 NaN,则生成 INVALID_VALUE 错误,并且线宽不会改变。
应用程序可以将多个 attribute 名称绑定到同一个位置。
这称为 aliasing。当别名到同一位置的多个 attribute 在可执行 program 中处于活动状态时,
linkProgram 应失败。
GLSL ES [GLES20GLSL] 规范规定,
除非在 vertex shader 中写入 gl_Position,否则其值是未定义的。
WebGL 保证 gl_Position 的初始值为 (0,0,0,0)。
GLSL ES 1.00 [GLES20GLSL] 规范将全局变量
初始化器限制为常量表达式。在 WebGL API 中,允许在 GLSL ES 1.00 shader 的全局
变量初始化器中使用未以 const 限定符限定的其他全局变量和 uniform 值。
全局变量初始化器必须是全局初始化器表达式,其定义为以下之一:
以下内容不得用于全局初始化器表达式:
当全局变量初始化器违反未修改的 GLSL ES 规范时,即当全局变量初始化器 不是常量表达式时,编译器应生成警告。
GLSL ES 预处理器规范引用的 C++ 标准规定,当在解析
#if 或 #elif 指令的控制表达式时,
defined 运算符由宏替换生成,则行为未定义。当 WebGL API 处理的
shader 代码在预处理器表达式内部的宏替换期间生成 token defined 时,
必须导致编译器错误。
这不会影响处理 defined 运算符的预处理器指令之外的宏展开。
在 C++ 标准中,使用 defined 作为宏名也具有未定义行为。
在 WebGL API 中,使用 defined 作为宏名必须导致编译器错误。
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
实现也没有,因此放宽该规则是使规范在兼容现有内容的同时定义良好的唯一方式。
在 WebGL API 中,非 cube complete 的 cube map 面不是 framebuffer attachment
complete。当附加了不完整 cube map 的面时,查询 framebuffer status 必须
返回 FRAMEBUFFER_INCOMPLETE_ATTACHMENT。
如果 CURRENT_PROGRAM 为 null,任何将顶点传输到 GL 的命令都会生成
INVALID_OPERATION。这包括 drawElements 和
drawArrays。
如果 fragment shader 既不写入 gl_FragColor 也不写入
gl_FragData,则 shader 执行后 fragment color 的值保持不变。
GLSL ES [GLES20GLSL] 规范规定,
除非局部和全局变量由 shader 初始化,否则其值是未定义的。
WebGL 保证这些变量初始化为零:
0.0、vec4(0.0)、0、false 等。
OpenGL ES 2.0 规范 [GLES20] 第 2.1.2 节 "Data Conversions",小节 "Conversion from Integer to Floating-Point", 将从归一化有符号整数 c(其类型的位宽为 b) 到浮点值 f 的转换定义为:
如果附加到 WebGL program 的任一 shader 声明了一个与静态使用的 vertex attribute 同名的 uniform,则 program 链接应失败。
如果顶点位于裁剪体之外,但位于近裁剪平面和远裁剪平面之间,
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.
在 WebGL API 中,如果传递给 linkProgram 的 program 也是
由 useProgram 定义的当前正在使用的 program 对象,并且链接不成功,
则当前渲染状态引用的可执行代码会立即失效。继续使用当前 program 的绘制调用会生成
INVALID_OPERATION 错误。
对重新链接失败的 program 立即拒绝绘制调用,可以使 WebGL 实现更加健壮。OpenGL ES API 的行为是,在当前 program 被更改之前保留当前可执行文件。 在所有场景中正确实现此行为具有挑战性,并且曾导致安全漏洞。
shader 中的标识符可以包含双下划线,例如 "g__Foo"。
本规范由 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 的成员。