go’s blog

聴いた音楽とか、見たものとか

A-Frameにハメられた

A-Frameを使ってブラウザVRの検証をしようとしたら色々と躓いた。

 

①公式ライブラリのバグ

aframeライブラリのパスを常に最新のものを使おうとlatestにしていたらこいつがバグの持ち主だった。

objが読み込めない・・・ってなってconsoleのwarning読んでもちんぷんかんぷん。

結局安定板っぽいver 0.4.0を指定したらいけた。

 

②verによって書式が変わっている

例えばプリミティブな図形を描画したいとして、0.4.0ではa-boxタグを使用し、0.3.2ではa-cubeタグになっている。

今後もこういった微妙な仕様変更に引っかかるに違いない・・・

 

③FOV(Field of View)を最適な値に

普段Unityを使っていると、Virtual Reality SupportedをOnにしているため意識しないが、A-Frameを使うときは自分で最適な値を指定してあげなければいけなかった。

現在、ハコスコを使用想定しているのでとりあえず60に(デフォルト80)

ブラウザVR

Web技術(ブラウザ)によるVRの仕組みと現状 | GMOインターネット 次世代システム研究室

framesynthesis.jp

とても詳細にまとめられているサイト

 

vr.chromeexperiments.com

4つのコンテンツが体験可能

aframe.io

three.jsを使用したフレームワーク

 

Unity to three.js

どうやらAssetでそれっぽいのはあるけど、やるとすればWebGLビルドのみ。

基本的にUnityで編集して、スクリプトを吐き出すとかは無理っぽい。

WebGL出力はモバイルではサポート外。

docs.unity3d.com

面白いけどスマホでできないのが残念。

dev.mozilla.jp

↑上記のゲームだと実行できなかっただけで、こっちは実行できた。

ch.nicovideo.jp

 

Unity × Cardboard SDK × WebGL出力でいけるかと思ったけど、Cardboard SDKiOSAndroidにしか対応していない・・・

Error | Unity Community

iOSビルドなら比較的簡単

nn-hokuson.hatenablog.com