WebGLによるMQOビュワー

○はじめに
これはhtml5のWebGLを使用したMQOビュワーです。
WebGLに対応したブラウザでMQOデータを見ることができます。
また特徴としてFlashやCanvasで作ったポリゴンビュワーよりも高速に動作します。

WebGLはOpenGL2.0をブラウザ上のJavaScriptで実行できるようにしたライブラリです。
OpenGL2.0なのでGPUのハードウェアアクセラレーションの恩恵を受けることができます。

すでにWebGLが動作する環境がある人は次のサンプルをクリックしてください。
WebGLが動作しない人は「サンプルを見るために必要なもの」の項目を読んで準備してください。

・Minefield(開発版Firefox)による例
○サンプルについて
リンクをクリックするとサンプルのページへ飛びます。

「Could not initialise WebGL, sorry :-(」というエラーがでた場合はWebGLに対応していないブラウザです。
「サンプルを見るために必要なもの」の項目を読んでください

基本のサンプルその1
index.html

ナコルルのサンプル
index_nako.html

エルルゥのサンプルその2
index_eruru.html

ほたるのサンプル
index_hotaru.html

95たんのサンプル
index_95tan.html

セルシェーダのサンプル
index_cels.html

2体表示のサンプル
index_two.html

ノーマルマップとリフレクションマップのサンプル
index_normal.html
○サンプルを見るために必要なもの
このサンプルを見るためには開発版のFirefoxかChromeが必要になります。
現在の正規リリース版のFirefox(3.6.3)やChromeでは動作しません。
また現状ではIEではWebGLが動作する環境は存在しません。
MACについてはWebKit(Safari)が対応しているようですが私のほうでは確認していません。

http://learningwebgl.com/blog/?p=11
くわしくはこちらのリンクからそれぞれの開発版ウェブブラウザをダウンロードしてください。
○Firefoxの開発版を使う場合
http://nightly.mozilla.org/
↑ のページから指定のOSのFirefoxを落としてください。

ファイルを落としたらzipファイルを解凍して適当なフォルダにコピーしたください。

もし既存のfirefoxを起動している場合は終了してください

フォルダの中のfirefox.exeを起動してください。
(始めて起動したと時にデフォルトブラウザにするかと聞かれてくるのでキャンセルしてください)

URLを入力するところに「about:config」と入力してください。

filter:の項目で「WebGL」として検索します。
「webgl.enabled_for_all_sites」という項目を「false」から「true」にしてください。

これで、開発版FirefoxでWebGLが使えるようになります。

※開発版FirefoxでローカルでMQOビュワーを使う場合の注意点
ただし開発版Firefoxはローカルにあるmqoファイルを読み込めませんので一度サーバーにあげるか、
httpdなどのHTTPサーバソフトを使ってローカルにサーバーを立てる必要があります。
○Chromeの開発版を使う場合
http://build.chromium.org/buildbot/continuous/win/LATEST/
↑ のページから「chrome-win32.zip」をダウンロードし適当なフォルダにコピーしてください。

コマンドプロンプトを開き、 chromeをコピーしたフォルダまで移動して
>chrome.exe --enable-webgl
と入力して起動してください。

もしくはchrome.exeへのショートカットを作り、そのショートカットのプロパティの
「リンク先」の項目の chrome.exeの後ろに「--enable-webgl」というオプションを追加し
そのショートカットでChromeを起動してください。

これで開発版ChromeでWebGLが使えます。

※ChromeでローカルでMQOビュワーを使う場合の注意点
ただしChromeはローカルにあるmqoファイルを読み込めませんので一度サーバーにあげるか、
httpdなどのHTTPサーバソフトを使ってローカルにサーバーを立てる必要があります。
○注意点
このサンプルはIntelのオンボードでは動作しません。
OpenGL2.0に対応したRadeonかGeForceが必要です。
○画面と操作の説明
画面の下に表示されているのメニューです。、それぞれの文字をクリックするとその機能が実行されます。
右上に表示されているのFPS(1秒間のフレーム数)です。

画面をクリックすることにカメラやライトを変更できます。

左クリックを押しながらマウス移動でカメラまたはライト回転です。どちらが適用されるかはメニューの「LB:」の項目によります。
中クリックを押しながらマウス移動でカメラまたはセンターの平行移動。どちらが適用されるかはメニューの「MB:」の項目によります。
マウスホイールでカメラのズームです。
○メニューの説明
画面した表示されているメニューの説明です
メニュー 内容
SSM/VSM シャドウマップの種類を切り替えます
ShadowMap シャドウマップの有効、無効
Celshade セルシェーダの有効、無効
Edge エッジの有効、無効
Reset カメラとライトのリセット
auto カメラの自動回転
Grid グリッドの表示、非表示
Pers/Ortho カメラのPers(透視変換)、Ortho(平行投影)の切り替え
LB:Camera/Light 左クリックの機能切り替え、Cameraでカメラ回転、Lightでライト方向の回転
MB:Camera/Center 中クリックの機能切り替え、Cameraでカメラ位置の平行移動、Centerでセンター位置の平行移動
Debug:On/Off デバッグメッセージの表示、非表示
Menu メニューのオン、オフ
○ソースについて
ソースはこちら参考にしたい人はどうぞ。
日付 ファイル
2011/01/17 webgl_mqoview_110117.lzh
2010/08/18 webgl_mqoview_100818.lzh
2010/08/11 webgl_mqoview_100811.lzh
2010/07/05 webgl_mqoview_100705.lzh
2010/06/22 webgl_mqoview_100622.lzh

独自のMQOファイルを読み込みたい場合は

var mqo_filename="./data/95tan/95tan06.mqo";

また同梱したソースのindex.htmlの中のmqo_filenameという変数のファイル名を書き換えてください。
(赤字の部分を書き換えてください)

※複数表示する場合
mqo_filenameを配列にしてください。
デフォルトでは表示位置はすべて(0,0,0)になっていますので、g_poslistオプションで表示位置を指定してください。
mqo_filenameのインデックス値とg_poslistのインデックス値が対応しています
例)
var mqo_filename=[];
mqo_filename[0]="./data/eruru/eruru_pose1.mqo";
mqo_filename[1]="./data/nako/nako03.mqo";

