WebGL

WebGL（ウェブジーエル、Web Graphics Libraryの略称）は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである。WebGLはウェブ標準に完全に統合されているため、ウェブページのcanvas要素上でGPUアクセラレータを使用した物理シミュレーション、画像処理、画像効果などを表現できる。WebGLの要素は、外側のHTMLと組み合わせたり、ページやページの背景の他のパーツと合成して使用できる。

WebGLのプログラムは、JavaScriptで書かれた制御コードと、CやC++に似た構文のOpenGL ES Shading Language（GLSL ES）で書かれたシェーダーのコードから作られ、コンピューターのGPUで実行される。WebGLは非営利団体のKhronos Groupが設計とメンテナンスを行っている。

WebGL 1.0は、ブラウザ上で利用できるOpenGL ES 2.0の派生規格であるが、細部に違いがあるWebGL Specification。WebGL 2.0は、ブラウザ上で利用できるOpenGL ES 3.0の派生規格であるが、細部に違いがあるWebGL 2 Specification。

対応ブラウザ

WebGLに対応するウェブブラウザは以下の通り。
 PC
 Microsoft Edge
 Google Chrome 8以降 (8は要設定、9から標準で有効)
 Internet Explorer 11
 Mozilla Firefox 4以降
 Opera 12以降Opera Core Concerns - WebGL and Hardware Acceleration (12は要設定、15から標準で有効)
 Safari 5.1以降 (5.1は要設定、8から標準で有効)
 モバイル
 Android ブラウザ - Android 5.0 以降
 BlackBerry 10
 Edge
 Firefox for Mobile (Maemoは1.0から、Androidは4から)
 Google Chrome for Android 25以降 (25は要設定、30から標準で有効) 
 Internet Explorer Mobile 11
 Opera Mobile 12 (Android のみ)
 Safari 8 - iOS 8 以降。5〜7 は iAd の広告のみ対応。
 Tizen 1.0

各ウェブブラウザのWebGL機能対応度を示すデモの動作リストが存在するDemo Repository - WebGL Public Wiki。主要なブラウザの最新版は全て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_robustness (OpenGL ES 2.0) の対応が必要である。

WebGL 2.0のサポートには、Microsoft Windows上ではDirectX 11が、macOS上ではOpenGL 4.1が、Linux上ではOpenGL 3.3といくつかの拡張が、そしてその他のプラットフォームではOpenGL ES 3.0が必要であるWebGL 2.0 Arrives - The Khronos Group Inc。

なおWindows版のChromeおよびFirefoxはハードウェアベンダーが提供しているWindows用のOpenGLドライバーを用いるのではなく、angleproject - ANGLE: Almost Native Graphics Layer Engine - Google Project Hostingを経由することで、内部的にDirect3Dを使ってWebGLを実現しているWindows上でANGLEを使って、WebGLレンダリング。

ユーザーによる利用設定が必要になってしまい、またハードウェアアクセラレーションの恩恵は得られない方法だが、Mesa Off-screen rendering extension (libosmesa6) などを用いれば、ソフトウェアレンダリングによるWebGLの実行も実現可能である。

前述のANGLEや、ソフトウェアレンダリングによるWebGLを利用する場合などを除き、OpenGL 3.2をフルサポートしないハードウェアおよびデバイスドライバ環境では、ユーザーの自己責任のもと、ウェブブラウザ側で強制的に利用する設定をしないとWebGLを利用できない場合がある。

各ブラウザには、WebGLの動作がサポートされないGPUブロックリストが定められている。どのようなOSあるいはブラウザでWebGLを実行するにしても、ブロックリストに載っているGPUを使用する環境では、ユーザーの自己責任においてWebGLを強制的に有効にする設定をしなければWebGLは動作しない。

 型付き配列 
Firefoxなどでは、JavaScriptで型付き配列が使えるJavaScript typed arrays - MDC Doc Center。型付き配列により生のバイナリデータの操作が容易になり、WebGLにデータを渡す際のパフォーマンスが向上する。

歴史
WebGLはMozillaのCanvas 3Dの実験から始まった。Mozillaは2006年に最初のCanvas 3Dのプロトタイプのデモンストレーションをした。2007年末に、MozillaCanvas 3D: GL power, web-styleとOperaTaking the canvas to another dimensionがそれぞれ別々の独自の実装をした。2009年初頭に、MozillaとKhronosがWebGLワーキンググループを始めた。WebGLワーキンググループはApple、Google、Mozilla、Operaを含んでいる。

 セキュリティの懸念 
2011年5月9日、WebGLに深刻なセキュリティホールが指摘されたWebGL - A New Dimension for Browser Exploitation。問題点は以下の2点。現在は解決済み。
サービス拒否 (DoS) 攻撃 - WebGLでは制御構造をサポートするプログラマブルシェーダーを使えるが、GPU自体にバグなどがあると、OS全体をクラッシュさせたり、無限ループなどでデバイスドライバの応答を停止させるシェーダープログラムを実行させることができてしまう。
クロスドメイン画像盗取 - Cross-Origin Resource Sharing に未対応で、他のドメインで使われている画像を取得できた
規格そのものに脆弱性が存在するため、米国のセキュリティ機関US-CERTはブラウザでWebGLを無効にするよう勧告していた3D表示規格の「WebGL」に深刻なセキュリティ問題、主要ブラウザに影響 - ITmedia、2011年5月11日。

Firefox 4 と Chrome 12 は標準状態でWebGLが有効になっており、セキュリティ問題を防ぐには手動でWebGLを無効にする必要があった。その後、Chrome 13 ではクロスドメイン問題が修正され、Firefox 5 ではクロスドメインは無効になったが、Firefox 8 から Cross-Origin Resource Sharing が利用可能になった。

DoS攻撃の方は、GL_ARB_robustnessGL_ARB_robustness(OpenGL 3.2) または GL_EXT_robustnessGL_EXT_robustness(OpenGL ES 2.0) を利用できるウェブブラウザに制限することで解決した Bug 93379 - WebGL Add support for EXT_robustnessSupport GL_EXT_robustness in Chrome's WebGL implementation。

ライブラリ
PixiJS や Three.js、C3DL、WebGLU など、WebGLを使ったライブラリが開発されている。

 脚注 

 注釈 

 出典 

 関連項目 
 OpenGL
 OpenGL ES
 GLSL
 :en:O3D - Googleによる別のWeb 3D技術
 WebCL - ブラウザ向けのOpenCL派生規格
 Three.js
 WebVR

 外部リンク 

 WebGL - Mozilla Developer Network

Category:OpenGL
Category:グラフィックカード
Category:グラフィックライブラリ
Category:API
Category:HTML
Category:ウェブ開発