今回は、Unity上での360℃画像表示について記載します。
私が実際に活用しているやり方を幾つかご紹介します。
今回記載する方法を活用して私が作ったインターネットミュージアムについても、よろしければご覧ください。

オンライン美術館　Crane Art Museum

使い方①360℃画像のSkyboxへの投影

一番スタンダードな使い方です。

テクスチャのインポート

まず、360℃画像をUnityのProjectにインポートします。
前回の記事（バーチャル美術館　Unityにおける360℃画像・Cubemapの活用（Unity Recorderを利用したスクリーンショットの撮影））で、Unityのゲーム画面上の360℃スクリーンショットを撮る方法を記載しましたが、今回はそこで作成した画像をインポートしてみます。もちろん、Insta360などで撮影した360℃写真などでも問題ありません。

プロジェクトウィンドウに360℃画像をドラッグ＆ドロップし、インポート設定でテクスチャ形状を「キューブ」に設定して「適用する」をクリックします。

マテリアルの作成

次にマテリアルを作成します。プロジェクトウィンドウ上で右クリック→「作成」→「マテリアル」で新規マテリアルを作成し、名前を適当なものにしてください。

Shaderを「Skybox/Cubemap」に設定し、先程インポートしたテクスチャをドラッグ＆ドロップしてください。

Skyboxの設定

あとは、シーンビューの空のところに先程作成したマテリアルをドラッグ＆ドロップすれば、Skyboxにマテリアルがセットされます。

もしくは、ウィンドウ→レンダリング→ライティング→「環境」タブで「スカイボックスマテリアル」にマテリアルをセットします。

使い方②Cubeを作成して360℃画像を投影

ここからは少しマニアックな使い方になります。
下のスクリーンショットのように、Cubeを作成してそこに先程の360℃画像のCubemapを投影するというものです。

この方法のメリットについては前々回の記事に記載しています。

Cubeの作成

まずはヒエラルキーウィンドウ上で右クリック→3Dオブジェクト→キューブでキューブを作成します。

次に、作成されたCubeのマテリアルに先程作成したSkyboxのマテリアルを設定します。

注）ドラッグ＆ドロップでマテリアルを設定する場合、下の図の「〇」のルートでドラッグしましょう。ドラッグ中にシーンビューのゾーンを通過してしまうと（「×」のルート）、Skyboxにマテリアルが設定されてしまいます。

Skyboxにマテリアルが意図せず設定されてしまった場合は、ウィンドウ→レンダリング→ライティング→「環境」タブで「スカイボックスマテリアル」を再設定してください。

さて、Cubeの位置をわかりやすく0,0,0にしておきます。
同様に、MainCameraの位置も0,0,0にします。これで、Cubeの中心にカメラが行きます。ゲームビューをのぞいてみましょう。

カメラの回転をいじってみると、確かに360℃画像が見えます。

Skyboxシェーダを使うことによる問題

さて、シーン上に一つだけCubeを配置する分には、ここまでで問題ないのですが、他のObjectがある場合に、問題が生じます。
もう一つCubeを作成してみます。

Skyboxマテリアルを反映したCubeの中から見てみますと、以下のように、先程追加したCubeが見えてしまいます。
これは、Skyboxシェーダの描画方法によるもので、Skyboxは通常、背景として使われることから、最も背面に描画される設定になっているためです。

対処方法としては、Icosphereを用いて他のシェーダで描画する、Cubeを遮蔽する、といった方法があります。Skyboxシェーダを改変するという方法もありそうですが、残念ながら私はシェーダ言語に詳しくないため、できるかは分かりません。今回はCubeを遮蔽する方法についてご紹介します。Icosphereについては次回の記事で解説したいと思います。

Skyboxを適用したCubeをCubeで遮蔽する

単純に言えば、Skyboxを適用したCubeを、もっと大きなCubeで覆ってしまい、外の景色を遮蔽するという方法です。

これをやるには、ざっくりいうと、以下の二つが必要です。

・レンダリングパスをディファードに設定する
・内側に法線を向いたCubeで遮蔽する

レンダリングパスの設定

まず、レンダリングパスをディファードに設定する方法ですが、
編集→プロジェクト設定→グラフィックスで下図のように、「デフォルト値を使う」を外し、レンダリングパスを「ディファード」に設定します。
フォワード、ディファードの違いについてはここでは説明しません（私も正直よく分かってないですが）。公式ドキュメント等を参照してください。

もしくは、カメラの設定でもレンダリングパスを設定できます。

遮蔽するCubeの作成

次に、遮蔽するCubeを作成します。
ただし、Unityの標準機能でCubeを作成してもダメで、内側に法線を向いたCubeを作成する必要があります。Unityの公式パッケージであるProBuilderで簡単に作れます。

ウィンドウ→パッケージマネージャー→「パッケージ：Unityレジストリ」を選択すると出てきます。インストールします。

インストールすると、ツール→ProBuilder→ProBuilder Windowで起動できます。

New Shapeのところの「＋」をクリックします。

Shape Selectorは「Cube」、Sizeをそれぞれ1.1に設定してBuildします。
（Skyboxを設定したCubeを覆いたいため1より少し大きめのサイズにしています）

これで、Cubeが出現すると思います。

原点の位置が中心になっていないため、Cubeを選択した状態でCenter Pivotを押します。また、描画を内向きにするため、Flip Normalsを押します。

位置を0,0,0にして、Skyboxを設定したCubeを覆います。

こんな感じになるかと思います。

隣のCubeにもSkyboxを設定して、試してみます。

これで遮蔽成功です。変

長くなったため今回は以上です。
次回はIcosphereを使う方法について記載したいと思います。