WebGL

WebGL
原作者	Mozilla基金會
開發者	WebGL Working Group
首次發布	2011年3月3日
當前版本	2.0（2017年1月17日）
操作系統	跨平台
類型	API
網站	www.khronos.org/webgl/

WebGL是一種JavaScript API，用於在不使用外掛程式的情況下在任何相容的網頁瀏覽器中呈現交互式2D和3D圖形^[2]。WebGL完全整合到瀏覽器的所有網頁標準中，可將影像處理和效果的GPU加速使用方式當做網頁Canvas的一部分。WebGL元素可以加入其他HTML元素之中並與網頁或網頁背景的其他部分混合^[3]。WebGL程序由JavaScript編寫的控制代碼和OpenGL Shading Language（GLSL）編寫的著色器代碼組成，該語言類似於C或C++，並在電腦的圖形處理器（GPU）上執行。WebGL由非營利 Khronos Group設計和維護^[4]。

Quick Facts 原作者, 開發者 ...

Close

WebGL 1.0基於OpenGL ES 2.0，並提供了3D圖形的API^[5]。它使用HTML5 Canvas並允許利用文檔對象模型接口。WebGL 2.0基於OpenGL ES 3.0，確保了提供許多選擇性的WebGL 1.0擴充功能，並引入新的API^[6]。可利用部分Javascript實現自動記憶體管理^[4]。

WebGL起源於Mozilla員工弗拉基米爾·弗基西維奇一項稱為Canvas 3D的實驗計畫。2006年，弗基西維奇首次展示了Canvas 3D的原型。2007年底在Firefox^[7]和Opera^[8]被實作。

在2009年初，非營利技術聯盟Khronos Group啟動了WebGL的工作組，最初的工作成員包括Apple、Google、Mozilla、Opera等^[4]^[9]。2011年3月發布WebGL 1.0規範^[1]。截至2012年3月，工作組的主席由肯·羅素（Ken Russell，全名「Kenneth Bradley Russell」）擔任。

WebGL的早期應用包括Zygote Body^[10]^[11]。

WebGL 2規範的發展始於2013年，並於2017年1月完成^[12]。該規範基於OpenGL ES 3.0^[13]。首度實作在Firefox 51、Chrome 56和Opera 43中^[14]。

目前，WebGL在最新的瀏覽器中被廣泛支援。然而，其可用性取決於其他因素，如GPU支援。WebGL官方網站提供了一個簡單的測試頁^[15]。而第三方網站提供了更詳細的訊息（如瀏覽器使用的渲染器以及可用的擴展）^[16]^[17]。

桌面瀏覽器

Google Chrome – 從9.0開始支援預設啟用了 WebGL ^[18]^[19]。在Windows上，默認情況下，Chrome使用ANGLE渲染器將OpenGL ES轉換為Direct X 9.0c或11.0，後者具有更好的驅動程序支援^[20]。在Linux和Mac OS X上，默認渲染器是OpenGL^[21]，也可以強制OpenGL作為Windows上的渲染器^[20]。2013年9月起，Chrome還推出了更新的Direct3D 11渲染器，但需要更新的顯卡^[22]^[23]。 Chrome 56+支援WebGL 2.0。
Internet Explorer – 從11開始支持^[24]。Internet Explorer 11 最初未能通過大多數官方的WebGL一致性測試，但微軟後來發佈了幾個更新，最新的0.94 WebGL引擎目前通過了約97%的Khronos測試。較舊的版本可以安裝第三方外掛程式來支援，如IEWebGL^[25]。
Mozilla Firefox – 從4.0開始支援預設啟用^[26]。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，預設情況下禁用^[27]^[28]^[29]^[30]^[31]。Safari版本12（在MacOS Mojave中可用）支援WebGL 2.0，目前作為"實驗性"功能。
Opera – 需自行啟用^[32]^[33]。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

行動瀏覽器

