たるこすの日記

たるこすの日記

リアルからバーチャルへ、バーチャルからリアルへ

Windows Mixed Reality Headset で WebVR を試してみる(A-Frame)

こんにちは、たるこすです。

今回は、AcerWindows Mixed Reality Headset(Immersive Headset) で WebVR を試してみようと思います。

ブラウザや端末ごとの WebVR 対応状況は以下のサイトに書かれており、Microsoft EdgeWindows Mixed Reality の組み合わせは Supported となっています。

webvr.rocks

ググってみると WebVR のフレームワークはいくつかあるようでしたが、簡単に試せそうな A-Frame を使ってみました。A-Frame は Mozilla によって開発されたもので、HTML タグだけでも VR コンテンツを作成することができます。

aframe.io

A-Frame を使ってみる

以下のような HTML ファイルを作成します。

<a-scene> タグの中で、<a-box> や <a-sphere> タグを使ってプリミティブなオブジェクトを配置しています。

このファイルをブラウザで開けば、以下のような画面が表示されるはずです。

Immersive Headset 内でも同様です。Edge を開いて先ほどと同じように作成した HTML ファイルを開けば、同じ画面が表示されます。さらに、右下のメガネのようなマークをクリックすると VR モードとなり、3D で表示されます。

web サーバを立てる

http:// でアクセスしたい場合は、お好みの言語・フレームワークで web サーバを立てれば良いです。私は nodejs を使うことが多いので、以下のようなフォルダ構成で app.jsindex.html を配置しました。

|- app.js
|- public
    |- index.html

node app.js とすると、http://localhost:3000 でアクセスできるようになります。

デモ動画

メニューから「デスクトップ」を選択すれば、Immersive Headset 側でもデスクトップ画面を見ることができ、コードを書くことができます。ただ、Headset の解像度が少し足りないため、文字を大きくしないと読めませんでした。

Windows Mixed Reality WebVR Sample (A-Frame)

おわりに

簡単なコンテンツであれば、スクリプト一行とタグ数個できるのでお手軽でした。ECサイトなどで WebVR 対応サイトが広まってくるといいですね!