Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーション

2,805 views

Published on

全天球画像+モデルに沿って動くレティクルで立体感を感じるA-Frameアプリケーションについて。
TOKYO A-Framer Meetupにて発表したスライドです。

デモ: https://jujunjun110.github.io/feeling-depth/
イベント: https://connpass.com/event/43707/

Published in: Engineering
  • Be the first to comment

実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーション

  1. 1. 感じる♥ A-Frame
  2. 2. 伊藤淳 (@jujunjun110) VOYAGEGROUP VR室 室長
  3. 3. 感じたい…
  4. 4. 立体感…
  5. 5. こ こうなりたい
  6. 6. 実写コンテンツ × A-Frame で 立体感を感じる方法
  7. 7. 形式 全天球画像 3Dモデル イメージ 見た目の綺麗さ ◯ けっこう綺麗 × 現状、わりと汚い 扱う場合の重さ ◯ とても軽い × 重い 視差(=立体感) × 基本的になし ◯ あり 視点 × 固定 ◯ 自由に移動できる
  8. 8. いいとこどりできないものか…
  9. 9. やってみた
  10. 10. 手順 ① 全天球画像を撮影 ↓ ② 同時に空間を3Dスキャン ↓ ③ ②のデータを簡略化・軽量化 ↓ ④ 全天球画像の裏側に軽い3Dモデルを配置 ↓ ⑤レティクルの挙動で立体感を表現
  11. 11. 実装イメージ
  12. 12. ①全天球画像を撮影 ポイント ・三脚を使って同じ高さと向きで撮る ・高さは視聴の際の頭の高さに合わせる ・撮影する箇所同士の距離をなんとなく覚えておく
  13. 13. ②同時に空間を3Dスキャン • 今回はmatterportを利用(約50万ポリゴン)
  14. 14. 詳細はVOYAGEGROUP VR室ブログにて! • 10/6 空間3Dスキャンカメラ Matterportの使い方とレビュー
  15. 15. ③ ②のデータを簡略化 • 今回はblenderでさくっと(約400ポリゴンまで軽量化)
  16. 16. ④A-Frame上に配置
  17. 17. ④A-Frame上に配置 • ソースコード
  18. 18. 詳細はVOYAGEGROUP VR室ブログにて! • 10/19 Blenderで出力したUVメッシュ付きobjファイルをA-Frameで 読み込む方法
  19. 19. ⑤オブジェクトに沿って動くレティクルを実装 • ソースコード
  20. 20. 詳細はVOYAGEGROUP VR室ブログにて! • 11/2 A-Frameで壁に沿って移動する視線カーソルを実装する
  21. 21. Demo (Link)
  22. 22.
  23. 23. VOYAGE GROUP VR室ブログ 毎週水曜更新中 みてね! まとめ
  24. 24. A-Frame / Unityで VRコンテンツの開発をしたい エンジニアを探しています

×