[1]
Khronos Releases Final WebGL 1.0 Specification. [2015-05-18]. （原始內容存檔於2016-11-08）.
[2]
Gregg Tavares. WebGL Fundamentals. HTML5 Rocks. 2012-02-09 [2015-12-27]. （原始內容存檔於2022-02-08）.
[3]
Parisi, Tony. WebGL: Up and Running. O'Reilly Media, Incorporated. 2012-08-15 [2017-06-11]. （原始內容存檔於2013-02-01）.
[4]
WebGL - OpenGL ES 2.0 for the Web
[5]
WebGL Specification. Khronos.org. [2011-05-14]. （原始內容存檔於2012-04-12）.
[6]
WebGL 2.0 Specification. Khronos.org. [2017-02-27]. （原始內容存檔於2017-01-28）.
[7]
Canvas 3D: GL power, web-style. Blog.vlad1.com. [2011-05-14]. （原始內容存檔於2011-07-17）.
[8]
Taking the canvas to another dimension. My.opera.com. 2007-11-26 [2011-05-14]. （原始內容存檔於2007-11-17）.
[9]
Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet. Khronos.org. 2009-08-04 [2011-05-14]. （原始內容存檔於2012-04-12）.
[10]
Google Body – Google Labs. Bodybrowser.googlelabs.com. [2011-05-14]. （原始內容存檔於2011-05-13）.
[11]
Bhanoo, Sindya N. New From Google: The Body Browser. Well.blogs.nytimes.com. 2010-12-23 [2011-05-14]. （原始內容存檔於2015-02-06）.
[12]
WebGL 2 Specification. khronos.org. 2013-09-26 [2013-10-28]. （原始內容存檔於2017-08-08）.
[13]
存档副本. [2017-06-11]. （原始內容存檔於2017-01-28）.
[14]
存档副本. [2017-06-11]. （原始內容存檔於2017-08-28）.
[15]
WebGL test page. webgl.org. [2015-12-27]. （原始內容存檔於2015-04-18）.
[16]
WebGL Report. webglreport.com. [2017-06-11]. （原始內容存檔於2015-05-28）.
[17]
WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks. browserleaks.com. [2017-06-11]. （原始內容存檔於2015-05-20）.
[18]
Paul Mah. Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch. FierceCIO. February 8, 2011 [2012-03-20]. （原始內容存檔於2011-10-25）.
[19]
WebGL in Chrome Stable! - Learning WebGL. learningwebgl.com. [2015-12-27]. （原始內容存檔於2015-05-28）.
[20]
(WebGL) How to Enable Native OpenGL in your Browser (Windows) | Geeks3D. [2022-03-24]. （原始內容存檔於2022-04-17）（美國英語）.
[21]
Introducing the ANGLE Project. Chromium Blog. [2022-03-24]. （原始內容存檔於2022-04-22）（英語）.
[22]
WebGL around the net, 17 Oct 2013 | Learning WebGL. web.archive.org. 2014-08-08 [2022-03-24]. 原始內容存檔於2014-08-08.
[23]
Brandon Jones. At last! Chrome D3D11 day has come!. [2022-03-24]. （原始內容存檔於2022-04-19）（英語）.
[24]
WebGL (Windows). 微軟. [2014-03-05]. （原始內容存檔於2015-03-24）.
[25]
IEWebGL. Iewebgl. [2014-08-14]. （原始內容存檔於2022-02-08）.
[26]
Mozilla Firefox 4 Release Notes. Mozilla.com. 2011-03-22 [2012-03-20]. （原始內容存檔於2011-03-23）.
[27]
New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more. Fairerplatform.com. 2011-05-03 [2012-03-20]. （原始內容存檔於2012-03-19）.
[28]
Enable WebGL in Safari. Ikriz.nl. 2011-08-23 [2012-03-20]. （原始內容存檔於2012-03-04）.
[29]
Getting a WebGL Implementation. Khronos.org. 2012-01-13 [2012-03-20]. （原始內容存檔於2015-05-28）.
[30]
Implementations/WebKit. Khronos.org. 2011-09-03 [2012-03-20]. （原始內容存檔於2015-03-21）.
[31]
WebGL Now Available in WebKit Nightlies. Webkit.org. [2012-03-20]. （原始內容存檔於2012-03-08）.
[32]
WebGL and Hardware Acceleration. My.opera.com. 2011-02-28 [2012-03-20]. （原始內容存檔於2011-03-03）.
[33]
Introducing Opera 12 alpha. My.opera.com. 2011-10-13 [2012-03-20]. （原始內容存檔於2011-10-15）.
[34]
Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices. [2015-09-16]. （原始內容存檔於2022-04-15）.
[35]
iclkevin. WebGL on Mobile Devices. iChemLabs. 2011-11-12 [2011-11-25]. （原始內容存檔於2013-03-12）.
[36]
Kersey, Jason. Chrome Beta for Android Update. Chrome Releases Blog. Google. [2013-08-23]. （原始內容存檔於2015-04-03）.
[37]
Opera Mobile 12. Opera Software. [27 February 2012]. （原始內容存檔於2012年3月1日）.
[38]
HTML5test - How well does your browser support HTML5?. [2015-09-16]. （原始內容存檔於2022-04-15）.
[39]
Cunningham, Andrew. iOS 8, Thoroughly Reviewed. Ars Technica. 2014-09-17 [2014-09-19]. （原始內容存檔於2014-09-20）.

