ウェブブラウザで3DCGを実現するWebGLについて紹介します。
１．WebGLについて
OpenGL ES 2.0の3DグラフィックスAPIをhtml5のcanvas(以下canvas)で使えるようにしたもので、
このcanvasに3D描画を行います。
～特徴～
・3DCGを高速に描画することが可能。
・FlashやJavaアプレットのようなプラグインを使わない。
WebGLで図形を作成するには、
上記を補助するライブラリ「three.js」というのもあります。
「three.js」に関しては後述します。
・canvasとは
FlashやJavaアプレットのようなプラグインを使うものと違い、
JavaScriptで線や円などの図形を描いたり、色を塗ったりすることができます。
また、画像を描画することもできます。
・OpenGLとは、
OpenGL ESは、携帯電話や家電などの組み込み用途向けのOpenGLの一部です。
２．WebGLを使用する
・ビデオカードがOpenGL 2.0をサポートしている
・ブラウザがWebGLをサポートしている
最近のPCならば、OpenGLに関しては問題ないと思います。
もしも、WebGLをサポートしているブラウザで動かなければ、
ビデオカードがOpenGL 2.0をサポートしていない可能性が高いです。
OpenGLのサポート状況を調べるツールとして、OpenGL Extensions Viewerがあります。
このツールを利用することで、現在使用しているビデオカードのOpenGLのサポート状況を調べる事ができます。
３．WebGLをサポートしているブラウザ
・PC版の対応ブラウザ
Internet Explorer(以下IE) 11
Mozilla Firefox(以下Firefox) 4
Opera 12 (12から14は要設定、15から標準で有効)
Safari 5.1 (要設定)
・モバイル版の対応ブラウザ
Firefox for Mobile (Maemoは1.0から, Androidは4から)
Google Chrome for Android 25 (25から29は要設定、30から標準で有効)
Internet Explorer Mobile 11
Opera Mobile 12 (Androidのみ)
Tizen 1.0
※上記の対応ブラウザに関してはWikiから抜粋しています。
ブラウザに関しては、ご自分の環境にあった上記のブラウザの最新バーションをインストールしていれば問題ないです。
４．WebGLの動作検証
動作検証の環境は以下の通りです。
ビデオカード：NVIDIA ION
動作検証ブラウザ：Chrome 33、Firefox 27
使用したライブラリ：Three.js
検証した結果はChrome 33、Firefox 27ともに動作しました。
ChromeとFirefoxの見栄えは変わらないように感じました。
５．WebGL対応のライブラリ
高品質の図形を描画したい方などにおすすめです。
ライブラリといっても様々なものがありますが、
今回は「Three.js」と「Babylon.js」について紹介します。
・Three.js
サンプルが多く出回っているのでWebGL初心者におすすめです。
canvasやSVG、CSS3Dによるレンダリングにも対応しています。
使用感は、直感的で理解しやすく使いやすかったです。
ライセンス：MIT License
・Babylon.js
3Dゲームに必要なパーティクルシステム、スプライト(映像技術)など
必要なものは一通り揃っているようです。
他のライブラリとは違い左手座標系を採用しています。
サンプルの数は少ないですが、質は高いと思いました。
ライセンス：Apache License 2.0
※パーティクルシステム：雷や煙、炎などを3DCGで形成する技術
※スプライト：画面上の小さなキャラクタを高速に合成表示するための技術
Three.js、Babylon.jsは、まだ更新中のライブラリなので
今後に期待したいです。
※ここで紹介したツールやライブラリを使用したことによる
トラブルなどに対して弊社は一切の責任を負いません。
＜参考サイト＞
WebGL全般
WebGL wikipedia
e-words WebGL
デザイナーの視点で見た3DCGのススメ
Processing.js、SVG、WebGL。
Babylon.js関連
[WebGL]マイクロソフトの中の人が作成したWebGL環境向けの3Dゲームフレームワーク「Babylon.js」
Babylon.js
three.js関連
three.js
three.js wiki
マイクロソフト
Microsoftがセキュリティを理由にWebGLを拒否
米Microsoft、3D技術のWebGLは「セキュリティ的に有害な技術」と懸念を表明
WebGL のデモ、リファレンス、リソース
パーティクルシステム
パーティクル・システム ウィキペディア
スプライト(映像技術)
スプライト (映像技術) ウィキペディア
システム構築のご依頼でしたらお気軽にご相談下さい。
弊社お問い合わせ