どうもラブヘイトです！
せっかくの１０連休だったけどブログ書いたり、BlenderでCarモデリングしたりと
やることはあまり変わりません(涙)
今回は思いつきなのですが、Skyboxを自分で作成する方法についてまとめようかなと思います
◆skyboxとは
skyboxは現実でいう「空」の役割をしています
デフォルトのskyboxはこれです↓
なんか寂しい風景ですよね...
次に、無料のアセットで手に入るskyboxを設定した時の風景がこちら↓
全然違います！ゲームの雰囲気をガラッと変えることができるので
もしデフォルトのままの人はいますぐ変えるべきです。これからはその手順の紹介になります
また、当記事ではこの上の画像で登場したWispyskyというアセットを例に、skyboxを作って行きますのでよかったらインポートして見てください！
◆skyboxの設定方法
skyboxの実態は「skybox/6 sided」 もしくは 「skybox/cubemap」シェーダーを使用したマテリアルです
マテリアルといえば球体のイメージアイコンで表示されますが、これらはテクスチャやスプライトのようなイメージアイコンなので混乱します
↑これもマテリアルなんです。紛らわしいわ！
設定方法は３つあるので、まず１つ目
Lighting設定から変更する
2つ目
Sceneビューにドラッグする
３つ目
カメラにSkyboxコンポーネントをつける
1つ目と２つ目は同じものですが、３つ目は最優先に表示されるので注意
さて、skyboxの設定方法がわかったところでskybox用のマテリアルを作って行きたい！のですが、その前にCubeMapというものが出てくるので説明しておきます
Cubemapとは？
Cubemapは１枚の絵を６つの面に分割して擬似的に天球を作り出すというものです
この６つの面像の元となる画像はできるだけ精度の高い画像が良いと思います
↓Cubemapについてあまり詳細ではないですが、リファレンスがあります
初見だと、「なんだこれ？」ってなりそうですが、下の図を見れば簡単です
この画像を
↓↓↓↓↓↓↓こうしろっ!↓↓↓↓↓
ってことです
これがCubemapと呼ばれるもので、skyboxを作成するとき必要になります
安心してくださいUnityは自動でこれをやってくれるのです(ありがとうUnity!!)
いよいよskyboxを作って行きます
◆Cubemapシェーダーでskybox作成
Cubemapシェーダーの方は比較的簡単に作ることができます。後で比べて見ますがもう一つの6 Sidedシェーダーの方が精度が高い気がします。
手順：
①.元となる画像をインポートする
元となる画像はできるだけ大きくて精度の高い画像が良いです。というのもskyboxは画像をかなり広げるので普通の写真だと粗っぽくなります。なので元がいいものにしましょう
「パラノマ,8k,HDR」とかで検索すると出てくると思います
ライセンス関係は各自で気をつけてください
今回はこの画像を使って作って行きます
②.画像の設定を変更する
インポートしたら画像の設定をします
Texture shape：Cubeにする
Mappingという項目が出てきます
Mappingはどういう形で画像をCubemapにするかを決める項目です
Mapping項目を上から説明すると
・Auto：Unityが自動で判別
・6Frames Layout：Cubemapとは、で出てきた切り方
・Latitude-Longtitude Layout：パラノマ画像で、自然に見える
・Mirrored Ball：円形の画像用
今回はパラノマ画像なので「Latitude-Longtitude Layout」を選択
高画質に設定してApplyして完了です
※画像サイズが大きいと時間がかかってしまいますが、少し待ちましょう
③Create>Mterialでマテリアルを新規作成します。名前はなんでも良いです
④shaderからskybox/Cubemapを選択
⑤Cubemapの項目に先ほど作成したCubemapを選びます
完成したものをSkyboxに設定するとこのようになります
完成してびっくり！自分でもこんな綺麗な画面作れると思わなかった笑
真ん中にある球体はReflectionProbeを適用したものです
また、ReflectionProbeについても記事書きたいのでそちらで紹介します
◆6sidedシェーダーでskybox作成
こちらはcubemapシェーダーと違い、限りなく天球に近いように見せることが可能です
これを作成するには６枚の画像が必要で、昔のCubemapみたくこの６枚の画像を
x,-x,y,-y,z,-zに指定して行きます
みなさん最初にたどり着くskyboxアセットはWispyskyだと思います(適当)
混乱を防ぐためにも、Wispyskyに内包されているレガシー(昔のバージョンで使っていた)なCubemapを説明します
WispyskyのCubemapのInspectorを見てみると、先ほど作成したCubemapと少し内容が違います
昔のCubemapの作り方もできますが今は推奨されていないみたいです
「こういうのもあるんだ〜」って見てもらうだけで結構です
ということで、 やっと6Sidedシェーダーでの作成方法に移っていきます
手順：
①画像を用意する
最初ですが一番面倒なところです。Cubemapを６枚に切り取ってTextureで用意しなければいけません
しかし、Unityで自動生成してくれたCubemapはどこに格納されているのか、
また取り出せるのかすらわからないので画像はUnityの外側で用意しましょう
こんなサービスを見つけました↓
画像をCubemapに変換してくれたり、６枚に分割してくれます
ただ、私のpcでは6枚分割のモードは処理が重すぎたので、まずCubemapを作成して
地道に切り取りました
これで準備は完了です
②マテリアル作成
Create>Materialでマテリアルを作成し、Shaderを「skybox/6 Sided」に変更します
その後先ほどの６枚の画像をパズルみたいにはめていきます
というとこで完成です！
このskyboxを設定したのがこちら↓
画質はあまり変わりませんが、絵画がずれているのがわかりますか？
自分の手で切り取った場合、サイズが違ったらこのようなことが起こるのでなかなか難しいです・・・
あとは、画像が反転している場合もあるので直してインポートしましょう！
今回はここまで。ではまた
またはてなブログの発見として、中見出しと合わせて小見出しを設定して目次にすることで、ちゃんとずれて表示してくれるのを初めて知りました笑
最近は結構HTMLでも編集するので、ブログのことを書いた記事を出してみるのもいいかもしれない
以上余談でした
--------------------------------------------------------------------------------
※当ブログにおいてナンバリングはあまり関係ありません
私とブログの成長記のようなものです