官方網站
WebGL （頁面存檔備份，存於網際網路檔案館）於MDN Web Docs

[WebGLFinal-1] [1]
Khronos Releases Final WebGL 1.0 Specification. [2015-05-18]. （原始內容存檔於2016-11-08）.

[2] [2]
Gregg Tavares. WebGL Fundamentals. HTML5 Rocks. 2012-02-09 [2015-12-27]. （原始內容存檔於2022-02-08）.

[3] [3]
Parisi, Tony. WebGL: Up and Running. O'Reilly Media, Incorporated. 2012-08-15 [2017-06-11]. （原始內容存檔於2013-02-01）.

[WebGLWebsite-4] [4]
WebGL - OpenGL ES 2.0 for the Web

[WebGLSpecification-5] [5]
WebGL Specification. Khronos.org. [2011-05-14]. （原始內容存檔於2012-04-12）.

[WebGL2Specification-6] [6]
WebGL 2.0 Specification. Khronos.org. [2017-02-27]. （原始內容存檔於2017-01-28）.

[7] [7]
Canvas 3D: GL power, web-style. Blog.vlad1.com. [2011-05-14]. （原始內容存檔於2011-07-17）.

[8] [8]
Taking the canvas to another dimension. My.opera.com. 2007-11-26 [2011-05-14]. （原始內容存檔於2007-11-17）.

[WebGLAnnouncement-9] [9]
Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet. Khronos.org. 2009-08-04 [2011-05-14]. （原始內容存檔於2012-04-12）.

[10] [10]
Google Body – Google Labs. Bodybrowser.googlelabs.com. [2011-05-14]. （原始內容存檔於2011-05-13）.

[11] [11]
Bhanoo, Sindya N. New From Google: The Body Browser. Well.blogs.nytimes.com. 2010-12-23 [2011-05-14]. （原始內容存檔於2015-02-06）.

[12] [12]
WebGL 2 Specification. khronos.org. 2013-09-26 [2013-10-28]. （原始內容存檔於2017-08-08）.

[13] [13]
存档副本. [2017-06-11]. （原始內容存檔於2017-01-28）.

[14] [14]
存档副本. [2017-06-11]. （原始內容存檔於2017-08-28）.

[15] [15]
WebGL test page. webgl.org. [2015-12-27]. （原始內容存檔於2015-04-18）.

