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 2.0は、ブラウザ上で利用できるOpenGL ES 3.0の派生規格であるが、細部に違いがある。 WebGLに対応するウェブブラウザは以下の通り。 PC Microsoft Edge Google Chrome 8以降 (8は要設定、9から標準で有効) Internet Explorer 11 Mozilla Firefox 4以降 Opera 12以降 (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機能対応度を示すデモの動作リストが存在する。主要なブラウザの最新版は全て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が必要である。 なおWindows版のChromeおよびFirefoxはハードウェアベンダーが提供しているWindows用のOpenGLドライバーを用いるのではなく、ANGLE（英語版）を経由することで、内部的にDirect3Dを使ってWebGLを実現している。 ユーザーによる利用設定が必要になってしまい、またハードウェアアクセラレーションの恩恵は得られない方法だが、Mesa Off-screen rendering extension (libosmesa6) などを用いれば、ソフトウェアレンダリングによるWebGLの実行も実現可能である。 前述のANGLEや、ソフトウェアレンダリングによるWebGLを利用する場合などを除き、OpenGL 3.2をフルサポートしないハードウェアおよびデバイスドライバ環境では、ユーザーの自己責任のもと、ウェブブラウザ側で強制的に利用する設定をしないとWebGLを利用できない場合がある。 各ブラウザには、WebGLの動作がサポートされないGPUブロックリストが定められている。どのようなOSあるいはブラウザでWebGLを実行するにしても、ブロックリストに載っているGPUを使用する環境では、ユーザーの自己責任においてWebGLを強制的に有効にする設定をしなければWebGLは動作しない。 Firefoxなどでは、JavaScriptで型付き配列が使える。型付き配列により生のバイナリデータの操作が容易になり、WebGLにデータを渡す際のパフォーマンスが向上する。 WebGLはMozillaのCanvas 3Dの実験から始まった。Mozillaは2006年に最初のCanvas 3Dのプロトタイプのデモンストレーションをした。2007年末に、MozillaとOperaがそれぞれ別々の独自の実装をした。2009年初頭に、MozillaとKhronosがWebGLワーキンググループを始めた。WebGLワーキンググループはApple、Google、Mozilla、Operaを含んでいる。 2011年5月9日、WebGLに深刻なセキュリティホールが指摘された。問題点は以下の2点。現在は解決済み。 サービス拒否 (DoS) 攻撃 - WebGLでは制御構造をサポートするプログラマブルシェーダーを使えるが、GPU自体にバグなどがあると、OS全体をクラッシュさせたり、無限ループなどでデバイスドライバの応答を停止させるシェーダープログラムを実行させることができてしまう。 クロスドメイン画像盗取 - Cross-Origin Resource Sharing に未対応で、他のドメインで使われている画像を取得できた 規格そのものに脆弱性が存在するため、米国のセキュリティ機関US-CERTはブラウザでWebGLを無効にするよう勧告していた。 Firefox 4 と Chrome 12 は標準状態でWebGLが有効になっており、セキュリティ問題を防ぐには手動でWebGLを無効にする必要があった。その後、Chrome 13 ではクロスドメイン問題が修正され、Firefox 5 ではクロスドメインは無効になったが、Firefox 8 から Cross-Origin Resource Sharing が利用可能になった。 DoS攻撃の方は、GL_ARB_robustness(OpenGL 3.2) または GL_EXT_robustness(OpenGL ES 2.0) を利用できるウェブブラウザに制限することで解決した。 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レンダリング ^ JavaScript typed arrays - MDC Doc Center ^ Canvas 3D: GL power, web-style ^ Taking the canvas to another dimension ^ WebGL - A New Dimension for Browser Exploitation ^ 3D表示規格の「WebGL」に深刻なセキュリティ問題、主要ブラウザに影響 - ITmedia、2011年5月11日 ^ GL_ARB_robustness ^ GL_EXT_robustness ^ Bug 93379 - WebGL Add support for EXT_robustness ^ Support GL_EXT_robustness in Chrome's WebGL implementation OpenGL OpenGL ES GLSL en:O3D - Googleによる別のWeb 3D技術 WebCL - ブラウザ向けのOpenCL派生規格 Three.js WebVR 公式ウェブサイト WebGL - Mozilla Developer Network 表示 編集