随着 Firefox 51 的发布，WebGL 2 支持已经登陆！WebGL 是一个用于在 Web 中渲染 3D 图形的标准 API。它基于 OpenGL ES，OpenGL ES 常用于移动游戏。

到目前为止，我们已经可以使用 WebGL 1（基于 OpenGL ES 2）将精美图形渲染到 <canvas> 元素中。然而，WebGL 2 基于OpenGL ES 3.0 规范，它引入了新的功能，其中许多功能旨在提高性能和视觉保真度。

直到今天，WebGL 2 只能在开发者版或夜间版中使用，或者通过一个标记启用，但随着 Firefox 51 的发布，它现在对 Windows、MacOS 和 Linux 上所有 Firefox 用户开放。

演示： “After the Flood”（PlayCanvas）

为了让您体验 WebGL 2 能够实现的内容，我们很高兴向您介绍 After the Flood，这是PlayCanvas 开发的交互式 WebGL 2 演示。（请注意，此演示目前仅限于桌面，移动支持即将推出。）在完全由您的 Web 浏览器运行的水、玻璃和钢的梦幻环境中漫步吧！

如何使用 WebGL 2

要请求 WebGL 2 上下文，我们只需要从 <canvas> 元素中请求一个上下文。我们用来请求 WebGL 2 的字符串是“webgl2”。

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');

WebGL 2 可能并非所有浏览器都支持，因此您应该包含一些后备代码。

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');
let isWebGL2 = !!ctx;
if (!isWebGL2) { // try to fallback to webgl 1
    ctx = canvas.getContext('webgl') ||
          canvas.getContext('experimental-webgl');
}
if (!ctx) {
    console.log('your browser does not support WebGL');
}

警告…

请记住，虽然 WebGL 2 基于 OpenGL ES 3.0，但它并不完全相同。例如，WebGL 2 不支持程序二进制文件，OpenGL 中的一些可选限制对 WebGL 2 来说是强制性的。WebGL 2 规范 中列出了两者之间的区别，因此如果您已经熟悉 OpenGL，您将能够快速了解 WebGL 2。

还需要注意的是，WebGL 2 与 WebGL 1 并不完全向后兼容，因此您的 WebGL 1 代码在使用 WebGL 2 上下文时可能无法按预期工作。也就是说，差异非常小，您应该能够在无需太多麻烦的情况下移植您的代码和着色器。您可以在规范中阅读 向后不兼容列表，以及 WebGL2 Fundamentals 中的这份快速指南，了解如何从 WebGL 1 迁移代码到 WebGL 2。

请记住，虽然 WebGL 2 将为我们的许多用户带来这些新功能，但我们无法为使用旧版或过时显卡和驱动程序的用户提供 WebGL 2 支持。

突出显示的功能

更新的着色语言

WebGL 2 支持OpenGL ES 着色语言 3.0，它允许编写功能更强大、更有效的着色程序。新功能包括：

• 真正的整数类型
• 统一块
• 在着色器源代码中绑定着色器输入和输出的位置索引
• 片段丢弃
• 动态循环
• 复杂的纹理采样内置函数

多个渲染目标（“MRT”）

这允许您在一次传递中渲染到多个颜色缓冲区或纹理，使用片段着色器的多个输出。

此功能在 WebGL 1 中通过扩展启用，但现在已成为 WebGL 2 的核心功能集的一部分，因此您无需担心后备路径。

MRT 的主要应用之一是称为延迟着色的技术——我们以前在 Hacks 中已经写过它。它是一种渲染技术，允许在场景中使用大量动态灯光，因为渲染的复杂度并不取决于灯光数量，而取决于实际被照亮像素的数量。

实例化几何图形绘制

实例化允许您通过单个绘制调用渲染几何图形的多个实例，这减轻了 CPU 的负担。请注意，每个实例都可以有自己的属性，例如变换矩阵，因此您可以使用它来渲染许多相似的对象，例如粒子、森林中的树木、人群中的人等等。

以下 THREE.js 演示通过扩展使用实例化——请记住，在 WebGL 2 中不再需要扩展。

新的纹理功能

3D 或体积纹理是使用三个坐标而不是两个坐标（如常规的 2D 纹理）访问数据的纹理。这些纹理最常用于色调映射，但也可以用于渲染体积效果，例如烟雾、雾和光线。

2D 数组纹理包含一系列独立的 2D 图层，着色器可以索引这些图层以选择其中一个包含的 2D 纹理。

采样器对象 是 WebGL 2 中的新功能。它们将纹理采样的方式与用于采样的纹理分离，因此单个纹理可以以多种方式采样，多个纹理可以指向同一个采样器对象。

WebGL 2 还取消了对非 2 的幂（NPOT）纹理的限制。

变换反馈

变换反馈捕获顶点着色器的输出到缓冲区对象，通常使用此输出作为下一帧的输入。这创建了一个不离开 GPU 的循环，将这些计算的负担从 CPU 转移到 GPU。粒子系统通常利用变换反馈来迭代每个粒子的位置并在每一帧移动它，而无需 CPU 干预。

变换反馈也可以与“光栅器丢弃”结合使用，后者允许运行顶点着色器而不运行片段着色器。这允许进行自然的“映射”GPGPU（通用图形处理单元计算）数据处理流程。

还有更多！

WebGL 2 中引入了更多功能，包括顶点数组对象、MSAA 渲染缓冲区和统一缓冲区块等等。要查看 WebGL 2 中所有新功能的完整列表，您可以查看官方规范，因为它只包含 WebGL 1 和 2 之间的差异。

WebGL 2 示例页面展示了一些功能的独立效果。这些针对特定功能的演示旨在说明新功能所能实现的效果，以及如何使用它们的示例代码。

下一步

我们今天发布了 API 以供广泛使用，但仍有更多工作要做。我们期待着在性能改进、放松一些限制以及改善整体质量方面开展工作。我们知道性能是您关注的重点，因此我们已经准备了一些激动人心的工作，以提供应用程序所需的性能，使其能够提供更加复杂和有影响力的体验。

除了看到应用程序添加 WebGL 2 支持之外，我们还期待着看到 WebGL 2 集成到现有的 WebGL 框架和引擎中。PlayCanvas 支持 WebGL 2，正如我们在After the Flood 的亮点中所展示的那样。 Three.js 也支持利用 WebGL 2。请关注其他引擎在今年晚些时候获得 WebGL 2 支持！

遇到问题？请在我们的 Bugzilla 上提交错误报告。（请记住：GitHub 登录信息也可以使用！）