MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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图形。

参考

标准接口

扩展

事件

常量和类型

WebGL 2

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

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

指南和教程

  • WebGL教程学习WebGL核心概念的入门指南。WebGL初学者很好的起点。
  • WebGL最佳实践 大量技巧和建议来提高你的WebGL的知识。
  • 使用扩展 在WebGL如何进行有用的扩展。

高级教程

资源

  • Raw WebGL: WebGL入门 Nick Desaulniers 主讲的WebGL 基础知识。如果你从未接触过底层的图形编程,这是一个开始学习初级图形编程的好地方。
  • WebGL官网 Khronos Group 的WebGl官方站点。
  • 学习WebGL 一个关于如何使用WebGL的教程站点。
  • WebGL基础 一个关于WebGL的基础教程。
  • WebGL试炼 一个在线创建和分享WebGL的工具站点,非常适合快速创建一个原型或者体验一个成品。
  • WebGL Academy 通过一个 HTML/JavaScript 编辑器来学习一个基础的WebGl基础知识。
  • WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.

  • glMatrix 创建高性能WebGL应用的JavaScript矩阵矢量库。
  • Sylvester 一个开源的 JavaScript矩阵矢量库,不仅为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。

参见

文档标签和贡献者

标签: 
 最后编辑者: xgqfrms-GitHub,