WebGL：web 中的 2D 的 3D 图形

WebGL（Web 图形库）是一种可在任何兼容的 Web 浏览器中无需使用插件即可渲染高性能交互式 3D 和 2D 图形的 JavaScript API。WebGL 通过引入一个与 OpenGL ES 2.0 高度一致的 API 来做到这一点，该 API 可以在 HTML <canvas> 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

所有现代浏览器都支持 WebGL（请参阅下方的兼容性表格）；然而，用户的设备也必须支持这些特性。

WebGL 2 API 引入了对 OpenGL ES 3.0 特性集的广泛支持；它通过 WebGL2RenderingContext 接口提供。

<canvas> 元素也被 Canvas API 用于在网页上进行 2D 图形处理。

参考

标准接口

扩展

事件

常量和类型

WebGL 2

WebGL 2 是对 WebGL 的一次重大更新，通过 WebGL2RenderingContext 接口提供。它基于 OpenGL ES 3.0，新特性包括：

另请参阅博客文章“WebGL 2 在 Firefox 中发布”以及 webglsamples.org/WebGL2Samples 上的一些演示。

指南和教程

下面，你将找到各种指南，以帮助你学习 WebGL 概念和教程，提供分步课程和示例。

指南

WebGL 中的数据

编写 WebGL 代码时使用的变量，缓冲区和其他类型数据的指南。

WebGL 最佳实践

提示和建议，以帮助你提高 WebGL 内容的质量，性能和可靠性。

使用扩展

WebGL 扩展的使用指南。

教程

WebGL 教程

WebGL 核心概念的初学者指南。如果你以前没有 WebGL 的经验，那么这是一个很好的起点。

示例

一个基础的 WebGL 的 2D 动画示例

此示例展示了单色形状的简单动画。涉及的主题包括适应纵横比差异、从多组着色器构建着色器程序的方法，以及在 WebGL 中进行基本绘图的基础知识。

WebGL 示例

这是一系列附带简短解释的实时示例，旨在展示 WebGL 的概念和功能。这些示例按照主题和难度级别进行了排序，涵盖了 WebGL 渲染上下文、着色器编程、纹理、几何体、用户交互等内容。

高级教程

WebGL 模型视图投影

详细解释了通常用于表示 3D 对象视图的三个核心矩阵：模型矩阵、视图矩阵和投影矩阵。

Web 中的矩阵运算

有关如何在 Web 上使用 3D 变换矩阵的有用指南，适用于 WebGL 计算和 CSS 变换。

资源

库

  • three.js 是一个开源、功能齐全的 3D WebGL 库。
  • Babylon.js 是一个强大、简洁且开放的游戏和 3D 渲染引擎，封装在一个友好的 JavaScript 框架中。
  • Pixi.js 是一个快速、开源的 2D WebGL 渲染器。
  • Phaser 是一个用于 Canvas 和 WebGL 支持的浏览器游戏的快速、免费和有趣的开源框架。
  • PlayCanvas 是一个开源游戏引擎。
  • glMatrix 是一个用于高性能 WebGL 应用程序的 JavaScript 矩阵和矢量库。
  • twgl 是一个用于减少 webgl 冗余的库。
  • RedGL 是一个开源 3D WebGL 库。
  • vtk.js 是一个用于在浏览器中实现科学可视化的 JavaScript 库。
  • webgl-lint 将帮助查找 WebGL 代码中的错误并提供有用信息。

规范

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

浏览器兼容性

api.WebGLRenderingContext

BCD tables only load in the browser

api.WebGL2RenderingContext

BCD tables only load in the browser

兼容性说明

除了浏览器之外，GPU 本身也需要支持该特性。例如，S3 纹理压缩（S3TC）仅在基于 Tegra 的平板电脑上可用。大多数浏览器可以通过 webgl 这一上下文名称来使用 WebGL，但较旧的浏览器需要 experimental-webgl。此外，即将推出的 WebGL 2 完全向后兼容，其使用的上下文名称为 webgl2。

Gecko 说明

WebGL 调试与检测

Firefox 提供了两个可用的偏好设置，让你可以控制 WebGL 的测试功能：

webgl.min_capability_mode

一个布尔属性，当设为 true 时，会启用最低功能模式。在这种模式下，WebGL 会被配置成仅支持 WebGL 规范要求的最低限度的特性集和功能。这可确保你的 WebGL 代码在任何设备或浏览器上都能运行，无论它们的能力如何。默认情况下，该属性为 false。

webgl.disable_extensions

一个布尔属性，当设为 true 时，会禁用所有 WebGL 扩展。默认情况下，该属性为 false。

参见