感じる♥ A-Frame

伊藤淳(@jujunjun110)

VOYAGEGROUP VR 室 室長

感じたい…

立体感…

こ

こうなりたい

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

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

イメージ

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

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

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

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

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

やってみた

手順

① 全天球画像を撮影↓

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

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

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

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

実装イメージ

① 全天球画像を撮影

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

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

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

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

④A-Frame 上に配置

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

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

で読み込む方法

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

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

Demo(Link)

こ

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

まとめ

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

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