i-mobile
次へ下へ

Everyday Pieces ::

ありふれたカケラ::人生というジグソーパズルのピースたち

USBハブなKVMスイッチ
JavaScript→PNG

three.jsで遊んでみる(33)

プログラム / MMD, three.js
公開日:2015年5月28日 / 更新日:2016年8月15日

今まで、MMDモデルとかのデータをチェックする際は、
1)ソースをちょっといじって読み込むファイルを変更。
2)対象ファイルを適正な場所に配置。
3)Webサーバーをローカルに立ててチェック。
という手順を踏んでいました。
大した手間じゃないので特に気になっていたわけではないのですが、
ファイルをドロップするだけでチェックできたらもっと楽になるなと思い、
今回ちょっとしたビューワーを作ってみた次第です。

ファイルをドロップする方式にすれば、
ファイルの読み込みはクライアント側だけで処理できるので、
つまり、サーバー側にファイルを置かずに済むので、
楽曲ファイルの再生にも対応することにしました。
今までデモで楽曲を鳴らさなかったのは、
著作権的によく分からなかったということもありますが、
使用している無料のホスティングサービスである
@PAGESの規約に抵触しそうなので・・・。
というか基本的に踊らせるのが目標だったので、
音楽とかは無しでも良いかな
というのが大きな理由だったりしましたが(^_^;)

サポートしているファイル形式は、
モデルはPMX、モーションはVMD、楽曲はMP3です。
モデルについては必要なテクスチャをまとめる必要があるので、
ZIPに対応しています。
テクスチャ形式については、
Webで標準的に使えるBMP,GIF,JPG,PNGの他に、
TGAとDDSも一応サポートしています。

なお、PMX仕様のうち、モーフは頂点モーフのみに対応しています。
ボーンやマテリアル等の他のモーフには対応していません。
また、頂点blending方式の一つであるSDEFにも対応していません。
BDEF2相当として扱われますのでご注意ください。

いくつかのモデルやモーションのファイルを使って
動作確認をしてありますが、
あらゆる組み合わせを試したわけではないので、
うまくいかない場合があるかもしれません。
また、読み込むファイル量が多かったり、ZIPを展開するなどした場合は、
ローディングに時間がかかる場合があるかもしれません。
その辺りはご了承のほどお願いします。

それから、WebGLなアンチエイリアスにも対応しました。
ただしグラボの性能がそれなりに必要となるようです。
自分のノートPCではFPSが半分くらいに落ちる感じ・・・(^_^;)
WebGLのコンテキスト作成時にしか指定できないので、
動的にON/OFFできないのがちょっと残念。

ということで作ったViewerはこちらから試せます。

★2016年8月15日追記
audioコントローラの見栄えがブラウザによって違ったり、
バージョンアップで変更されたりするっぽいようなので、
こちらを導入してみました。
整合性をとるのに手間取ったけど(^_^;)


i-mobile
上へ次へ