var g_poslist=[];
g_poslist[0]=new FVECTOR(-50,0,0);
g_poslist[1]=new FVECTOR( 50,0,0);
○その他の起動オプション
g_drawgrid グリッドの描画の有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは表示になっています
例)
var g_drawgrid=1;
g_backcol 背景色を設定します
各R,G,Bを0.0から1.0の間で指定します。
指定がない場合はデフォルト値が使用されます。
デフォルトでは(0.2,0.3,0.4)になっています
例)
var g_backcol=new FVECTOR(0,0,0);
g_lightcol ライトの色を設定します
各R,G,Bを0.0から1.0の間で指定します。
指定がない場合はデフォルト値が使用されます。
デフォルトでは(1,1,1)になっています
例)
var g_lightcol=new FVECTOR(0.3,0.5,0.25);
g_lightdir ライトの方向を設定します
各x,y,zを-1.0から1.0の間で指定します。
指定がない場合はデフォルト値が使用されます。
デフォルトでは(-0.5, 0.3,-1.0)になっています
例)
var g_lightdir=new FVECTOR(0,-1,-1);
g_drawfps FPS(Frame Per Second,1秒間の描画フレーム数)の描画の有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは表示になっています
例)
var g_drawfps=0;
g_drawdebug デバッグ描画の有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは非表示になっています
例)
var g_drawdebug=1;
g_drawmenu メニュー描画(画面下に出ている文字)の有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは表示になっています
例)
var g_drawmenu=0;
g_use_celshade セルシェーダの有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは非表示になっています
例)
var g_use_celshade=1;
g_def_celshade セルシェーダのグラデーションを設定します
グラデーションの区切り(MQO_CELSLINE)を複数指定することによりグラデーションを作成します。
MQO_CELSLINEの内容は(色、位置、グラデ幅)となります。
色は描く(R,G,B,A)を0〜255の間で指定します。ただしアルファ要素(A)は無視されます。
位置は0〜255の間で指定します。
0がライトが一番暗い位置、255がライトが一番明るい位置を示します
グラデ幅は0〜255の間で指定します。
位置を中心としたグラデーションの掛ける幅を指定します
指定がない場合はデフォルト値が使用されます。
デフォルトで値は次のようになっています。
デフォルト値)
var dat=[];
dat.push(new MQO_CELSLINE(new CVECTOR(236,185,185,255),160,20));
dat.push(new MQO_CELSLINE(new CVECTOR(255,255,255,255),255,0));

例)
var g_def_celshade=[];
g_def_celshade.push(new MQO_CELSLINE(new CVECTOR( 64,128,128,255),100,20));
g_def_celshade.push(new MQO_CELSLINE(new CVECTOR(128,185,224,255),160,20));
g_def_celshade.push(new MQO_CELSLINE(new CVECTOR(255,255,255,255),255, 0));
g_use_edge エッジの有無を設定します
0で非表示
1で表示
指定がない場合はデフォルト値が使用されます。
デフォルトでは非表示になっています
例)
var g_use_edge=1;
g_edge_col エッジの色を設定します
各R,G,B,Aを0.0から1.0の間で指定します。
指定がない場合はデフォルト値が使用されます。
デフォルトでは(0.3,0.3,0.3,1.0)になっています
例)
var g_edge_col=new FVECTOR4(0.3,0.3,0.3,1.0);
g_edge_scale エッジのスケールを設定します
指定がない場合はデフォルト値が使用されます。
デフォルトでは0.2になっています
例)
var g_edge_scale=0.5;
g_poslist 複数表示する場合の表示位置を指定します
位置(x,y,z)を指定します。
g_poslistはmqo_filenameと同じ分の配列を指定します。
g_poslistがない場合は(0,0,0)が指定されます。
例)
var g_poslist=[];
g_poslist[0]=new FVECTOR(-50,0,0);
g_poslist[1]=new FVECTOR( 50,0,0);
g_use_shadowmap シャドウマップを使用するかの設定をします
0で使用しない
1で使用する
指定がない場合はデフォルト値が使用されます。
デフォルトでは使用するになっています
例)
var g_use_shadowmap=1;
g_use_vsm シャドウマップのタイプを設定します
0でSSM(通常のシャドウマップ)
1でVSM(スムーズなシャドウマップ)
指定がない場合はデフォルト値が使用されます。
デフォルトではVSMになっています
例)
var g_use_vsm=1;
※2010/08/11現在、WebGLの仕様変更に伴い正常に動作しなくなりました。


