Edge経由のWebVRはImmersiveでは既に動いていましたが、、OSのアップデートに伴いHoloLensでもEdge経由でWebVRが使えるようになりました
ImmersiveでのWebVR
やばい 頭おかしくなりそう #WinMR pic.twitter.com/Gak7wk5z6H
— デコ・シ (@Ash_Yin) 2017年8月28日
BabylonJS で実行する
こちらから実行できます。
BabylonJS with WebVR simple demo
WebVR made with BabylonJS works on HoloLens RS4.
— デコ・シ (@Ash_Yin) 2018年3月29日
Here is sample.https://t.co/hsziB15jwV #HoloLens pic.twitter.com/e2kunu7xUL
ThreeJS で実行する
こちらから実行できます。 three.js webvr - cubes
ジェットコースターのデモもあります。ポジトラもきいていますが、AirTapによる入力は対応していないようです。
ThreeJS also works :)
— デコ・シ (@Ash_Yin) 2018年3月29日
It's strange to play rollercoaster on hololens.... pic.twitter.com/yvVCqsYCSp
BabylonJSのデモはいくつか試したのですが、ThreeJSに比べ重たい印象でした。
ローカルで実行する
要はhtmlとJSを呼べばいいので、ローカル環境でも実行できそうです。
RS4ではFile Explorerが使えるようになったので、ここにファイルを置いていきます。
まずは、こちらからThreeJSをクローンします。
今回使うのは、
- build/
- examples/webvr_cubes.html
- examples/js/vr/WebVR.js
です。これをこのまま配置してもいいのですが、現状File Explorerの動作が不安定でネストを深くするとしばしばアプリがフリーズします。
ですので、htmlはルートにおいてやります。
root
|-webvr_cubes.html
|-WebVR.js
|- build/
パスの変更があったのでソースコードも直します。
<!-- 変更前 --> <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を接続したら、これら３つを選択して、
送る -> HoloLens
でExplolerのルートに置かれます。
あとはHoloLensからExploreを起動して、webvr_cubes.html をクリックして実行するだけです。
WebVRを有効にするか問われますので、OKにしましょう。
WebAR/VR with ThreeJS ! It works in local environment. You can start it from file explore. #HoloLens RS4 pic.twitter.com/EHxDYMkThX
— デコ・シ (@Ash_Yin) 2018年3月30日
録画では暗くなっていますが、実際の見え方は透過しているはずです。
Gazeがのれば、それに応じてCubeも発光します。
