WebGL
=====

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

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和 Microsoft Edge build 10240+；然而，WebGL 一些特性也需要用户的硬件设备支持。

WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过`WebGL2RenderingContext`界面提供的。

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

参考
--

### 标准接口

* `WebGLRenderingContext`
* `WebGL2RenderingContext`
* `WebGLActiveInfo`
* `WebGLBuffer`
* `WebGLContextEvent`
* `WebGLFramebuffer`
* `WebGLProgram`
* `WebGLQuery`
* `WebGLRenderbuffer`
* `WebGLSampler`
* `WebGLShader`
* `WebGLShaderPrecisionFormat`
* `WebGLSync` (en-US)
* `WebGLTexture`
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation`
* `WebGLVertexArrayObject`
### 扩展

* `ANGLE_instanced_arrays`
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` 
实验性
* `EXT_frag_depth` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object`
* `OVR_multiview2` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_atc`
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context`
### 事件

* `webglcontextlost`
* `webglcontextrestored` (en-US)
* `webglcontextcreationerror` (en-US)
### 常量和类型

* WebGL 常量
* WebGL 类型
### WebGL 2

WebGL 2 是 WebGL 的一个主要更新，它通过`WebGL2RenderingContext` 接口提供。它基于 OpenGL ES 3.0，新功能包括：

* 3D textures,
* Sampler objects,
* Uniform Buffer objects,
* Sync objects (en-US),
* Query objects,
* Tranform Feedback objects (en-US),
* 部分扩展被纳入了 WebGL 2 核心： Vertex Array objects, instancing (en-US), multiple render targets, fragment depth (en-US).

另请参见博客文章 "WebGL 2 lands in Firefox" 和 webglsamples.org/WebGL2Samples 几个演示。

指南和教程
-----

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

### 指南

WebGL 中的数据

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

WebGL 最佳实践

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

使用扩展

WebGL 扩展的使用指南。

### 教程

WebGL 教程

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

### 示例

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

此示例演示了单色形状的简单动画。检查的主题是适应宽高比差异，从多个着色器集合构建着色器程序的功能，以及 WebGL 绘图的基础知识。

WebGL 示例

一系列带有简短说明的实时示例展示了 WebGL 的概念和功能。根据主题和难易程度对示例进行了排序，涵盖了 WebGL 渲染上下文，着色器编程，纹理，几何图形，用户交互等。

### 高级教程

WebGL 模型视图投影

详述了常用于显示 3D 物体视图的三种核心矩阵：模型，视图和投影矩阵。

Web 中的矩阵运算

讲述 3D 变换矩阵工作原理的指南——这也能在 WebGL 计算和 CSS3 变换中派上用场。

资源
--

* Raw WebGL: WebGL 入门 Nick Desaulniers 主讲的 WebGL 基础知识。如果你从未接触过底层的图形编程，这是一个开始学习初级图形编程的好地方。
* WebGL 官网 Khronos Group 的 WebGL 官方站点。
* 学习 WebGL 一个关于如何使用 WebGL 的教程站点。
* WebGL 基础 一个关于 WebGL 的基础教程。
* WebGL 试炼 一个在线创建和分享 WebGL 的工具站点，非常适合快速创建一个原型或者体验一个成品。
* WebGL Academy 通过一个 HTML/JavaScript 编辑器来学习一个基础的 WebGl 基础知识。
* WebGL Report 一个检测浏览器是否支持 WebGL 的网站。
### 库

* glMatrix 创建高性能 WebGL 应用的 JavaScript 矩阵矢量库。
* PhiloGL 一个用于数据可视化、创意编程和游戏开发的 WebGL 库。
* Pixi.js是一种快速的开源 2D WebGL 渲染器。
* PlayCanvas是一个开源游戏引擎。
* Sylvester是一个用于处理向量和矩阵的开源库。尚未针对 WebGL 进行优化，但功能极其强大。
* three.js是一个开源的，功能齐全的 3D WebGL 库。
* Phaser是一个适用于 Canvas 和 WebGL 的浏览器游戏的快速，免费和有趣的开源框架。
* RedGL 是一个开源 3D WebGL 库。
* vtk.js 是一个 JavaScript 库，用于在浏览器中进行科学可视化。
规范
--

| Specification |
| --- |
| WebGL Specification # 5.14 |
| WebGL 2.0 Specification # 3.7 |

浏览器兼容性
------

### api.WebGLRenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.WebGL2RenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### 兼容性说明

不仅是浏览器，GPU 本身也需要支持该特性。比如 S3 纹理压缩 (S3TC) 只在基于图睿的 GPU 的设备上可用。大多数浏览器可以通过 `webgl` 这一上下文名称来使用 WebGL，但是旧的浏览器需要使用 `experimental-webgl`。另外，将来的 WebGL 2 只会向后兼容，其使用的上下文名称为 `webgl2` 。

### Gecko 备忘

#### WebGL 调试与检测

开始使用 Gecko 10.0，在测试中，这里有两个参数可以让你来控制 WebGL 性能：

`webgl.min_capability_mode`

一个以布尔值存储的属性。当它的值为`True`时，将会启用最小性能模式。当这个模式启用时，WebGL 将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保你的 WebGL 代码能够在性能的设备和浏览器上正确运行。它的默认值是`False`。

`webgl.disable_extensions`

一个以布尔值存储的属性。当它的值为`True`时，会禁用所有的 WebGL 拓展。它的默认值是`False`。

参见
--

* Canvas(画布)
* 兼容性信息关于 WebGL 的扩展