icon-fb icon-tw icon-index_hero icon-cb

webVR で MMD 【途中経過】

three.jsのMMDライブラリを改造してVRにしてみる。

個人制作物の世界としては異例の進化を遂げているMMD(MikuMikuDance)
基本的に二次創作の作品なので、あまりMMDの外にでることがないようなのですが、こんなに素晴らしい3D作品、VRでも使わせてもらいたい!

MMDのVRといえば、ちょうど先日公開されました@senooyudai さんのMocuMocuDanceなどがありますが、公開前後に少しTwitterが騒がしくなってしまったようですね。やはりMMDのほとんどが二次創作物ということもあり、何かと難しいこともあるようで。

そんな中ですが、こんなに良いもの、使わせてもらいたいですよね。
WEBでも。

今回、この試作をアップするにあたり、データを使わせていただいた作者様やTwitter含め、何人かのMMD界隈のかたから、それぞれのご意見をいただけました。ありがとうございます!
 
もちろん、個々で考え方も違うところもありましたが、皆さんのご意見を僕なりにまとめて解釈すると、
・使用するにあたって(必要な場合は)許可を取る。
・作者様、作品、元ネタに十分な配慮をする。
・作者様、利用する側、お互いが良い関係になるような使い方をする。

というところを考慮していれば問題ないのではないか、ということでした。
 
特に3つめについては、MMDの作者様たちは「MMDで動画作成に使って貰う」ために制作されているので、当たり前ですがMMDに使って貰うのが一番であり、それ以外で使用するのは想定外のことなので、やはり少しハードルが高いかもしれないというご意見もありました。
 
まあ、どれもMMDに限ったことではなく、何かのデータを流用する際は常に気をつけないといけないことですね。
二次創作物ということで、他の件より慎重な配慮が必要な場合もあると思います。

 
 
さて、タイミング的に少し前置き長くなってしまいましたが、本題に入ります。

まず、実は、最新のThree.jsには、MMDを使用するライブラリが標準で入っています。
three.js / examples | loader / mmd / audio

ライブラリの解説やデータの読み込みについてはこちらのページが詳しく解説してくれています。

Three.jsのMMDライブラリをVR対応にしてみる

ということで、今回はThree.jsのMMDライブラリを少し改造してVRにしてみます。

その前に、まだいろいろ試してる途中経過なので、注意点があります。

※まだ未完成の途中経過です。
・一部スマホ環境ではaudioが再生されません。
対応モデルファイルはpmdです。まだpmxは読めないようです。
 【修正】元にしていたMMDLoader.jsのバージョンが少し古かったことが原因でした。
 最新版を使用すればpmxも問題なく読めます。
・その他、端末によってはカメラの動きなどに不具合があるかもです。
 
※MMDライブラリ自体が処理負荷が高いので、
 それなりに性能が高いスマホじゃないと動かない上に、すぐ熱くなります
 
後述のサンプルデータなどは、上記ご理解いただいた上で閲覧して下さい。

 
まあ、MMDとはいえ、webに上げるという都合上、著作権的な問題もあってなかなか曲を上げる機会とかないかもだし、audioの件は少し様子見かなーと思います。
 
pmxが読めない件は、最近のMMD作品も、噂のImagineGirls アイリスちゃんも使えないんですよねー。(アイリスのMMD用データはpmxで提供されてます)
ソース元様、対応してくれるかなー・・・

【追記】早速MMDLoader.js作者のTakahiroさんからご連絡いただき、まずバージョンが古いという僕の凡ミスをご指摘いただき、その上でさらに細かい対応をしていただけました!ありがとうございます!

 
で、早速ですが今こんな感じです。

cap
→webVRでMMDを表示してみる。

qr_img
※ロード長いです。横持ちにしてメニューバーなどが出てしまったら、上にスワイプしてみてください。たぶん消えます。

 
各データは下記からお借りしました。
Model Data / Stage Data
Dance Data
Camera Data

カメラとモーションは、公式のexamplesで使われていたものが可愛かったのでそのまま。
モデルは、いつかMMDやることがあったら使わせて貰いたいと思ってたLat式ミクを使わせていただきました。

  
改良したライブラリは下記。(いずれもThree.js REV:77 のデータを使用)
・MMDLoader.js【three.js-master/examples/js/loaders/】
・DeviceOrientationControls.js【three.js-master/examples/js/controls/】
・StereoEffect.js【three.js-master/examples/js/effects/】

MMDLoader.jsというのが、three.jsでMMDを読み込むためのライブラリ。
下ふたつのjsについてはこちらを参考にして下さい。
※通常、VRコンテンツを作る際は、VREffect.jsとVRControls.jsを使用しますが、ここでは中身がよりシンプルなStereoEffect.jsを使用しています。

MMDLoader.js

render時にカメラを複眼にするStereoEffectと、カメラの方向をスマホのジャイロセンサーに対応させるDeviceOrientationControlsをTHREE.MMDHelper内で呼び出すようにしました。

DeviceOrientationControls.js

スマホのジャイロセンサーでwebGL内のカメラの方向を操作するライブラリですが、MMDのカメラデータ(.vmd)の情報を反映するようにしました。

StereoEffect.js

MMDでは基本のレンダリング輪郭線用のレンダリングの計2回に分けてレンダリングが処理されるので、それに対応するように少し調整しました。

 
それぞれの詳細な調整点は、まだ未完成なのと、そんなに需要ないかなと思うのでとりあえず省略します。

今後の検討

まあ週末とかに少しいじれるくらいな上にたいした知識もないので、どこまで出来るかわからないですが
・audio同期して鳴らす
・なんか3D感が薄い(左右の映像がほぼ一緒)。調整可能?
・複数モデルの表示
・地面影の反映【←対応しました】
とかできたらなーと。

 
 
以上、まあまだスマホのスペックも追いついてないので現実的なところではないですが、webVRのひとつの可能性として試してみてる途中経過でした。

MMD界隈の皆様含め、ご意見などございましたら、是非ご教授下さい!