WebGL
表示
![]() | |
作者 | Mozilla Foundation |
---|---|
開発元 | Khronos WebGL Working Group |
初版 | 2011年3月3日[1] |
最新版 |
2.0 / 2017年1月17日 |
プラットフォーム | Cross-platform |
対応言語 | English |
種別 | API |
公式サイト |
www |
HTML |
---|
![]() |
WebGL︵ウェブジーエル、Web Graphics Libraryの略称︶は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである[2]。WebGLはウェブ標準に完全に統合されているため、ウェブページのcanvas要素上でGPUアクセラレータを使用した物理シミュレーション、画像処理、画像効果などを表現できる。WebGLの要素は、外側のHTMLと組み合わせたり、ページやページの背景の他のパーツと合成して使用できる[3]。
WebGLのプログラムは、JavaScriptで書かれた制御コードと、CやC++に似た構文のOpenGL ES Shading Language︵GLSL ES︶で書かれたシェーダーのコードから作られ、コンピューターのGPUで実行される。WebGLは非営利団体のKhronos Groupが設計とメンテナンスを行っている。
WebGL 1.0は、ブラウザ上で利用できるOpenGL ES 2.0の派生規格であるが、細部に違いがある[4]。WebGL 2.0は、ブラウザ上で利用できるOpenGL ES 3.0の派生規格であるが、細部に違いがある[5]。
対応ブラウザ
[編集]![]() |
WebGLに対応するウェブブラウザは以下の通り。
●PC
●Microsoft Edge
●Google Chrome8以降 (8は要設定、9から標準で有効)
●Internet Explorer11
●Mozilla Firefox4以降
●Opera12以降[6] (12は要設定、15から標準で有効)
●Safari 5.1以降 (5.1は要設定、8から標準で有効)
●モバイル
●Android ブラウザ - Android 5.0 以降[注 1]
●BlackBerry 10
●Edge
●Firefox for Mobile (Maemoは1.0から、Androidは4から)
●Google Chrome for Android 25以降 (25は要設定、30から標準で有効) [注 2]
●Internet Explorer Mobile 11
●Opera Mobile 12 (Android のみ)
●Safari 8 - iOS8以降。5〜7は iAd の広告のみ対応。
●Tizen 1.0
各ウェブブラウザのWebGL機能対応度を示すデモの動作リストが存在する[7]。主要なブラウザの最新版は全てWebGL 1.0に対応している。WebGL 1.0を利用するには、グラフィックスハードウェア (GPU) がWebGL 1.0 (OpenGL ES 2.0相当の機能) をサポートしている必要があるが、後述するように、バックエンドにハードウェアベンダーが提供するOpenGL/OpenGL ESレイヤーを利用するかどうかは問わない。WebGLは実装形態を問わないAPI規格にすぎないからである。また、後述のセキュリティ上の問題から
GL_ARB_robustness
(OpenGL 3.2) もしくは GL_EXT_robustn
ess
(OpenGL ES 2.0) の対応が必要である。
WebGL 2.0のサポートには、Microsoft Windows上ではDirectX11が、macOS上ではOpenGL 4.1が、Linux上ではOpenGL 3.3といくつかの拡張が、そしてその他のプラットフォームではOpenGL ES 3.0が必要である[8]。
なおWindows版のChromeおよびFirefoxはハードウェアベンダーが提供しているWindows用のOpenGLドライバーを用いるのではなく、ANGLE[9]を経由することで、内部的にDirect3Dを使ってWebGLを実現している[10]。
ユーザーによる利用設定が必要になってしまい、またハードウェアアクセラレーションの恩恵は得られない方法だが、Mesa Off-screen rendering extension (libosmesa6) などを用いれば、ソフトウェアレンダリングによるWebGLの実行も実現可能である。
前述のANGLEや、ソフトウェアレンダリングによるWebGLを利用する場合などを除き、OpenGL 3.2をフルサポートしないハードウェアおよびデバイスドライバ環境では、ユーザーの自己責任のもと、ウェブブラウザ側で強制的に利用する設定をしないとWebGLを利用できない場合がある。
各ブラウザには、WebGLの動作がサポートされないGPUブロックリストが定められている。どのようなOSあるいはブラウザでWebGLを実行するにしても、ブロックリストに載っているGPUを使用する環境では、ユーザーの自己責任においてWebGLを強制的に有効にする設定をしなければWebGLは動作しない。
型付き配列
[編集]Firefoxなどでは、JavaScriptで型付き配列が使える[11]。型付き配列により生のバイナリデータの操作が容易になり、WebGLにデータを渡す際のパフォーマンスが向上する。
歴史
[編集]
WebGLはMozillaのCanvas 3Dの実験から始まった。Mozillaは2006年に最初のCanvas 3Dのプロトタイプのデモンストレーションをした。2007年末に、Mozilla[12]とOpera[13]がそれぞれ別々の独自の実装をした。2009年初頭に、MozillaとKhronosがWebGLワーキンググループを始めた。WebGLワーキンググループはApple、Google、Mozilla、Operaを含んでいる。
セキュリティの懸念
[編集]
2011年5月9日、WebGLに深刻なセキュリティホールが指摘された[14]。問題点は以下の2点。現在は解決済み。
●サービス拒否 (DoS) 攻撃 - WebGLでは制御構造をサポートするプログラマブルシェーダーを使えるが、GPU自体にバグなどがあると、OS全体をクラッシュさせたり、無限ループなどでデバイスドライバの応答を停止させるシェーダープログラムを実行させることができてしまう。
●クロスドメイン画像盗取 - Cross-Origin Resource Sharing に未対応で、他のドメインで使われている画像を取得できた
規格そのものに脆弱性が存在するため、米国のセキュリティ機関US-CERTはブラウザでWebGLを無効にするよう勧告していた[15]。
Firefox 4 と Chrome 12 は標準状態でWebGLが有効になっており、セキュリティ問題を防ぐには手動でWebGLを無効にする必要があった。その後、Chrome 13 ではクロスドメイン問題が修正され、Firefox 5 ではクロスドメインは無効になったが、Firefox 8 から Cross-Origin Resource Sharing が利用可能になった。
DoS攻撃の方は、
GL_ARB_robustness
[16](OpenGL 3.2) または GL_EXT_robustness
[17](OpenGL ES 2.0) を利用できるウェブブラウザに制限することで解決した[18][19]。
ライブラリ
[編集]PixiJS や Three.js、C3DL、WebGLU など、WebGLを使ったライブラリが開発されている。
脚注
[編集]注釈
[編集]
(一)^ サムソンやHTCなどの一部の端末では 4.x から対応している。またAndroid 4.x の環境で﹁メニューボタン﹂の﹁設定﹂から﹁Labs﹂から﹁WebGL﹂のチェックボックスを﹁オン﹂にすることでWebGLを有効化できる場合があるが、Labsの名の通り実験機能である。
(二)^ スマートフォンやタブレットなどの端末の製造メーカー・機種、GPUの製造メーカー・機種、グラフィックスデバイスドライバの開発元およびバージョンなどによっては、Google Chrome for AndroidのGPUブラックリストに含まれているためWebGLが動作しない場合がある。この場合、ユーザーの自己責任となるが、Google Chrome for Androidにて﹁chrome://flags﹂にアクセスして﹁ソフトウェア レンダリング リストをオーバーライド﹂を有効化し、﹁WebGL を無効にする﹂を無効化し、そして﹁今すぐ再起動﹂することでコンテキスト﹁webgl﹂または﹁experimental-webgl﹂でWebGLを動作させることが可能となる。
出典
[編集]
(一)^ WebGLFinal
(二)^ Tavares, Gregg (2012年2月9日). “WebGL Fundamentals”. HTML5 Rocks. 2021年2月23日閲覧。
(三)^ Parisi, Tony (2012年8月15日). “WebGL: Up and Running”. O'Reilly Media, Incorporated. 2013年2月1日時点のオリジナルよりアーカイブ。2012年7月13日閲覧。
(四)^ WebGL Specification
(五)^ WebGL 2 Specification
(六)^ Opera Core Concerns - WebGL and Hardware Acceleration
(七)^ Demo Repository - WebGL Public Wiki
(八)^ WebGL 2.0 Arrives - The Khronos Group Inc
(九)^ angleproject - ANGLE: Almost Native Graphics Layer Engine - Google Project Hosting
(十)^ Windows上でANGLEを使って、WebGLレンダリング
(11)^ JavaScript typed arrays - MDC Doc Center
(12)^ Canvas 3D: GL power, web-style
(13)^ Taking the canvas to another dimension
(14)^ WebGL - A New Dimension for Browser Exploitation
(15)^ 3D表示規格の﹁WebGL﹂に深刻なセキュリティ問題、主要ブラウザに影響 - ITmedia、2011年5月11日
(16)^ GL_ARB_robustness
(17)^ GL_EXT_robustness
(18)^ Bug 93379 - WebGL Add support for EXT_robustness
(19)^ Support GL_EXT_robustness in Chrome's WebGL implementation