【VR】数行のHTMLを書いただけでVRができちゃうA-Frame

Pocket
LinkedIn にシェア
LINEで送る

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

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

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

1.一番簡単な記述

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

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

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

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

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

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

A-FrameVR_2_Takahiro_Yanai_christinayan01

最初に出てくる画面は一緒ですが、ステレオ(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

お気に召していただけましたか?

購入によるお支払(ご支援)も承っています。お値段は10円からお好きな価格を。

ご注意:返金のご対応はいたしかねます。

JPY

管理人が読んだおすすめの建築本

    

【VR】数行のHTMLを書いただけでVRができちゃうA-Frame” への2件のフィードバック

コメントを残す