[16] [16]
WebGL Report. webglreport.com. [2017-06-11]. （原始內容存檔於2015-05-28）.

[17] [17]
WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks. browserleaks.com. [2017-06-11]. （原始內容存檔於2015-05-20）.

[18] [18]
Paul Mah. Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch. FierceCIO. February 8, 2011 [2012-03-20]. （原始內容存檔於2011-10-25）.

[19] [19]
WebGL in Chrome Stable! - Learning WebGL. learningwebgl.com. [2015-12-27]. （原始內容存檔於2015-05-28）.

[#1-20] [20]
(WebGL) How to Enable Native OpenGL in your Browser (Windows) | Geeks3D. [2022-03-24]. （原始內容存檔於2022-04-17）（美國英語）.

[21] [21]
Introducing the ANGLE Project. Chromium Blog. [2022-03-24]. （原始內容存檔於2022-04-22）（英語）.

[22] [22]
WebGL around the net, 17 Oct 2013 | Learning WebGL. web.archive.org. 2014-08-08 [2022-03-24]. 原始內容存檔於2014-08-08.

[23] [23]
Brandon Jones. At last! Chrome D3D11 day has come!. [2022-03-24]. （原始內容存檔於2022-04-19）（英語）.

[24] [24]
WebGL (Windows). 微軟. [2014-03-05]. （原始內容存檔於2015-03-24）.

[25] [25]
IEWebGL. Iewebgl. [2014-08-14]. （原始內容存檔於2022-02-08）.

[26] [26]
Mozilla Firefox 4 Release Notes. Mozilla.com. 2011-03-22 [2012-03-20]. （原始內容存檔於2011-03-23）.

[27] [27]
New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more. Fairerplatform.com. 2011-05-03 [2012-03-20]. （原始內容存檔於2012-03-19）.

[28] [28]
Enable WebGL in Safari. Ikriz.nl. 2011-08-23 [2012-03-20]. （原始內容存檔於2012-03-04）.

[29] [29]
Getting a WebGL Implementation. Khronos.org. 2012-01-13 [2012-03-20]. （原始內容存檔於2015-05-28）.

[30] [30]
Implementations/WebKit. Khronos.org. 2011-09-03 [2012-03-20]. （原始內容存檔於2015-03-21）.

[31] [31]
WebGL Now Available in WebKit Nightlies. Webkit.org. [2012-03-20]. （原始內容存檔於2012-03-08）.

[32] [32]
WebGL and Hardware Acceleration. My.opera.com. 2011-02-28 [2012-03-20]. （原始內容存檔於2011-03-03）.

[33] [33]
Introducing Opera 12 alpha. My.opera.com. 2011-10-13 [2012-03-20]. （原始內容存檔於2011-10-15）.

[mobilehtml5.org-34] [34]
Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices. [2015-09-16]. （原始內容存檔於2022-04-15）.

[35] [35]
iclkevin. WebGL on Mobile Devices. iChemLabs. 2011-11-12 [2011-11-25]. （原始內容存檔於2013-03-12）.

[36] [36]
Kersey, Jason. Chrome Beta for Android Update. Chrome Releases Blog. Google. [2013-08-23]. （原始內容存檔於2015-04-03）.

[37] [37]
Opera Mobile 12. Opera Software. [27 February 2012]. （原始內容存檔於2012年3月1日）.

[38] [38]
HTML5test - How well does your browser support HTML5?. [2015-09-16]. （原始內容存檔於2022-04-15）.

[39] [39]
Cunningham, Andrew. iOS 8, Thoroughly Reviewed. Ars Technica. 2014-09-17 [2014-09-19]. （原始內容存檔於2014-09-20）.

[2]

[3]

[4]

[1]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

桌面瀏覽器

行動瀏覽器

Wikiwand in your browser!

WebGL

桌面瀏覽器

行動瀏覽器

Wikiwand in your browser!

設計

歷史

支援

參考文獻

外部連結

參見