WebGL：用于网络的 2D 和 3D 图形

WebGL (Web 图形库) 是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染高性能交互式 3D 和 2D 图形，无需使用插件。WebGL 通过引入与 OpenGL ES 2.0 非常接近的 API 来实现这一点，该 API 可用于 HTML <canvas> 元素。这种一致性使 API 能够利用用户设备提供的硬件图形加速功能。

所有现代浏览器都支持 WebGL（请参见下面的 兼容性表格）；但是，用户的设备也必须具有支持这些功能的硬件。

The 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 经验，这是一个很好的起点。

示例

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

此示例演示了单色形状的简单动画。探讨的主题包括适应 纵横比 差异、用于从多个着色器集构建着色器程序的函数以及 WebGL 绘制的入门知识。

WebGL 示例

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

高级教程

WebGL 模型视图投影

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

网络的矩阵数学

一个有用的指南，介绍 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 代码中找到错误并提供有用的信息

规范

规范
WebGL 规范
# 5.14
WebGL 2.0 规范
# 3.7

浏览器兼容性

api.WebGLRenderingContext

BCD 表格仅在浏览器中加载

api.WebGL2RenderingContext

BCD 表格仅在浏览器中加载

兼容性说明

除了浏览器之外，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。

另请参阅