全天球画像＋モデルに沿って動くレティクルで立体感を感じるA-Frameアプリケーションについて。 TOKYO A-Framer Meetupにて発表したスライドです。 デモ： https://jujunjun110.github.io/feeling-depth/ イベント： https://connpass.com/event/43707/

1. 感じる♥ A-Frame

2. 伊藤淳
(@jujunjun110)
VOYAGEGROUP
VR室 室長

3. 感じたい…

4. 立体感…

5. こ
こうなりたい

6. 実写コンテンツ × A-Frame で
立体感を感じる方法

7. 形式 全天球画像 3Dモデル
イメージ
見た目の綺麗さ ◯ けっこう綺麗 × 現状、わりと汚い
扱う場合の重さ ◯ とても軽い × 重い
視差（=立体感） × 基本的になし ◯ あり
視点 × 固定 ◯ 自由に移動できる

8. いいとこどりできないものか…

9. やってみた

10. 手順
① 全天球画像を撮影
↓
② 同時に空間を3Dスキャン
↓
③ ②のデータを簡略化・軽量化
↓
④ 全天球画像の裏側に軽い3Dモデルを配置
↓
⑤レティクルの挙動で立体感を表現

11. 実装イメージ

12. ①全天球画像を撮影
ポイント
・三脚を使って同じ高さと向きで撮る
・高さは視聴の際の頭の高さに合わせる
・撮影する箇所同士の距離をなんとなく覚えておく

13. ②同時に空間を3Dスキャン
• 今回はmatterportを利用（約50万ポリゴン）

14. 詳細はVOYAGEGROUP VR室ブログにて！
• 10/6 空間3Dスキャンカメラ Matterportの使い方とレビュー

15. ③ ②のデータを簡略化
• 今回はblenderでさくっと（約400ポリゴンまで軽量化）

16. ④A-Frame上に配置

17. ④A-Frame上に配置
• ソースコード

18. 詳細はVOYAGEGROUP VR室ブログにて！
• 10/19 Blenderで出力したUVメッシュ付きobjファイルをA-Frameで
読み込む方法

19. ⑤オブジェクトに沿って動くレティクルを実装
• ソースコード

20. 詳細はVOYAGEGROUP VR室ブログにて！
• 11/2 A-Frameで壁に沿って移動する視線カーソルを実装する

21. Demo
(Link)

22. こ

23. VOYAGE GROUP VR室ブログ
毎週水曜更新中 みてね！
まとめ

24. A-Frame / Unityで
VRコンテンツの開発をしたい
エンジニアを探しています