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

参考

标准接口

• WebGLRenderingContext
• WebGL2RenderingContext
• WebGLActiveInfo
• WebGLBuffer
• WebGLContextEvent
• WebGLFramebuffer
• WebGLProgram
• WebGLQuery
• WebGLRenderbuffer
• WebGLSampler
• WebGLShader
• WebGLShaderPrecisionFormat
• WebGLSync
• WebGLTexture
• WebGLTransformFeedback
• WebGLUniformLocation
• WebGLVertexArrayObject

扩展

• 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

事件

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

常量和类型

• WebGL 常量
• WebGL 类型

WebGL 2

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

• 3D 纹理、
• 采样对象、
• Uniform 缓冲对象、
• 同步对象、
• 查询对象、
• 变换反馈对象、
• 现在已成为 WebGL 2 核心的推广扩展：顶点数组对象、实例化、多个渲染目标、片段深度。

另请参阅博客文章“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 代码中的错误并提供有用信息。

规范

浏览器兼容性

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。

参见

• Canvas API
• 有关 WebGL 扩展的兼容性信息