Babylon.jsをベースとしたWebMMDモデルビューアーを追加しました
model: YYB Hatsune Miku_10th
DollRoomのもう一つのMMDスタジオとして、「スタジオ Babylon」を追加実装しました。
この記事では、この「スタジオ Babylon」について紹介したいと思います。
Babylonとは？
スタジオ名についているBabylonとは、Babylon.jsのことで、これはWebブラウザ上で3Dモデルなどを表示、操作することができる技術の名前です。
ここでは技術的な話は触れませんが、興味のある方は公式サイトをご覧ください。
これまでのスタジオでは、Three.jsという、別のWebブラウザ上で3Dを扱う技術を使って開発されていました。
こちらはサイズの大きいMMDモデルファイルを扱うと古い世代のiPhoneでクラッシュしてしまう現象が起きるため、暫定的な改善策としてテクスチャ画像ファイルの解像度を落としたり、モーフデータを削って軽量化していました。
しかし、恒久対応として何か手はないかと模索していたところ、今回のBabylon.jsを知りました。
Babylon.jsではサイズの大きいファイルでも高速で表示され、上記のような対策をしなくても古い世代のiPhoneで読み込ませることができました。
これは僕の求めていたWeb MMD モデルビューアーにぴったりなんじゃないか！？と感じて、今回の新しいスタジオを追加することとなりました。
スタジオ Babylonで出来ること
現時点では、βテスト版として実装しているため、これまでのスタジオに比べて出来ることは限られています。
また、上手く動作しないことも多々あると思います。
しかし、少しずつ改善して、出来ることを増やしていこうと考えているので気長に待っていただければと思います。
モデルのアップロード
モデルのアップロードはPCから行う場合は、PMXファイルとテクスチャファイルがまとまったフォルダをそのままアップしていただければOKです。
スマートフォンからモデルをアップロードするには、一手間必要です。 手順は以下の通りです。
- PCからPMXファイル入りフォルダをアップロード
- BPMXファイルをダウンロード
- ダウンロードしたBPMXファイルをスマートフォンへ渡す
- スマートフォンからBPMXファイルをアップロード
BPMXファイルはBabylon PMXというBabylonでの操作に最適化された特殊なPMXファイルと思っていただければと思います。
PMX to BPMX Converterという、公式のコンバーターも用意されているので、こちらでBPMXファイルを作成しても問題ないです。
モデルの表示
これまでのスタジオと同様に、一度アップロードしたモデルはリストから選択することができるようになります。
好きなモデルをリストから選択して、スタジオ上に表示させることができます。
モーションの設定
これまでのスタジオとVMDファイルのアップロード状況は共有されます。
こちらも、これまでのスタジオと同様の操作でモデルにモーションを適用することができます。
モーション適用後は再生、停止のコントローラーが画面下に表示されるようになります。
カメラにモーションの設定
モーション適用対象を「カメラ」にすることで、カメラ用VMDを適用することができます。
適用方法はモデルの時と同じです。
スタジオにオーディオ追加
MP3形式のファイルをアップロードして、オーディオをスタジオに適用することができます。
一度アップしたMP3ファイルは、ブラウザ上に保存され、以降は再アップロード不要でリストから選択できるようになります。
ポーズの設定
これまでのスタジオとVPDファイルのアップロード状況は共有されます。
こちらも、これまでのスタジオと同様の操作でモデルにポーズをを適用することができます。
モーフの操作
これまでのスタジオと同様にモーフをスライダーで変化させることができます。
マテリアル透明度の操作
これまでのスタジオと同様にマテリアル透明度をスライダーで変化させることができます。
スタジオの物理演算の有効・無効
デフォルトで物理演算は有効ですが、不要な場合は無効にすることができます。
現在はβテスト中です
現在多くの機能がテスト段階で、上手く動かないケースが多いと思います。
これから、時間が取れる時に開発を進めて、こまめにDollRoomをアップデートしていこうと思います！