imported>糯米花：使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器); 連結至Opera (瀏覽器)）。

2025-05-11T17:14:10Z

使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器); 連結至Opera (瀏覽器)）。

新页面

{{noteTA
|G1 = IT
}}
{{Infobox software
|name = WebGL
|logo = [[File:WebGL Logo.svg|192px]]
|screenshot =
|caption =
|author = [[Mozilla基金会]]
|developer = [[Khronos Group|WebGL Working Group]]
|released = {{release date|2011|03|03}}<ref name=WebGLFinal />
|latest_release_version = 2.0
|latest_release_date = {{release date|2017|01|17}}
|latest_preview_version =
|latest_preview_date =
|operating_system = [[跨平台]]
|genre = [[API]]
|website = [http://www.khronos.org/webgl/ www.khronos.org/webgl/]
}}
{{HTML}}
'''WebGL'''是一種[[JavaScript]] [[API]]，用於在不使用[[外掛程式]]的情況下在任何相容的[[網頁瀏覽器]]中呈現交互式2D和3D圖形<ref>{{cite web|url=http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/|title=WebGL Fundamentals|author=Gregg Tavares|date=2012-02-09|publisher=HTML5 Rocks|access-date=2015-12-27|archive-date=2022-02-08|archive-url=https://web.archive.org/web/20220208143903/https://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/}}</ref>。WebGL完全整合到瀏覽器的所有網頁標準中，可將影像處理和效果的GPU加速使用方式當做網頁Canvas的一部分。WebGL元素可以加入其他HTML元素之中並與網頁或網頁背景的其他部分混合<ref>{{cite web|url=http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|title=WebGL: Up and Running|last=Parisi|first=Tony|date=2012-08-15|publisher=O'Reilly Media, Incorporated|accessdate=2017-06-11|archive-date=2013-02-01|archive-url=https://archive.today/20130201234333/http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|dead-url=no}}</ref>。WebGL程序由JavaScript編寫的控制代碼和[[OpenGL Shading Language]]（GLSL）編寫的[[著色器]]代碼組成，該語言類似於[[C語言|C]]或[[C++]]，並在電腦的[[圖形處理器]]（GPU）上執行。WebGL由[[非營利]][[Khronos Group]]設計和維護<ref name=WebGLWebsite/>。

== 設計 ==
WebGL 1.0基于[[OpenGL ES|OpenGL ES 2.0]]，並提供了3D圖形的[[API]]<ref name=WebGLSpecification>{{cite web |url=http://www.khronos.org/registry/webgl/specs/latest/ |title=WebGL Specification |publisher=Khronos.org |date= |accessdate=2011-05-14 |archive-date=2012-04-12 |archive-url=https://www.webcitation.org/66sDuMmiT?url=http://www.khronos.org/registry/webgl/specs/latest/ |dead-url=no }}</ref>。它使用[[HTML5]] [[Canvas (HTML元素)|Canvas]]并允许利用[[文档对象模型]]接口。WebGL 2.0基于[[OpenGL ES|OpenGL ES 3.0]]，確保了提供許多選擇性的WebGL 1.0擴充功能，並引入新的API<ref name=WebGL2Specification>{{cite web |url=https://www.khronos.org/registry/webgl/specs/latest/2.0/ |title=WebGL 2.0 Specification |publisher=Khronos.org |date= |accessdate=2017-02-27 |archive-date=2017-01-28 |archive-url=https://web.archive.org/web/20170128112311/https://www.khronos.org/registry/webgl/specs/latest/2.0/ }}</ref>。可利用部分[[Javascript]]实现[[垃圾回收 (计算机科学)|自动記憶體管理]]<ref name="WebGLWebsite" />。

== 歷史 ==
WebGL起源於Mozilla員工[[弗拉基米爾·弗基西維奇]]一項稱為Canvas 3D的實驗計畫。2006年，弗基西維奇首次展示了Canvas 3D的原型。2007年底在Firefox<ref>{{cite web|url=http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archiveurl=https://web.archive.org/web/20110717224855/http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/|archivedate=2011-07-17|title=Canvas 3D: GL power, web-style|publisher=Blog.vlad1.com|date=|accessdate=2011-05-14|deadurl=yes}}</ref>和Opera<ref>{{cite web |url=http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension |title=Taking the canvas to another dimension |publisher=My.opera.com |date=2007-11-26 |accessdate=2011-05-14 |archiveurl=https://web.archive.org/web/20071117170113/http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension |archivedate=2007-11-17 |deadurl=yes }}</ref>被實作。

在2009年初，[[非營利]]技術[[聯盟]]Khronos Group啟動了WebGL的工作組，最初的工作成員包括[[蘋果公司|Apple]]、[[Google]]、[[Mozilla基金會|Mozilla]]、[[Opera (瀏覽器)|Opera]]等<ref name=WebGLWebsite/><ref name=WebGLAnnouncement>{{cite web |url=http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet |title=Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet |publisher=Khronos.org |date=2009-08-04 |accessdate=2011-05-14 |deadurl=yes |archiveurl=https://www.webcitation.org/66sDuttIe?url=http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet |archivedate=2012-04-12 }}</ref>。2011年3月發布WebGL 1.0規範<ref name=WebGLFinal>{{cite web|title=Khronos Releases Final WebGL 1.0 Specification|url=http://www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specification|accessdate=2015-05-18|archive-date=2016-11-08|archive-url=https://web.archive.org/web/20161108073248/https://www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specification|dead-url=no}}</ref>。截至2012年3月，工作組的主席由肯·羅素（Ken Russell，全名「Kenneth Bradley Russell」）擔任。

WebGL的早期應用包括[[Zygote Body]]<ref>{{cite web |url=http://bodybrowser.googlelabs.com |title=Google Body – Google Labs |publisher=Bodybrowser.googlelabs.com |date= |accessdate=2011-05-14 |deadurl=yes |archiveurl=https://web.archive.org/web/20110513162725/http://bodybrowser.googlelabs.com/ |archivedate=2011-05-13 }}</ref><ref>{{cite web |last=Bhanoo |first=Sindya N. |url=http://well.blogs.nytimes.com/2010/12/23/new-from-google-the-body-browser/ |title=New From Google: The Body Browser |publisher=Well.blogs.nytimes.com |date=2010-12-23 |accessdate=2011-05-14 |archive-date=2015-02-06 |archive-url=https://web.archive.org/web/20150206170420/http://well.blogs.nytimes.com/2010/12/23/new-from-google-the-body-browser/ }}</ref>。

WebGL 2規範的發展始於2013年，並於2017年1月完成<ref>{{cite web |url=http://www.khronos.org/registry/webgl/specs/latest/2.0/ |title=WebGL 2 Specification |publisher=khronos.org |date=2013-09-26 |accessdate=2013-10-28 |archive-date=2017-08-08 |archive-url=https://web.archive.org/web/20170808155014/https://www.khronos.org/registry/webgl/specs/latest/2.0/ }}</ref>。該規範基於OpenGL ES 3.0<ref>{{Cite web |url=https://www.khronos.org/registry/webgl/specs/latest/2.0/ |title=存档副本 |access-date=2017-06-11 |archive-date=2017-01-28 |archive-url=https://web.archive.org/web/20170128112311/https://www.khronos.org/registry/webgl/specs/latest/2.0/ }}</ref>。首度實作在Firefox 51、Chrome 56和Opera 43中<ref>{{Cite web |url=https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API |title=存档副本 |access-date=2017-06-11 |archive-date=2017-08-28 |archive-url=https://web.archive.org/web/20170828234423/https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API }}</ref>。

== 支援 ==
目前，WebGL在最新的瀏覽器中被廣泛支援。然而，其可用性取決於其他因素，如GPU支援。WebGL官方網站提供了一個簡單的測試頁<ref>{{cite web|url=http://get.webgl.org/|title=WebGL test page|work=webgl.org|access-date=2015-12-27|archive-date=2015-04-18|archive-url=https://web.archive.org/web/20150418085325/http://get.webgl.org/}}</ref>。而第三方網站提供了更詳細的訊息（如瀏覽器使用的渲染器以及可用的擴展）<ref>{{cite web|url=http://webglreport.com/|title=WebGL Report|work=webglreport.com|access-date=2017-06-11|archive-date=2015-05-28|archive-url=https://web.archive.org/web/20150528155824/http://webglreport.com/}}</ref><ref>{{cite web|url=http://www.browserleaks.com/webgl|title=WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks|work=browserleaks.com|access-date=2017-06-11|archive-date=2015-05-20|archive-url=https://web.archive.org/web/20150520021954/http://www.browserleaks.com/webgl}}</ref>。

=== 桌面瀏覽器 ===
* [[Google Chrome]] – 從9.0開始支援預設啟用了 WebGL <ref>{{cite web |author=Paul Mah |url=http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |title=Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch |publisher=FierceCIO |date=February 8, 2011 |accessdate=2012-03-20 |archive-url=https://web.archive.org/web/20111025103023/http://www.fiercecio.com/techwatch/story/google-releases-chrome-9-comes-google-instant-webgl/2011-02-08 |archive-date=2011-10-25 |dead-url=yes }}</ref><ref>{{cite web|url=http://learningwebgl.com/blog/?p=3103|title=WebGL in Chrome Stable! - Learning WebGL|work=learningwebgl.com|access-date=2015-12-27|archive-url=https://web.archive.org/web/20150528155734/http://learningwebgl.com/blog/?p=3103|archive-date=2015-05-28|dead-url=yes}}</ref>。在Windows上，默認情況下，Chrome使用ANGLE渲染器將OpenGL ES轉換為[[DirectX|Direct X]] 9.0c或11.0，後者具有更好的驅動程序支援<ref name="#1">{{Cite web|title=(WebGL) How to Enable Native OpenGL in your Browser (Windows) {{!}} Geeks3D|url=https://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/|access-date=2022-03-24|language=en-US|archive-date=2022-04-17|archive-url=https://web.archive.org/web/20220417203924/http://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/}}</ref>。在Linux和Mac OS X上，默認渲染器是OpenGL<ref>{{Cite web|title=Introducing the ANGLE Project|url=https://blog.chromium.org/2010/03/introducing-angle-project.html|access-date=2022-03-24|work=Chromium Blog|language=en|archive-date=2022-04-22|archive-url=https://web.archive.org/web/20220422004732/https://blog.chromium.org/2010/03/introducing-angle-project.html}}</ref>，也可以強制OpenGL作為Windows上的渲染器<ref name="#1"/>。2013年9月起，Chrome還推出了更新的Direct3D 11渲染器，但需要更新的顯卡<ref>{{Cite web|title=WebGL around the net, 17 Oct 2013 {{!}} Learning WebGL|url=http://learningwebgl.com/blog/?p=5956|access-date=2022-03-24|date=2014-08-08|work=web.archive.org|archive-date=2014-08-08|archive-url=https://web.archive.org/web/20140808045751/http://learningwebgl.com/blog/?p=5956|dead-url=unfit}}</ref><ref>{{Cite web|title=At last! Chrome D3D11 day has come!|url=https://blog.tojicode.com/2013/09/at-last-chrome-d3d11-day-has-come.html|access-date=2022-03-24|last=Brandon Jones|language=en|archive-date=2022-04-19|archive-url=https://web.archive.org/web/20220419223126/https://blog.tojicode.com/2013/09/at-last-chrome-d3d11-day-has-come.html}}</ref>。 Chrome 56+支援WebGL 2.0。
* [[Internet Explorer]] – 从[[Internet Explorer 11|11]]开始支持<ref>{{cite web |url = http://msdn.microsoft.com/en-us/library/ie/bg182648(v=vs.85).aspx |title = WebGL (Windows) |publisher = 微软 |accessdate = 2014-03-05 |archive-date = 2015-03-24 |archive-url = https://web.archive.org/web/20150324145511/https://msdn.microsoft.com/en-us/library/ie/bg182648(v=vs.85).aspx }}</ref>。Internet Explorer 11 最初未能通過大多數官方的WebGL一致性測試，但微軟後來發佈了幾個更新，最新的0.94 WebGL引擎目前通過了約97%的Khronos測試。較舊的版本可以安裝第三方外掛程式來支援，如IEWebGL<ref>{{cite web|title=IEWebGL|url=https://github.com/iewebgl/iewebgl|accessdate=2014-08-14|date=|publisher=Iewebgl|archive-date=2022-02-08|archive-url=https://web.archive.org/web/20220208065526/https://github.com/iewebgl/iewebgl}}</ref>。
* [[Mozilla Firefox]] – 從4.0開始支援預設啟用<ref>{{cite web |url=http://www.mozilla.com/en-US/firefox/4.0/releasenotes/ |title=Mozilla Firefox 4 Release Notes |publisher=Mozilla.com |date=2011-03-22 |accessdate=2012-03-20 |archive-url=https://web.archive.org/web/20110323143835/http://www.mozilla.com/en-US/firefox/4.0/releasenotes/ |archive-date=2011-03-23 |dead-url=yes }}</ref>。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，預設情況下禁用<ref>{{cite web |url=http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |title=New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more |publisher=Fairerplatform.com |date=2011-05-03 |accessdate=2012-03-20 |deadurl=yes |archiveurl=https://web.archive.org/web/20120319172926/http://fairerplatform.com/2011/05/new-in-os-x-lion-safari-5-1-brings-webgl-do-not-track-and-more/ |archivedate=2012-03-19 }}</ref><ref>{{cite web |url=http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |title=Enable WebGL in Safari |publisher=Ikriz.nl |date=2011-08-23 |accessdate=2012-03-20 |archive-date=2012-03-04 |archive-url=https://web.archive.org/web/20120304215012/http://www.ikriz.nl/2011/08/23/enable-webgl-in-safari |dead-url=yes }}</ref><ref>{{cite web |url=http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation |title=Getting a WebGL Implementation |publisher=Khronos.org |date=2012-01-13 |accessdate=2012-03-20 |archive-date=2015-05-28 |archive-url=https://web.archive.org/web/20150528162541/https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation }}</ref><ref>{{cite web |url=http://www.khronos.org/webgl/wiki/Implementations/WebKit |title=Implementations/WebKit |publisher=Khronos.org |date=2011-09-03 |accessdate=2012-03-20 |archive-date=2015-03-21 |archive-url=https://web.archive.org/web/20150321015216/https://www.khronos.org/webgl/wiki/Implementations/WebKit }}</ref><ref>{{cite web |url=http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |title=WebGL Now Available in WebKit Nightlies |publisher=Webkit.org |date= |accessdate=2012-03-20 |deadurl=yes |archiveurl=https://web.archive.org/web/20120308195003/http://www.webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/ |archivedate=2012-03-08 }}</ref>。Safari版本12（在MacOS Mojave中可用）支援WebGL 2.0，目前作為"實驗性"功能。
* [[Opera (瀏覽器)|Opera]] – 需自行啟用<ref>{{cite web |url=http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2 |title=WebGL and Hardware Acceleration |publisher=My.opera.com |date=2011-02-28 |accessdate=2012-03-20 |archiveurl=https://web.archive.org/web/20110303150523/http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2 |archivedate=2011-03-03 |deadurl=yes }}</ref><ref>{{cite web |url=http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha |title=Introducing Opera 12 alpha |publisher=My.opera.com |date=2011-10-13 |accessdate=2012-03-20 |archiveurl=https://web.archive.org/web/20111015055222/http://my.opera.com/desktopteam/blog/2011/10/13/introducing-opera-12-alpha |archivedate=2011-10-15 |deadurl=yes }}</ref>。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

=== 行動瀏覽器 ===
* [[Firefox OS]]<ref name="mobilehtml5.org"/>
* [[Firefox for mobile]]<ref>{{cite web|author=iclkevin|url=http://www.ichemlabs.com/1375|title=WebGL on Mobile Devices|publisher=iChemLabs|date=2011-11-12|accessdate=2011-11-25|archive-url=https://www.webcitation.org/6F4DXifjJ?url=http://www.ichemlabs.com/1375|archive-date=2013-03-12|dead-url=yes}}</ref><ref name="mobilehtml5.org">{{cite web|url=http://mobilehtml5.org/|title=Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices|accessdate=2015-09-16|archive-date=2022-04-15|archive-url=https://web.archive.org/web/20220415202509/http://mobilehtml5.org/}}</ref>
* [[Google Chrome]]<ref>{{cite web|last=Kersey|first=Jason|title=Chrome Beta for Android Update|url=http://googlechromereleases.blogspot.com/2013/08/chrome-beta-for-android-update_22.html|work=Chrome Releases Blog|publisher=Google|accessdate=2013-08-23|archive-date=2015-04-03|archive-url=https://web.archive.org/web/20150403055822/http://googlechromereleases.blogspot.com/2013/08/chrome-beta-for-android-update_22.html}}</ref>
* [[Opera Mobile]]<ref>{{cite web|title=Opera Mobile 12|url=http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|publisher=Opera Software|accessdate=27 February 2012|archiveurl=https://web.archive.org/web/20120301005014/http://my.opera.com/mobile/blog/2012/02/27/opera-mobile-12|archivedate=2012年3月1日|deadurl=yes}}</ref>
* [[Tizen]]<ref>{{cite web|url=https://html5test.com/compare/browser/tizen-2.3.html|title=HTML5test - How well does your browser support HTML5?|accessdate=2015-09-16|archive-date=2022-04-15|archive-url=https://web.archive.org/web/20220415225425/https://html5test.com/compare/browser/tizen-2.3.html}}</ref>
* [[Ubuntu Touch]]
* [[WebOS]]
* [[iOS]]<ref>{{cite web|last=Cunningham|first=Andrew|title=iOS 8, Thoroughly Reviewed|url=http://arstechnica.com/apple/2014/09/ios-8-thoroughly-reviewed/7/|accessdate=2014-09-19|date=2014-09-17|publisher=Ars Technica|archive-date=2014-09-20|archive-url=https://web.archive.org/web/20140920204220/http://arstechnica.com/apple/2014/09/ios-8-thoroughly-reviewed/7/|dead-url=no}}</ref>

== 参考文献 ==
{{Reflist|3|refs=
<ref name="WebGLWebsite">[http://www.khronos.org/webgl/ WebGL - OpenGL ES 2.0 for the Web]</ref>
}}

== 外部链接 ==
* {{Official website}}
* [http://developer.mozilla.org/en/WebGL WebGL] {{Wayback|url=http://developer.mozilla.org/en/WebGL |date=20110426110602 }}於[[MDN Web Docs]]

== 參見 ==
* [[HTML5]]
* [[OpenGL]]
* [[WebGPU]]
* [[WebVR]]{{-}}
{{Khronos Group standards}}
{{Web interfaces}}
{{Web browser}}
[[Category:網站開發]]
[[Category:網頁技術]]
[[Category:应用程序接口]]
[[Category:繪圖函式庫]]
[[Category:OpenGL]]

WebGL - 版本历史

imported>糯米花：​使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器); 連結至Opera (瀏覽器)）。

imported>糯米花：使用DisamAssist清理消歧義連結：Opera（連結至Opera (瀏覽器); 連結至Opera (瀏覽器)）。