WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在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
)window.location='https://developer.mozilla.org/zh-CN/docs/Web/API/navigation-example.png'){kind=link}
事件
常量和类型
WebGL 2
WebGL 2 是WebGL的一个主要更新，它通过WebGL2RenderingContext 接口提供。它基于OpenGL ES 3.0，新功能包括：
- 3D textures,
- Sampler objects,
- Uniform Buffer objects,
- Sync objects,
- Query objects,
- Tranform Feedback objects,
- Promoted extensions that are now core to WebGL 2: Vertex Array objects, instancing, multiple render targets, fragment depth.
)window.location='https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/wide-shot.png'){kind=link}
另请参见博客文章 "WebGL 2 lands in Firefox" 和 webglsamples.org/WebGL2Samples 几个演示。
指南和教程
高级教程
- 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 Stats 一个统计WebGL在不同平台上能力表现的网站。
库
规范
| Specification | Status | Comment |
|---|---|---|
| WebGL 1.0 | Recommendation | Initial definition. Based on OpenGL ES 2.0 |
| WebGL 2.0 | Editor's Draft | Builds on top of WebGL 1. Based on OpenGL ES 3.0. |
| OpenGL ES 2.0 | Standard | |
| OpenGL ES 3.0 | Standard |
浏览器兼容性
| 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。