Windows Mixed Reality Headset で WebVR を試してみる(A-Frame)
こんにちは、たるこすです。
今回は、Acer の Windows Mixed Reality Headset(Immersive Headset) で WebVR を試してみようと思います。
ブラウザや端末ごとの WebVR 対応状況は以下のサイトに書かれており、Microsoft Edge と Windows Mixed Reality の組み合わせは Supported となっています。
ググってみると WebVR のフレームワークはいくつかあるようでしたが、簡単に試せそうな A-Frame を使ってみました。A-Frame は Mozilla によって開発されたもので、HTML タグだけでも VR コンテンツを作成することができます。
A-Frame を使ってみる
以下のような HTML ファイルを作成します。
<a-scene> タグの中で、<a-box> や <a-sphere> タグを使ってプリミティブなオブジェクトを配置しています。
このファイルをブラウザで開けば、以下のような画面が表示されるはずです。
Immersive Headset 内でも同様です。Edge を開いて先ほどと同じように作成した HTML ファイルを開けば、同じ画面が表示されます。さらに、右下のメガネのようなマークをクリックすると VR モードとなり、3D で表示されます。
web サーバを立てる
http://
でアクセスしたい場合は、お好みの言語・フレームワークで web サーバを立てれば良いです。私は nodejs を使うことが多いので、以下のようなフォルダ構成で app.js
と index.html
を配置しました。
|- app.js |- public |- index.html
node app.js
とすると、http://localhost:3000
でアクセスできるようになります。
デモ動画
メニューから「デスクトップ」を選択すれば、Immersive Headset 側でもデスクトップ画面を見ることができ、コードを書くことができます。ただ、Headset の解像度が少し足りないため、文字を大きくしないと読めませんでした。
Windows Mixed Reality WebVR Sample (A-Frame)
おわりに
簡単なコンテンツであれば、スクリプト一行とタグ数個できるのでお手軽でした。ECサイトなどで WebVR 対応サイトが広まってくるといいですね!