WebGL: 网页的 2D 和 3D 图形
注意：此功能在 Web Workers 中可用。
WebGL (Web 图形库) 是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 高度兼容的 API 来实现这一目标，该 API 可在 HTML 的 <canvas> 元素中使用。这种兼容性使得 API 能够利用用户设备提供的硬件图形加速。
所有现代浏览器都支持 WebGL（请参阅下面的 兼容性表）；但是，用户的设备也必须具有支持这些功能的硬件。
WebGL 2 API 引入了对 OpenGL ES 3.0 功能集的大部分支持；它通过 WebGL2RenderingContext 接口提供。
Canvas API 也使用 <canvas> 元素在网页上进行 2D 图形渲染。
参考
标准接口
扩展
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_float_blend实验性EXT_frag_depthEXT_shader_texture_lodEXT_sRGBEXT_texture_compression_bptcEXT_texture_compression_rgtcEXT_texture_filter_anisotropicEXT_texture_norm16KHR_parallel_shader_compileOES_draw_buffers_indexedOES_element_index_uintOES_fbo_render_mipmapOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectOVR_multiview2WEBGL_color_buffer_floatWEBGL_compressed_texture_astcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWEBGL_multi_draw
事件
常量和类型
WebGL 2
WebGL 2 是 WebGL 的一个重大更新，通过 WebGL2RenderingContext 接口提供。它基于 OpenGL ES 3.0，新功能包括：
还可以参阅博文 "WebGL 2 lands in Firefox" 以及 webglsamples.org/WebGL2Samples 中的一些演示。
指南和教程
下面，您将找到各种指南，帮助您学习 WebGL 概念，以及提供分步教程和示例的教程。
指南
- WebGL 中的数据
-
关于编写 WebGL 代码时使用的变量、缓冲区和其他数据类型的指南。
- WebGL 最佳实践
-
有关如何提高 WebGL 内容的质量、性能和可靠性的技巧和建议。
- 使用扩展
-
使用 WebGL 扩展的指南。
教程
- WebGL 教程
-
WebGL 核心概念的入门指南。如果您没有 WebGL 经验，这是一个很好的起点。
示例
- 一个基本的 2D WebGL 动画示例
-
此示例演示了单色形状的简单动画。所讨论的主题包括适应纵横比差异、用于从多个着色器集合构建着色器程序的函数，以及 WebGL 绘图的基础知识。
- WebGL 示例
-
一系列带有简短说明的实时示例，展示了 WebGL 的概念和功能。示例按主题和难度排序，涵盖 WebGL 渲染上下文、着色器编程、纹理、几何、用户交互等。
高级教程
- 压缩纹理格式
-
如何启用和使用压缩纹理格式以获得更好的内存性能。
- WebGL 模型视图投影
-
详细解释了通常用于表示 3D 对象视图的三个核心矩阵：模型、视图和投影矩阵。
- 用于 Web 的矩阵数学
-
关于 3D 变换矩阵如何工作以及如何在 Web 上使用它们的有用指南 — 既用于 WebGL 计算，也用于 CSS 变换。
资源
- Khronos WebGL 网站 Khronos Group 的 WebGL 主网站。
- WebGL 基础知识 一个基础的 WebGL 基础教程。
- 原生 WebGL：WebGL 入门 Nick Desaulniers 的演讲，介绍了 WebGL 的基础知识。
- WebGL Academy 一个 HTML/JavaScript 编辑器，提供学习 WebGL 编程基础知识的教程。
- WebGL 统计 一个提供不同平台上浏览器 WebGL 功能统计信息的网站。
库
- 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
加载中…
api.WebGL2RenderingContext
加载中…
兼容性说明
除了浏览器，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。