WebGL (Web Graphics Library) 是一个用以渲染交互式3D和2D图形的无需插件且兼容下一代浏览器的 JavaScript API。WebGL 引用的JavaScript API遵守OpenGL ES2.0规范，通过HTML5中 <canvas> 元素实现功能。
目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ 和 Internet Explorer 11+；然而, WebGL一些特性也需要用户的硬件设备支持。
<canvas>元素也可以使用 Canvas 2D 来实现在网页中绘制2D图形。
参考
标准接口
扩展接口
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_atcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWebGLTimerQueryEXTWebGLVertexArrayObjectOES
事件
常量和类型
指南和教程
进阶指南
- 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 1.0 | Recommendation | Initial definition. |
| WebGL 2.0 | Editor's Draft |
浏览器兼容性
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4.0 (2.0) | 9 | 11 | 12 (experiment) | 5.1 (experiment) |
OES_texture_float |
6.0 (6.0) | ? | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | ? | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | ? | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | ? | ? | ? | ? |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | ? | ? | ? | ? |
| Feature | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4 | 25 (experiment) | 未实现 | 12 (experiment) | 8.1 |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | 25 | ? | ? | ? |
OES_texture_float |
6.0 (6.0) | 25 | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | 25 | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | 25 | ? | ? | ? |
OES_element_index_uint |
? | 25 | ? | ? | ? |
OES_vertex_array_object |
? | 25 | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | 25 prefixed with WEBKIT_ |
? | ? | ? |
WEBKIT_EXT_texture_filter_nisotropic |
未实现 | 25 | 未实现 | 未实现 | ? |
[1]这个特性目前在试验阶段.
兼容性说明
除了浏览器，GPU本身也需要支持这个特性. 举个例子, S3 纹理压缩 (S3TC) 只可以用在基于图睿的GPU处理器. 大多数浏览器支持 webgl context name, 但是旧的浏览器支持 experimental-webgl更好些. 除此之外, 即将来临的 WebGL 2 只会向后兼容，在未来将使用新的上下文名称 experimental-webgl2 (目前正在测试中).
Gecko备忘
WebGL调试与检测
开始使用Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), 在测试中，这里有两个参数可以让你来控制WebGL性能:
webgl.min_capability_mode- 一个以布尔值存储的属性。当它的值为
True时，将会启用最小性能模式。当这个模式启用时。WebGL将会仅提供由其标准指定的最基本的功能集和性能支持。这样可以确保您的WebGL代码能够在性能的设备和浏览器上正确运行。它的默认值是False。 webgl.disable_extensions- 一个以布尔值存储的属性。当它的值为
True时，会禁用所有的WebGL拓展。它的默认值是False。