WebGL

WebGL（ウェブジーエル、Web Graphics Libraryの略称）は、互換性のある任意のウェブブラウザ上で、プラグインを使用せずに…

WebGL
WebGL
作者 Mozilla Foundation
開発元 Khronos WebGL Working Group
初版 2011年3月3日 (15年前) (2011-03-03)[1]
最新版
2.0 / 2017年1月17日 (9年前) (2017-01-17)
プラットフォーム Cross-platform
対応言語 English
種別 API
公式サイト www.khronos.org/webgl/
テンプレートを表示
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に対応するウェブブラウザは以下の通り。

各ウェブブラウザの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_robustness (OpenGL ES 2.0) の対応が必要である。

WebGL 2.0のサポートには、Microsoft Windows上ではDirectX 11が、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を使ったライブラリが開発されている。

脚注

[脚注の使い方]

注釈

  1. ^ サムソンやHTCなどの一部の端末では 4.x から対応している。またAndroid 4.x の環境で「メニューボタン」の「設定」から「Labs」から「WebGL」のチェックボックスを「オン」にすることでWebGLを有効化できる場合があるが、Labsの名の通り実験機能である。
  2. ^ スマートフォンやタブレットなどの端末の製造メーカー・機種、GPUの製造メーカー・機種、グラフィックスデバイスドライバの開発元およびバージョンなどによっては、Google Chrome for AndroidのGPUブラックリストに含まれているためWebGLが動作しない場合がある。この場合、ユーザーの自己責任となるが、Google Chrome for Androidにて「chrome://flags」にアクセスして「ソフトウェア レンダリング リストをオーバーライド」を有効化し、「WebGL を無効にする」を無効化し、そして「今すぐ再起動」することでコンテキスト「webgl」または「experimental-webgl」でWebGLを動作させることが可能となる。

出典

  1. ^ WebGLFinal
  2. ^ Tavares, Gregg (2012年2月9日). “WebGL Fundamentals”. HTML5 Rocks. 2021年2月23日閲覧。
  3. ^ Parisi, Tony (2012年8月15日). “WebGL: Up and Running”. O'Reilly Media, Incorporated. 2013年2月1日時点のオリジナルよりアーカイブ。2012年7月13日閲覧。
  4. ^ WebGL Specification
  5. ^ WebGL 2 Specification
  6. ^ Opera Core Concerns - WebGL and Hardware Acceleration
  7. ^ Demo Repository - WebGL Public Wiki
  8. ^ WebGL 2.0 Arrives - The Khronos Group Inc
  9. ^ angleproject - ANGLE: Almost Native Graphics Layer Engine - Google Project Hosting
  10. ^ 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

関連項目

外部リンク

サーバサイド
通信プロトコル
API
トピックス
クライアントサイド
Browser APIs
Web API
W3C
クロノス
その他
トピックス
関連項目
スタブアイコン

この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.