以前の投稿 「「原神」がMMDモデルを配信してくれたので、JavascriptでMMDビューアを作った」 で、ブラウザで動作するMMDファイルのビューアを作成しました。
今回は、それをもう少し拡張して、VR表示またはAR表示してみます。
ソースコードは以下に上げておきました。
poruruba/MmdViewer
https://github.com/poruruba/MmdViewer
こっちがVR。
こっちがAR
#three.jsのVR表示機能
three.jsには標準で、VRまたはARとして表示する機能があります。
ですので、それを有効にします。MMDファイルのロード部分はほとんど変わっていません。
詳細は、以下に記載があります。
How to create VR content
https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content
※MMDビューアとして、通常のJavascript版とmodule版の2つを用意していましたが、今回はmodule版を前提としているようです。
動作環境としては、AndroidとiOSのようです。
なぜならば、OSの機能である「ARCore」や「ARKit」を使い、さらにChromeからWebARとして呼び出せる環境である必要があるためです。
私の場合はAndroidで確認しました。
基本的な変更点は以下の通りです。
①背景色を透過にするため、以下の部分をコメントアウトします。
// this.scene.background = new THREE.Color( 0xffffff );
また、同様に、WebGLRenderer にalpha=trueの引数を加えます。
this.renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, alpha: true, preserveDrawingBuffer: true } );
②以下の部分で、ブラウザのWebAR機能を有効にします。
this.renderer.xr.enabled = true;
③以下を入れることで、VRまたはARモードに入るためのボタンを表示してくれます。
if( mode == 'vr')
document.body.appendChild(VRButton.createButton(this.renderer));
else
document.body.appendChild(ARButton.createButton(this.renderer));
④最後に、レンダラーのループ処理で、以下の通りに変える必要があります。
// requestAnimationFrame( this.animate.bind(this) );
this.renderer.setAnimationLoop(this.animate.bind(this));
これで終わりです！
動作の様子
HttpsのWebサーバに、デプロイし、Chromeブラウザからmodule版の方のページを開きます。Androidで開いてください。
mmd_viewer/mmd_viewer_jsm/index.html
open(vr)やopen(ar)というボタンがあるかと思います。前者がVRモードで全画面表示し、後者はARモードで全画面表示します。
とりあえず、いつもの全画面表示されますが、下の方に薄く「ENTER VR」または「ENTER AR」というボタンがあります。これをクリックすると、VRモードまたはARモードになります。
こっちがVR。
こっちがAR
途中、Google Play 開発者サービス(AR)のインストールを促されるかもしれません。
#(おまけ)ステージの表示
MMDでは、モデル・モーションまたはポーズに加えて、ステージという概念があるそうです。
簡単いうと背景です。3次元になると、背景の画像ではなく、立体画像になるので、ちょっと呼び方を変えているようです。
ステージも、モデル同様に、PMXまたはPMDファイルですので、モデル・モーションまたはポーズのロードに加えて、ステージのPMXまたはPMDファイルもロードするようにしました。
#終わりに
以下の記事を参考にさせていただきました。ありがとうございました。
たった4行でできる！ブラウザ向けVRをThree.jsで実装する方法
https://ics.media/entry/18793/
続編です。
「原神」のMMDキャラクタをスマホVRの世界に呼び込む
結局のところ、renderer.setAnimationLoop は使わず、上記の投稿のやり方の方がよいです。
以上