WebGL

WebGL

作者	Mozilla Foundation
開発元	Khronos WebGL Working Group
初版	2011年3月3日 (13年前) (2011-03-03)^[1]

最新版	2.0 / 2017年1月17日 (7年前) (2017-01-17)
プラットフォーム	Cross-platform
対応言語	English
種別	API
公式サイト	www.khronos.org/webgl/
テンプレートを表示

HTML

各種項目 HTML ダイナミックHTML HTML5 audio要素 canvas要素 video要素 XHTML Mobile Profile C-HTML HTML要素 HTMLフレーム（英語版） HTML エディター文字符号化（英語版） Unicode（英語版） Document Object Model スタイルシート（CSS）フォントファミリー（英語版）ウェブカラー HTMLスクリプティング（英語版） JavaScript WebGL WebCL W3C（バリデータ） WHATWG 後方互換モード（英語版）ウェブストレージレンダリングエンジン
比較マークアップ言語（英語版） HTML（英語版） XHTML（英語版）
表話編歴

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 Chrome 8以降 (8は要設定、9から標準で有効)
- Internet Explorer 11
- Mozilla Firefox 4以降
- Opera 12以降^[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 - iOS 8 以降。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_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を使ったライブラリが開発されている。

脚注

[脚注の使い方]

注釈

^ サムソンや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

外部リンク

公式ウェブサイト
WebGL - Mozilla Developer Network

表話編歴クロノス・グループの規格
COLLADA EGL（英語版） OpenCL OpenGL OpenGL ES OpenGL SC（英語版） OpenKODE（英語版） OpenMAX（英語版） OpenML（英語版） OpenSL ES（英語版） OpenVG（英語版） OpenWF（英語版） Vulkan WebGL WebCL

Webインタフェース

サーバサイド

プロトコル	HTTP v2 v3 暗号化 WebDAV CGI SCGI（英語版） FCGI AJP（英語版） WSRP（英語版） WebSocket
APIs	C NSAPI（英語版） C ASAPI C ISAPI Java Servlet CIL System.Web.IHttpHandler（英語版） Python WSGI Ruby Rack（英語版） JavaScript JSGI（英語版） Perl PSGI Lua WSAPI（英語版）
トピックス	Webサービスアプリケーションサーバリソース (WWW) Open API（英語版）サーバサイドスクリプト Webhook

クライアントサイド

Browser APIs

Web API（英語版）

W3C	Canvas CORS（英語版） File API（英語版） Geolocation（英語版） IndexedDB Microdata（英語版） SVG WebGPU WebRTC WebSocket WebVTT Web Messaging（英語版） Web storage（英語版） Web worker（英語版） XMLHttpRequest オーディオビデオ
クロノス	WebCL WebGL
その他	Gears Web SQL Database（英語版） WebUSB（英語版）