Lenovo Mirage AR ヘッドセットでthree.jsをホログラム表示する

ジェダイ・チャレンジを購入して手に入れたLenovo Mirage AR ヘッドセットは、スマートフォンの画面で表示されている映像をホログラムで表示してくれます。
f:id:jyuko49:20171202133009j:plain

このヘッドセットを使って、自作のコンテンツをホログラム表示してみました。

ホログラム表示するには

Mirage AR ヘッドセットはトレイに入れたスマートフォンの画面をミラーで反射させています。
スマートフォンで表示されているコンテンツは、モバイルVRでよく使われている視差効果の付いた背景が黒のステレオ画面です。

ヤバい、めっちゃ楽しい！
俺会社辞めてジェダイになるわ。 pic.twitter.com/4k3T9a6mDI
— jyuko (@jyuko49) 2017年12月2日

また、トレイに入れると画面の一部が隠れるため、穴が開いている領域を左右に二分割したコンテンツを表示させる必要があります。 f:id:jyuko49:20171202161839j:plain

実装方法

上述の表示ができれば、プラットフォームは何でもよいのですが、慣れているWebでやってみました。

three.jsでステレオ表示を行う

Webでの3D表示にはthree.jsを使っています。
downloadで保存されるzipファイルを展開して、htmlファイルと同じ場所に置いておきます。

今回はステレオ表示を行うためthree.min.jsの他にStereoEffect.jsも使います。

<script src="three.js-master/build/three.min.js"></script>
<script src="three.js-master/examples/js/effects/StereoEffect.js"></script>

通常のレンダリングではanimate()に相当する処理でrenderer.render()を実行しますが、今回はStereoEffectを通します。

使い方は簡単で、まずStereoEffectにrendererを渡します。
.setEyeSeparation()で左右の映像に視差を付けることができます。

effect = new THREE.StereoEffect(renderer);
effect.setEyeSeparation(0.5);

上記で初期化は完了で、renderer.render()の代わりにeffect.render()を実行すれば、ステレオで表示されます。 f:id:jyuko49:20171203224003j:plain

背景はデフォルトで黒なので、そのままにしておきます。

PWAで全画面表示にする

ステレオ表示はできたので、トレイに合わせて描画位置を調整したいのですが、ブラウザのアドレスバーが邪魔で上手く位置が調整できません。
そこで、PWA(Progressive Web Apps)を使って、全画面表示にします。

PWAはざっくり言うと、Webアプリをネイティブアプリのように動かす仕組みです。
Progressive Web Apps

Chromeで"ホーム画面に追加"を行い、ホーム画面のアイコンから起動することでPWAとして動作します。 f:id:jyuko49:20171203232420j:plain f:id:jyuko49:20171203232344j:plain

PWAとして動作させることで、全画面表示ができるようになります。プラットフォームによって対応状況が異なり、設定方法は複数あります。

今回はChromeを使って、Web App Manifestで設定しました。
全画面表示＆横画面となるようにmanifest.jsonを作成してhtmlからリンクします。

<link rel="manifest" href="manifest.json">

これでアドレスバーが非表示になりました。 f:id:jyuko49:20171203234333j:plain

描画位置を調整する

最後にトレイの位置に合わせて描画位置を調整します。

描画領域の大きさはrenderer.setSize()で変更できます。

var width = 630; //端末に合わせて調整
var height = 275; //端末に合わせて調整
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

描画領域の位置はCSSで調整しました。
renderer.domElementで追加されるのはcanvas要素なので、canvasにpaddingを付けることで調整できます。

canvas {
  padding-left: 76px; /* 端末に合わせて調整 */
}

端末によって必要な余白が異なるため、実際にトレイに入れながら微調整しました。 f:id:jyuko49:20171204000117j:plain

調整できたらbodyの背景も黒にしておきます。 f:id:jyuko49:20171203224104j:plain

試してみる

実際にMirage AR ヘッドセットで見てみるとホログラム表示になりました。

まとめ

three.jsのステレオ表示を使えば、Mirage AR ヘッドセット向けのコンテンツが簡単に作れます。

rendererのサイズと位置を調整して、StereoEffectをかけているだけなので、シーンの作成は通常のthree.jsと同様に行えます。
three.jsに慣れていれば、コンテンツの差し替えは容易です。 f:id:jyuko49:20171203224147j:plain コロコロ (c) gdgd妖精s (ぐだぐだフェアリーーーズ), 2代目gdgd妖精s