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

Preview:

Citation preview

感じる♥ A-Frame

伊藤淳(@jujunjun110)

VOYAGEGROUP VR 室 室長

感じたい…

立体感…

こうなりたい

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

形式 全天球画像 3D モデル

イメージ

見た目の綺麗さ ◯ けっこう綺麗 × 現状、わりと汚い

扱う場合の重さ ◯ とても軽い × 重い

視差( = 立体感) × 基本的になし ◯ あり

視点 × 固定 ◯ 自由に移動できる

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

やってみた

手順

① 全天球画像を撮影↓

② 同時に空間を 3D スキャン↓

③ ② のデータを簡略化・軽量化↓

④ 全天球画像の裏側に軽い 3D モデルを配置↓

⑤ レティクルの挙動で立体感を表現

実装イメージ

① 全天球画像を撮影

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

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

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

④A-Frame 上に配置

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

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

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

VOYAGE GROUP VR室ブログ毎週水曜更新中 みてね!

まとめ

A-Frame / Unity でVR コンテンツの開発をしたい

エンジニアを探しています

Recommended