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

参考

标准接口

扩展

事件

常量和类型

WebGL 2

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

另请参见博客文章 "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 Stats 一个统计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 Status Comment
WebGL 1.0 Recommendation 初始定义。基于 OpenGL ES 2.0
WebGL 2.0 Editor's Draft 在 WebGL 1 基础上构建。基于 OpenGL ES 3.0
OpenGL ES 2.0 Standard
OpenGL ES 3.0 Standard

浏览器兼容性

WebGL 1

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGLRenderingContextChrome Full support 9Edge Full support 12
Notes
Full support 12
Notes
Notes To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Firefox Full support 4IE Full support 11
Notes
Full support 11
Notes
Notes To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Opera Full support 12Safari Full support 5.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support YesOpera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

WebGL 2

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGL2RenderingContextChrome Full support 56Edge Full support 79Firefox Full support 51IE No support NoOpera Full support 43Safari No support NoWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 51Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support

兼容性说明

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

参见