「VR」カテゴリーアーカイブ

A-FRAMEを使ってみた（2）タグ編

2016年7月9日 c-geru

A-FRAMEのドキュメントを見ていて、サンプルなどに出てくるタグが見当たらないことがあったのでまとめてみました。ドキュメントは機能や要素毎にまとめられているので、タグから引けないので。

A-FRAME タグ一覧（version 0.2.0 版）

タグ名	ドキュメント	備考
<a-scene>	Scene	A-FRAMEの global root object。canvasもここに含まれる。
<a-entity>	Entity	オブジェクトの位置、回転、およびスケールのなどを定義するタグ。
<a-animation>	Animations	アニメーションを定義するためのタグ
<a-assets>	Asset Management System	プリロード要素を定義するためのタグ
<a-mixin>	Mixins	<a-assets>内に定義する、再利用可能なコンポーネント属性を定義するタグ
<a-asset-item>	Asset Management System	<a-assets>内に定義する3D用のファイル（.dae,.mtl,obj）。
<audio>	Asset Management System	<a-assets>内に定義する音声ファイル。
<img>	Asset Management System	<a-assets>内に定義する画像ファイル。
<video>	Asset Management System	<a-assets>内に定義するビデオファイル。
<a-box>	<a-box>	箱状オブジェクト。ver 0.1.0までは、<a-cube>
<a-camera>	<a-camera>	カメラオブジェクト
<a-collada-model>	<a-collada-model>	3D COLLADA オブジェクト（.dae）
<a-cone>	<a-cone>	円錐オブジェクト
<a-cursor>	<a-cursor>	カーソルポインタ
<a-curvedimage>	<a-curvedimage>	湾曲した板状オブジェクト
<a-cylinder>	<a-cylinder>	円柱オブジェクト
<a-image>	<a-image>	<a-plane>に画像を適用したオブジェクト
<a-light>	<a-light>	照明オブジェクト
<a-obj-model>	<a-obj-model>	3Dオブジェクト。.obj、.mtlを指定可能。
<a-plane>	<a-plane>	板状オブジェクト
<a-ring>	<a-ring>	板状のリングオブジェクト。radius-inner=”0″ （内径=”0″）で円盤状になる。
<a-sky>	<a-sky>	シーンの背景
<a-sphere>	<a-sphere>	球体オブジェクト
<a-torus>	<a-torus>	円管形状オブジェクト（arc=360 でドーナツ状）
<a-video>	<a-video>	<a-plane>にビデオを適用したオブジェクト
<a-videosphere>	<a-videosphere>	シーンの背景に動画を適用したオブジェクト

上記の説明は、執筆時点でのA-FRAME version 0.2.0 を前提としています。

不備、誤りなどありましたらご指摘下さい。

A-FRAME, Canvas, HTML5, VR

A-FRAMEを使ってみた（1）360°画像編

2016年7月2日 c-geru

Playstation VRの予約が始まったり、諸々盛り上がりを見せつつあるようにみえるVR界隈。興味はあるけど、Oculus Riftもその開発にPC用意するとか考えると結構なお値段だし、基本静観してたのですが、HTMLベースのVR用のフレームワークである「A-FRAME」の記事をみつけたので、試してみました。

「A-Frame」でVR開発入門！HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験 – paiza開発日誌

まずは上の記事を参考に、360°パノラマ画像のVRを作ってみました。

1.特別な機材なしで360°パノラマ画像を作る。

通常、360°パノラマ画像を作るにはRICOH THETAなどの対応カメラが必要ですが、iOS/Android用のGoogle ストリートビューアプリで作成が可能です。使い方は、上の参考リンクに詳しいのでをそちらを参照のこと。

複数の画像をつないで全天球型の画像を作成するので、撮影回数が多くなるのが難点ですが、特別な投資なしで作れるのでテストとしては十分だと思います。ちなみにこんな感じの画像が生成されます。

ストリートビューアプリで作成した360°画像。なるべく被写体（人や物）が近くにない方が繋ぎがうまくいく（ズレが目立たない）ようです。

2.HTMLを書く

