デコシノニッキ

デコシノニッキ

ホロレンジャーの戦いの記録

HoloLens RS4でWebVRを実行する

Edge経由のWebVRはImmersiveでは既に動いていましたが、、OSのアップデートに伴いHoloLensでもEdge経由でWebVRが使えるようになりました

ImmersiveでのWebVR

BabylonJS で実行する

こちらから実行できます。 BabylonJS with WebVR simple demo

ThreeJS で実行する

こちらから実行できます。 three.js webvr - cubes

ジェットコースターのデモもあります。ポジトラもきいていますが、AirTapによる入力は対応していないようです。

BabylonJSのデモはいくつか試したのですが、ThreeJSに比べ重たい印象でした。

ローカルで実行する

要はhtmlとJSを呼べばいいので、ローカル環境でも実行できそうです。
RS4ではFile Explorerが使えるようになったので、ここにファイルを置いていきます。
まずは、こちらからThreeJSをクローンします。

github.com

今回使うのは、

  • build/
  • examples/webvr_cubes.html
  • examples/js/vr/WebVR.js

です。これをこのまま配置してもいいのですが、現状File Explorerの動作が不安定でネストを深くするとしばしばアプリがフリーズします。
ですので、htmlはルートにおいてやります。

root
|-webvr_cubes.html
|-WebVR.js
|- build/

f:id:haikage1755:20180330212113p:plain:w350

パスの変更があったのでソースコードも直します。

<!-- 変更前 -->
<script src="../build/three.js"></script>
<script src="js/vr/WebVR.js"></script>

<!-- 変更後 -->
<script src="./build/three.js"></script>
<script src="./WebVR.js"></script>

続いて、背景を編集します。やはりHoloLensなので黒透過させたいですよね?させたくない?

<!-- 56~58行目付近。背景色を黒にする -->
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000,0);
<!-- 74~77行目付近。ワイヤーフレームをfalseにする -->
room = new THREE.Mesh(
    new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
    new THREE.MeshBasicMaterial( { color: 0x404040, wireframe: false } )
);

さて、配置します。USBでHoloLensとPCを接続したら、これら3つを選択して、

送る -> HoloLens

でExplolerのルートに置かれます。
f:id:haikage1755:20180330213421p:plain:w250

あとはHoloLensからExploreを起動して、webvr_cubes.html をクリックして実行するだけです。
WebVRを有効にするか問われますので、OKにしましょう。

録画では暗くなっていますが、実際の見え方は透過しているはずです。

Gazeがのれば、それに応じてCubeも発光します。
f:id:haikage1755:20180330213910p:plain:w450

[デコシノニッキ]は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。」