xR Deveropers Japan Blog

xRTechが好き・興味がある方のコミュニティです。勉強会やスラックなどでの情報共有を行っています。興味のある方、お気軽にご参加ください^^プログラミングなど未経験の入門希望者も歓迎しています。

チュートリアル:OculusGo VRビーチを作る

f:id:k_mawa:20181221202401p:plain

概要

Oculus GoのでVRビーチを探検できるチュートリアルです。

デモ

OculusGoで見た景色。こんな感じです。 これは沖縄の海辺の動画なのですが、あたかも旅行に来たかのような体験が楽しめます。 コントローラーで、ビーチ内を移動もできます。

実装概要

下記のような感じです。オブジェクトも4個しかなく、シンプルな2Dゲームを作ることと比較しても、構造はとてもシンプルです。

f:id:k_mawa:20181221202919p:plain

手順

1:素材を用意する。

360度動画というものが必要です。 今回はこちらの動画配布サイトを利用いたしました。今回の実験にピッタリです。

360度VR動画・画像のフリー素材が無料ダウンロード可能 360あーる・てぃー・しー 360度VR動画・画像のフリー素材が無料ダウンロード可能 - 360あーる・てぃー・しー

このうち、この動画がきれいだなと思ったので、ダウンロードしました。

沖縄県読谷村宇座海岸 青い空と青い海、これぞ沖縄の海という雰囲気が感じられる沖縄県読谷村宇座海岸 No.1- 【360度VR動画・画像のフリー素材】360あーる・てぃー・しー

自分で撮ることもできます。

360度天球動画の録画できる機材が必要です。 最近の有名どころだとリコーのシータですね。 一番安いグレードだと、2万円台から手に入ります。 紹介動画を引用しておきます。

なお、シータで撮影した動画をUnityで扱うまでの流れで参考になる記事がありましたので、こちらもご紹介します。

vrinside.jp

2:Unityで実装開始

Unityで概要にあったオブジェクトを配置します。

f:id:k_mawa:20181221203636p:plain

スクリーンとなるSphere 床となる、Plane OculusGoで利用できるCamera、OVRCameraRig デフォルトの照明の Directional LightはそのままでOKです。

OVRCameraRigを配置したことない方は、こちらの記事など参考になるかと思います。 xrdevjaでも記事追記したほうがいい内容ですね^^ いずれ追記します。 o21o21.hatenablog.jp

3:床を透明にする

f:id:k_mawa:20181221204136p:plain Planeに設定しているMaterialのRenderingModeをデフォルトの"Opaque"から"Fade"に変えます。

f:id:k_mawa:20181221204455p:plain

かわりましたね。ためしにUnityEditorで再生してみてください。これだけで再生時に透明になります。これで360度動画全領域をHMDで見渡せるようになります。

Materialいじるのは初めてですという方向けにはこちらの記事が役立つと思います^^

techacademy.jp

4:SphereにVideoPlayerコンポーネントを追加

再生する設定をします。動画をインポートして、コンポーネントで指定します。 次のようにします。 f:id:k_mawa:20181221205011p:plain

このあたりで一旦再生してみるとすでに球体でビデオが再生されている様子が確認できます。 次は中に入ってもビデオを見られるようにします。

5: Sphereの内側でも再生されるようにする。

再生されるような設定のシェーダを作ります。

まずは初期設定のシェーダーをつくります。 f:id:k_mawa:20181221205209p:plain

シェーダーを編集します

SubShader
    {
        Tags { "RenderType"="Opaque" }
        Cull Front //これを追加
        LOD 100

この1行を追加してください。これはどういう意味かというと裏側描写するという意味で、次の記事がとても勉強になりますのでご覧ください。

nn-hokuson.hatenablog.com

それをまた新たに作った新規Materialにくっつけます f:id:k_mawa:20181221205305p:plain

くっつけた新Materialを、Sphereにドラッグ&ドロップして設定します。 すると、内側でも再生されるのでデモのように全天球のVRビーチを楽しめます。

参考・一部引用記事

全天球動画のVRの実装方法の解説が参考になります。

作って学べる Unity VR アプリ開発入門

作って学べる Unity VR アプリ開発入門