VR作品を作るのに、Unity や Unreal Engine などのゲームエンジンは定番の選択肢です。でも、ちょっと敷居が高かったりしますよね。ツールや言語を覚える学習コストはそれなりにあります。もっとこう簡単にカジュアルなVR作品を作れないだろうか…
そこで登場するのがHTMLファイルです。Firefox で著名な Mozilla が作成したフレームワーク 「A-Frame」を使えば、HTML感覚でVR作品を作れるらしい。。。一応？仕事がWebであるところの私にぴったり？ではないかというわけで続きへ進みます。
早速出鼻をくじくようでアレですが、A-Frame を DK2 で動かすにはユーザー側に以下のものが必要です。
- Firefox Nightly Build か Chrome のWebVR 用ビルド
- Firefox はさらに Mozilla WebVR Enabler アドオン
- Oculus Rift DK2
幸いなことに、iPhone なら素でOKです。（iOS 9.1が必要です。）
早速動かす
準備が整ったら、早速動かしてみます。よくあるJSライブラリ同様、headタグ内でインポートするだけ。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <a-cube></a-cube> </a-scene> </body> </html> |
これだけ。ファイルサイズは194バイト。minify すればもっと削れる…恐ろしくシンプルですが以下のようなキューブが現れ、iPhone や DK2 を使ってグイグイ見回すことができます。
対応環境の方はこちらで試すことができます。DK2で表示するには、画面右下の Cardboard アイコンをクリックします。
PCでは、この時点で以下の操作も可能です。
- マウスドラッグ（左、中、右ボタン）で視点変更
- WASD で前後左右移動
ただ、現状はDK2で見た場合、ジャダりまくりでリバース確実です。寝込みます。ブラウザウインドウでは滑らかに動いていますし、980 Ti マシンでこれなので、ブラウザ側の改良に期待ですかね。
公式のリファレンスはこちら。すごい簡単です（語彙が無い）。
…これだけでは芸がないので、なにか既存のモデルを表示してみます。
使うのは、いつか作ったパンダと、公式に上がってるサンプルの木(借りていいのかしら。怒られたら変えます)、プレーン。
コードはこうなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://aframe.io/releases/latest/aframe.min.js"></script> </head> <body> <a-scene> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-model position="-1 0.5 " scale="0.1 0.1 0.1" src="panda.dae"></a-model> <a-model src="https://aframe.io/aframe/examples/_models/tree1/tree1.dae"></a-model> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> |
位置やサイズの調整もして、以下のようになりました。これでもそんなに芸はない。
パンダの白さが周りに影響している。。。パンダがライトのようだ。派手なGIなんだろうか…
とにかく割と簡単にシーンが作れて、ブラウザ上でスイスイ動いてしまうのはナカナカ良いですね。JS で簡単な動きやインタラクションも組めるようですし、軽い用途ならこれで/がいいじゃんってなる。綺麗に動くようになる将来に期待。