5. 1-1.WebGLとは?
1. WebGLはWeb( JavaScript )用
のOpenGL ES 2.0(※)ライブラリ
(※)OpenGL ES: OpenGLの組み込み版
① JavaScriptからOpenGL ES 2.0を呼び出すブリッジAPI
→対応ブラウザならば、プラグイン無しに、ブラウザ上で高速に
3D表示ができる。
② グラフィックスカードがOpenGLに対応している必要あり。
2. WebGLが生まれた経緯
① 最初は、MozillaがCanvas3Dの実験を開始。
② 2009年に、Khronos(クロノス)グループがWebGLワーキンググループ
を発足。
③ 2011年に、WebGL1.0が仕様化。
④ 2013/08現在、Version1.0.2が最新。
Advanced Tech Night
4
21. 3.WebGLを使う場合の注意点
1. 環境上の制限
① ブラウザのサポート状況(PC)
• デスクトップではほぼサポート/IEは11でようやく
• ただし、ビデオカードでOpenGL2.0の対応が必要
② ブラウザのサポート状況(Android/iPhone)
• Androidは動くけれど設定変更必要+やはり遅い
• iOS(Safari)はごめんなさい
Advanced Tech Night
20
ブラウザ IE FireFox Chrome Opera Safari
サポート 11~ 4~ 8~
(9から標準)
12~
(15から標準)
5.1~
ブラウザ - FireFox Chrome Opera Safari(iOS)
サポート - 4~ 25~ 12~
(15から標準)
×
22. 3.WebGLを使う場合の注意点
2. 機能上の制限
① 凸角形しか作れない。裏表がある
a. Canvasのように凹角形のデータは作れない。
Three.jsでも同様。
b. 凹角形や、中空のモデルを表示するためには、
面分割をしてくれる補助ライブラリ(→後述)が必要。
② Three.jsは楽だが、細かい調整は苦手
a. 提供されているモデルを変形させられないため、
凝ったモデルを表示するには別途頂点データが必要。
→変形させたモデルでも、モデルローダーを使うことに
③ デバッグが大変
Advanced Tech Night
21