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 图形处理。
参考
标准接口
扩展
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_float_blend
实验性EXT_frag_depth
EXT_shader_texture_lod
EXT_sRGB
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_norm16
KHR_parallel_shader_compile
OES_draw_buffers_indexed
OES_element_index_uint
OES_fbo_render_mipmap
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
OVR_multiview2
WEBGL_color_buffer_float
WEBGL_compressed_texture_astc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
WEBGL_multi_draw
事件
常量和类型
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 变换。
资源
- Khronos WebGL 站点:Khronos 组织的 WebGL 官方站点。
- WebGL 基本教程:提供了 WebGL 的基础知识。
- Raw WebGL:WebGL 入门:来自 Nick Desaulniers 主讲的 WebGL 基础知识。
- WebGL 演练场:用于创建和共享 WebGL 项目的在线工具。适合快速制作原型和进行实验。
- WebGL 学院:一款 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 代码中的错误并提供有用信息。
规范
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
。