○対応するMQOについて
・テクスチャパスが相対パス(絶対パスは使わないでください)
・アルファマップ、バンプマップには対応していません
・曲面、鏡面、回転体などには対応していません。フリーズしたデータを使用してください
・使用できるテクスチャはjpg、png、bmpです。アルファを使用したい場合はアルファ付きpngを使用してください。tgaには対応していません。
・マテリアルのあたってない面は表示できませんのでなんらかのマテリアルを当ててください。
白のマテリアルが適用されます。
・マテリアルの計算がMetasequoiaと異なりますので同じ結果にはなりません。
メタセコに近い計算式に修正しました

・MCSファイル(CelsViewの設定ファイル)を使用する場合、マテリアル名に全角文字を使用しないでください。
マテリアル名には半角英数のみを使用してください。
・ノーマルマップを使用する場合、マテリアルの凸凹にノーマルマップのファイル名を指定してください。
・リフレクションマップを使用する場合、MCSファイルが必要です。CelsViewのマテリアルの設定で「リフレクションマップ」にテクスチャファイルを指定してください。
・リフレクションマップの透明度を変える場合は「リフレクションマップ→アルファ」を指定します。
○履歴
日付 内容
2011/01/17 ・WebGLの仕様変更に伴いソース修正
仕様の変更などはありません
2010/08/18 ・WebGLの仕様変更に伴いソース修正
仕様の変更などはありません
2010/08/11 ・WebGLの仕様変更に伴いソース修正
※GLSLで「dFdx,dFdy」が動作しなくなったのでVSMが正常に動作しなくなりました。
2010/07/05 ・シェーダーを頂点単位のライティングからピクセル単位のライティングへ変更。
・MCSファイル(CelsViewの設定ファイル)に対応
※MCSファイル(CelsViewの設定ファイル)を使用する場合、マテリアル名に全角文字を使用しないでください。
マテリアル名には半角英数のみを使用してください。
・マテリアルごとのセルシェーダの質感の設定に対応
・リフレクションマップに対応
※リフレクションマップを使用する場合、MCSファイルが必要です。CelsViewのマテリアルの設定で「リフレクションマップ」にテクスチャファイルを指定してください。
※リフレクションマップの透明度を変える場合は「リフレクションマップ→アルファ」を指定します。
・ノーマルマップに対応
※ノーマルマップを使用する場合、マテリアルの凸凹にノーマルマップのファイル名を指定してください。
・シャドウマップに対応

・起動オプションの追加(g_use_shadowmap、g_use_vsm)
・メニューの追加(VSM/SSM、ShadowMap)

※シェーダーを外部ファイルにしたため開発版Firefoxでもローカルで動作しなくなりました。
ローカルでテストする場合はhttpdなどのHTTPサーバソフトを使ってローカルにサーバーを立てる必要があります。
2010/06/22 ・RadeonのGLSLでエラーが出ていたのを修正しました
2010/06/16 ・セルシェーダに対応しました。
・今までhtml内に書いていたシェーダの別ファイルを分離しました。
VertexShaderはmqoshader.vert、PixelShaderはmqoshader.flagになります。
・起動オプションの追加(g_use_celshade、g_def_celshade、g_use_edge、g_edge_col、g_edge_scale、g_poslist)
・メニューの追加(Menu、Cels、Edge)
・複数モデルの表示に対応
・メニューを左下に移動しました。
2010/06/13 追加、修正

・MQOファイルのカメラを反映するように対応
・MQOファイルのアンビエントを反映するように対応
・カメラのPers/Orthoの切り替えに対応
・アルファマップに対応
・アルファテスト(透明部分(Alpha=0)のピクセル処理をスキップする処理)に対応
・マテリアルのシェーダの「constant」(ライティング無効)に対応
・ライティング計算をメタセコに近いものに修正
・ライト色、ライト方向の変更に対応
・メニュー表示の追加
・起動オプションの追加(g_drawgrid,g_backcol,g_lightcol,g_lightdir,g_drawdebug,g_drawmenu)

バグフィックス
・MQOファイルのvertexattrチャンクの読み込みに失敗していたのを修正
2010/06/07 はじめのバージョン

○おくずけ
ご意見、ご感想、バグ報告などはHP内の掲示板までお願いします。

URL: http://sio29.sakura.ne.jp/
sio29
戻る