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

 プログラム,
 公開日: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コントローラの見栄えがブラウザによって違ったり、
バージョンアップで変更されたりするっぽいようなので、
こちらを導入してみました。
整合性をとるのに手間取ったけど(^_^;)

★2015年11月16日追記
対象が複数ある場合はラジオボタンで排他的に選択できるようにしました。

WebGL対応のブラウザで見てください。WindowsのChromeで確認しています。PCパワーもそれなりに必要となるかもしれません。反応がない場合は、リロードして再度試してみてください。

表示関係のチェックを全て外し、輪郭線の太さをゼロにすると動作的に一番軽くなります。ブラウザの拡張機能を一時的に無効にすると、さらに軽くできるかも。

タグ: ,

コメント / トラックバック 4 件

  1. kessokujp より:

    Node.js の gulp を使うと、MMDファイルを保存しただけで chrome ブラウザが自動的にリロードして表示させてくれる機能がありますよ。

    – 5分で導入! タスクランナーGulpでWeb制作を効率化しよう
    https://ics.media/entry/3290/3

    – 下記にライブリロード機能の紹介があります。
    http://liginc.co.jp/web/tutorial/117900#sec09

    • 管理人 より:

      情報ありがとうございます。
      Node.js は使ったことなかったりします。
      でも、いろいろ便利そうですね。
      atpagesという無料のホスティングサービスを使用しているのですが、
      Node.js は使えないっぽいようです(^_^;)

      • kessokujp より:

        ライブリロードに使うNode.js は、サーバではなく、自分のパソコンにダウンロードして利用するものですよ

        ライブリロード機能はとても便利です。
        例えばキャラクターやCGに使うテクスチャを加工作業してPhotoshop上で保存すると、Node.jsがファイルの日時の更新を自動で検知して、勝手にブラウザをリロードしてくれます。

        このような使い方をすると手返しが早くなり、作業効率は格段に上がります。

        ブログを見ていて、つい老婆心でお節介を言ってしまいました。すみません
        これからも、ブログの更新を楽しみにしています。

        • 管理人 より:

          基本的にはサーバーサイドな技術だと思っていたのですが、
          ローカルに導入しても活用できるのですね。
          勉強になりました。ありがとうございます。

          そういえば、
          Emscriptenを一度だけいじったことがあるのですが、
          Node.jsがインストールされてました。
          すっかり忘れてました(^_^;)
          思えばAtomエディタとかも
          Node.js+Chromiumで実現されてたりするようなので、
          (Electronとかいう技術のやつかな?)
          知らないうちにNode.jsが動いていたりするのですね。

コメント投稿