WebGL
WebGL是一种JavaScript API,用于在不使用插件程序的情况下在任何兼容的网页浏览器中呈现交互式2D和3D图形[3]。WebGL完全集成到浏览器的所有网页标准中,可将影像处理和效果的GPU加速使用方式当做网页Canvas的一部分。WebGL元素可以加入其他HTML元素之中并与网页或网页背景的其他部分混合[4]。WebGL进程由JavaScript编写的句柄和OpenGL Shading Language(GLSL)编写的着色器代码组成,该语言类似于C或C++,并在电脑的图形处理器(GPU)上运行。WebGL由非营利Khronos Group设计和维护[5]。
![]() | |
原作者 | Mozilla基金会 |
---|---|
开发者 | WebGL Working Group |
首次发布 | 2011年3月3日[1] |
当前版本 |
|
操作系统 | 跨平台 |
类型 | API |
网站 | www.khronos.org/webgl/ |
HTML |
---|
比较 |
设计
WebGL 1.0基于OpenGL ES 2.0,并提供了3D图形的API[6]。它使用HTML5 Canvas并允许利用文档对象模型接口。WebGL 2.0基于OpenGL ES 3.0,确保了提供许多选择性的WebGL 1.0扩充功能,并引入新的API[7]。可利用部分Javascript实现自动内存管理[5]。
历史
WebGL起源于Mozilla员工弗拉基米尔·弗基西维奇一项称为Canvas 3D的实验计划。2006年,弗基西维奇首次展示了Canvas 3D的原型。2007年底在Firefox[8]和Opera[9]被实作。
在2009年初,非营利技术联盟Khronos Group启动了WebGL的工作组,最初的工作成员包括Apple、Google、Mozilla、Opera等[5][10]。2011年3月发布WebGL 1.0规范[1]。截至2012年3月,工作组的主席由肯·罗素(Ken Russell,全名「Kenneth Bradley Russell」)担任。
WebGL的早期应用包括Zygote Body[11][12]。
WebGL 2规范的发展始于2013年,并于2017年1月完成[13]。该规范基于OpenGL ES 3.0[14]。首度实作在Firefox 51、Chrome 56和Opera 43中[15]。
支持
目前,WebGL在最新的浏览器中被广泛支持。然而,其可用性取决于其他因素,如GPU支持。WebGL官方网站提供了一个简单的测试页[16]。而第三方网站提供了更详细的消息(如浏览器使用的渲染器以及可用的扩展)[17][18]。
桌面浏览器
- Google Chrome – 从9.0开始支持缺省激活了 WebGL [19][20]。在Windows上,默认情况下,Chrome使用ANGLE渲染器将OpenGL ES转换为Direct X 9.0c或11.0,后者具有更好的驱动进程支持[21]。在Linux和Mac OS X上,默认渲染器是OpenGL[22],也可以强制OpenGL作为Windows上的渲染器[21]。2013年9月起,Chrome还推出了更新的Direct3D 11渲染器,但需要更新的显卡[23][24]。 Chrome 56+支持WebGL 2.0。
- Internet Explorer – 从11开始支持[25]。Internet Explorer 11 最初未能通过大多数官方的WebGL一致性测试,但微软后来发布了几个更新,最新的0.94 WebGL引擎目前通过了约97%的Khronos测试。较旧的版本可以安装第三方插件程序来支持,如IEWebGL[26]。
- Mozilla Firefox – 从4.0开始支持缺省激活[27]。Firefox也通过ANGLE在Windows平台上使用DirectX。Firefox 51+ 支持 WebGL 2.0。
- Safari – 在Mac OS X Snow Leopard上的Safari 5.1、OS X Mountain Lion、Mac OS X Lion上的Safari6.0或较新版本开始支持WebGL,缺省情况下禁用[28][29][30][31][32]。Safari版本12(在MacOS Mojave中可用)支持WebGL 2.0,目前作为"实验性"功能。
- Opera – 需自行激活[33][34]。Opera 43+支持WebGL 2.0
- Microsoft Edge – 对于Microsoft Edge Legacy,初始稳定版本支持WebGL版本0.95(context名称:"experimental-webgl"),并带有开源GLSL到HLSL转译器。 版本 10240+ 支持以 WebGL 1.0 为前缀。最新的基于Chromium的Edge支持WebGL 2.0
参考文献
- . [2015-05-18]. (原始内容存档于2016-11-08).
- https://www.khronos.org/registry/webgl/specs/.
- Gregg Tavares. . HTML5 Rocks. 2012-02-09 [2015-12-27]. (原始内容存档于2022-02-08).
- Parisi, Tony. . O'Reilly Media, Incorporated. 2012-08-15 [2017-06-11]. (原始内容存档于2013-02-01).
- WebGL - OpenGL ES 2.0 for the Web
- . Khronos.org. [2011-05-14]. (原始内容存档于2012-04-12).
- . Khronos.org. [2017-02-27]. (原始内容存档于2017-01-28).
- . Blog.vlad1.com. [2011-05-14]. (原始内容存档于2011-07-17).
- . My.opera.com. 2007-11-26 [2011-05-14]. (原始内容存档于2007-11-17).
- . Khronos.org. 2009-08-04 [2011-05-14]. (原始内容存档于2012-04-12).
- . Bodybrowser.googlelabs.com. [2011-05-14]. (原始内容存档于2011-05-13).
- Bhanoo, Sindya N. . Well.blogs.nytimes.com. 2010-12-23 [2011-05-14]. (原始内容存档于2015-02-06).
- . khronos.org. 2013-09-26 [2013-10-28]. (原始内容存档于2017-08-08).
- . [2017-06-11]. (原始内容存档于2017-01-28).
- . [2017-06-11]. (原始内容存档于2017-08-28).
- . webgl.org. [2015-12-27]. (原始内容存档于2015-04-18).
- . webglreport.com. [2017-06-11]. (原始内容存档于2015-05-28).
- . browserleaks.com. [2017-06-11]. (原始内容存档于2015-05-20).
- Paul Mah. . FierceCIO. February 8, 2011 [2012-03-20]. (原始内容存档于2011-10-25).
- . learningwebgl.com. [2015-12-27]. (原始内容存档于2015-05-28).
- . [2022-03-24]. (原始内容存档于2022-04-17) (美国英语).
- . Chromium Blog. [2022-03-24]. (原始内容存档于2022-04-22) (英语).
- . web.archive.org. 2014-08-08 [2022-03-24]. 原始内容存档于2014-08-08.
- Brandon Jones. . [2022-03-24]. (原始内容存档于2022-04-19) (英语).
- . 微软. [2014-03-05]. (原始内容存档于2015-03-24).
- . Iewebgl. [2014-08-14]. (原始内容存档于2022-02-08).
- . Mozilla.com. 2011-03-22 [2012-03-20]. (原始内容存档于2011-03-23).
- . Fairerplatform.com. 2011-05-03 [2012-03-20]. (原始内容存档于2012-03-19).
- . Ikriz.nl. 2011-08-23 [2012-03-20]. (原始内容存档于2012-03-04).
- . Khronos.org. 2012-01-13 [2012-03-20]. (原始内容存档于2015-05-28).
- . Khronos.org. 2011-09-03 [2012-03-20]. (原始内容存档于2015-03-21).
- . Webkit.org. [2012-03-20]. (原始内容存档于2012-03-08).
- . My.opera.com. 2011-02-28 [2012-03-20]. (原始内容存档于2011-03-03).
- . My.opera.com. 2011-10-13 [2012-03-20]. (原始内容存档于2011-10-15).
- . [2015-09-16]. (原始内容存档于2022-04-15).
- iclkevin. . iChemLabs. 2011-11-12 [2011-11-25]. (原始内容存档于2013-03-12).
- Kersey, Jason. . Chrome Releases Blog. Google. [2013-08-23]. (原始内容存档于2015-04-03).
- . Opera Software. [27 February 2012]. (原始内容存档于2012年3月1日).
- . [2015-09-16]. (原始内容存档于2022-04-15).
- Cunningham, Andrew. . Ars Technica. 2014-09-17 [2014-09-19]. (原始内容存档于2014-09-20).
外部链接
- 官方网站
- WebGL (页面存档备份,存于)于MDN Web Docs
- 突破次元壁的网页体验:WebGL 十项精彩案例分享 (页面存档备份,存于)