Tweet

Pocket

世間に浸透しあらゆるシーンで使用されてきているVR。今週はビッグサイトで3D&バーチャル リアリティ展があったりワクワクしっぱなしです。
Oculus RiftやらGear VRやらさんざんいじりましたが、なんだかんだで行き着くところはスマホでいかに気軽に閲覧できるか――という感じがしますね。
　
ところで去年末あたりに登場したA-FrameというWebVR用のフレームワークがあるのですが、これがまたすごい。あまりにも簡単なのです。サンプルも結構載っているので、シーングラフの知識があればすぐ理解できます。
A-Frameというのは、HTMLのタグとしてシーンを記述できるWebVR用のフレームワーク。WebVR対応のブラウザがあればVR表示ができちゃいます。
ざっくり言えば、数年前のスマホ以降だったらだいたい見れます。

今回はこの前THETA Sで撮影した建築物の写真で。。。ここで満を持してジャンクションが建築グラビア初登場！:)　
　↓のFlickrのやつはPC上だったらマウスでぐりぐりできるし、スマホだったら指でふがふが回せます。

一瞬飽きかけてしまったTHETAもWebVRとかの盛り上がりのおかげでまた撮りたくなってきています。

１．一番簡単な記述

最もシンプルな記述方法は下記の通り。
デモはここを押せば見れます。スマホで見ましょう。
A-Frame simple demo – christinayan
　

こんな画面が出ます。さらに画面右下のハコスコみたいなアイコンを押せばステレオになります。スマホをグルグルとかざしてみましょう。:)
ソースは以下です。本当に最小限のコードしか書かなくていい。

サーバを用意して、①index.htmlと、②画像ファイルと、③aframeファイルを用意するだけ。

ただし、これだとVRの時に視差が出ない。。。

よくわからないままで放置していますが、Gitの方にあがっているaframe.js（1,753KB）だと視差が効くようになります。ま、いっか。

視差が効く方のデモです。
A-Frame parallax demo – christinayan

最初に出てくる画面は一緒ですが、ステレオ（2画面）にした時に少しずれていると思います。まあどのくらい当てになるずれなのかはおいておいて。
WebVRを使ったサイトも出始めているので、今度試してみようと思います。

参考サイト

・A-Frame
・Stereoscopic Rendering in WebVR
・HTML数行でVRできるA-Frame – FRAME SYNTHESIS
・新しいWebVRフレームワークA-Frame入門 – Qiita
・cvan bump dist – WebVR v1.0 and roomscale Vive support! :ballon: – Git Hub