VRコンテンツとして表示するために、HTMLを書きます。A-FRAMEは基本的にはタグベースなので、A-FRAMEのjsライブラリを読み込んで、必要なタグを書くだけです。以下、サンプルのHTML全文です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>神保町の路地 | A-Frame</title>
    <meta name="description" content="神保町の路地 | A-Frame">
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-sky src="img/IMG_2277.jpg"></a-sky>
        <a-camera wasd-controls-enabled="true"></a-camera>
    </a-scene>
  </body>
</html>

<a-scene>は、canvasタグに相当します。その中に要素を定義していきます。
<a-sky>は、VR空間の背景です。VR空間が大きな球体として定義されていて、その内側にカメラがあるイメージです。その球体の内側に色や360°パノラマ画像を指定することで背景として表示されます。
<a-camera>は、カメラです。スマホだと端末の傾き、PCならマウスのドラッグ方向で、このカメラの向きが変わります。

※<a-camera>が省略された場合は、デフォルトのカメラが設置されるので、このタグがなくても表示されます。

iPhoneで見た様子。右下のメガネアイコンをタップするとWebVRモードで表示されます。

WebVRモードで表示した様子。PCブラウザなどWebVRがサポートされていない場合は切り替えできない。

実際のサンプルは、下のリンクからどうぞ。

神保町の路地 | A-Frame

Unity, VR, Xcode

【Xcode】Cardboard for unityのデモをXcode7で書き出す際の注意点

2016年2月16日 c-geru

【OSX 10.11.3+Xcode 7.2.1+Unity 5.3.2f1+iPhone5（iOS 9.2.1）】

VRも盛り上がりを見せつつある昨今、iPhoneでVRのテストをしてみようかとググっていて、こんな記事を見つけました。

Cardboard SDK for Unityを使ってVR対応アプリを作る＆ Live2Dのキャラを目の前に召喚する – Qiita

以前、「ぱのかの」（現「ルクルク」）のイベントでスマホ用ビューアをもらったことを思い出しました。

とりあえず「Cardboard SDK for Unity」のデモをテストしてみてみました。手順は下記のリンクを参照。

iOS 用 Unity のスタートガイド | Cardboard | Google Developers

で、この記事通りに進めてみたもののXcodeからの書き出しでエラーになります。Xcode7リリース前の記事であるため、2点ほどエラーになった箇所があり、その対処のための備忘録です。

Xcode7.2.1でbitcodeエラー

Unityからビルドすると、Xcodeのプロジェクト一式が書き出されるので、プロジェクトファイル（今回は”Unity-iPhone.xcodeproj”）をXcodeで開くことになります（今回初めて知りました）。

で、Xcodeからビルドすると下記のようなエラーになります。

ld: '/Users/c_geru/work/unity/testProject/xcode/Libraries/Plugins/iOS/libvrunity.a(vraudio_unity.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. for architecture armv7
clang: error: linker command failed with exit code 1 (use -v to see invocation)

これは、プロジェクト設定の Build Settings > Enable BitcodeをNOにすればいいらしい。詳しくは下記参照。

Xcode7でbitcodeのエラーが出た – Qiita

Xcode7.2.1で”_SecTrustEvaluate”エラー

で、もう一回ビルドしてみると、今度は別のエラーが2件。

Undefined symbols for architecture armv7:
  "_SecTrustEvaluate", referenced from:
      ___75-[GTMSessionFetcher URLSession:task:didReceiveChallenge:completionHandler:]_block_invoke651 in libvrunity.a(GTMSessionFetcher.o)
ld: symbol(s) not found for architecture armv7
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Undefined symbols for architecture armv7:
  "_SecTrustEvaluate", referenced from:
      ___75-[GTMSessionFetcher URLSession:task:didReceiveChallenge:completionHandler:]_block_invoke651 in libvrunity.a(GTMSessionFetcher.o)
ld: symbol(s) not found for architecture armv7
clang: error: linker command failed with exit code 1 (use -v to see invocation)

これらは、Security.frameworkが足りないことによるエラーのようです。プロジェクト設定の General > Linked Frameworks and Libraries で Security.framework を追加してやればOK。詳しくは下記参照。

[Unity] Xcodeで”_SecTrustEvaluate”, referenced from: エラーが出る – Qiita

これで無事、実機にビルドできました。

iPhone5にビルドした様子。 — iPhone5に「Cardboard SDK for Unity」のデモをビルドした様子。

AS blind side