うにty生活

UnityChanを生活させたい

【Unity】Skyboxを自分で作成 #21

 

f:id:tubakihimeLoveHate:20190512022131p:plain


どうもラブヘイトです!

せっかくの10連休だったけどブログ書いたり、BlenderでCarモデリングしたりと

やることはあまり変わりません(涙)

 

今回は思いつきなのですが、Skyboxを自分で作成する方法についてまとめようかなと思います

 

◆skyboxとは

skyboxは現実でいう「空」の役割をしています

デフォルトのskyboxはこれです↓

f:id:tubakihimeLoveHate:20190507213242p:plain

なんか寂しい風景ですよね...

 

次に、無料のアセットで手に入るskyboxを設定した時の風景がこちら↓

f:id:tubakihimeLoveHate:20190507213309p:plain


全然違います!ゲームの雰囲気をガラッと変えることができるので

もしデフォルトのままの人はいますぐ変えるべきです。これからはその手順の紹介になります

 

また、当記事ではこの上の画像で登場したWispyskyというアセットを例に、skyboxを作って行きますのでよかったらインポートして見てください!

 

◆skyboxの設定方法

skyboxの実態は「skybox/6 sided」 もしくは 「skybox/cubemap」シェーダーを使用したマテリアルです

マテリアルといえば球体のイメージアイコンで表示されますが、これらはテクスチャやスプライトのようなイメージアイコンなので混乱します 

f:id:tubakihimeLoveHate:20190512154507p:plain

これもマテリアルなんです。紛らわしいわ!

 

設定方法は3つあるので、まず1つ目

Lighting設定から変更する

f:id:tubakihimeLoveHate:20190512154346p:plain

 

2つ目

Sceneビューにドラッグする

 

3つ目

カメラにSkyboxコンポーネントをつける

f:id:tubakihimeLoveHate:20190512154404p:plain

 

1つ目と2つ目は同じものですが、3つ目は最優先に表示されるので注意

さて、skyboxの設定方法がわかったところでskybox用のマテリアルを作って行きたい!のですが、その前にCubeMapというものが出てくるので説明しておきます

 

Cubemapとは?

Cubemapは1枚の絵を6つの面に分割して擬似的に天球を作り出すというものです

この6つの面像の元となる画像はできるだけ精度の高い画像が良いと思います

 ↓Cubemapについてあまり詳細ではないですが、リファレンスがあります

Cubemap - Unity マニュアル

 

f:id:tubakihimeLoveHate:20190508223941p:plain

初見だと、「なんだこれ?」ってなりそうですが、下の図を見れば簡単です

この画像を

f:id:tubakihimeLoveHate:20190508223927p:plain

                                   

                                     ↓↓↓↓↓↓↓こうしろっ!↓↓↓↓↓

 

f:id:tubakihimeLoveHate:20190508224010p:plain

ってことです

これがCubemapと呼ばれるもので、skyboxを作成するとき必要になります

安心してくださいUnityは自動でこれをやってくれるのです(ありがとうUnity!!)

 

いよいよskyboxを作って行きます 

 ◆Cubemapシェーダーでskybox作成

Cubemapシェーダーの方は比較的簡単に作ることができます。後で比べて見ますがもう一つの6 Sidedシェーダーの方が精度が高い気がします。

手順:

 ①.元となる画像をインポートする

 元となる画像はできるだけ大きくて精度の高い画像が良いです。というのもskyboxは画像をかなり広げるので普通の写真だと粗っぽくなります。なので元がいいものにしましょう

「パラノマ,8k,HDR」とかで検索すると出てくると思います

ライセンス関係は各自で気をつけてください

 

今回はこの画像を使って作って行きます

f:id:tubakihimeLoveHate:20190512155113p:plain

 

②.画像の設定を変更する

インポートしたら画像の設定をします 

f:id:tubakihimeLoveHate:20190512155415p:plain

 

Texture shape:Cubeにする

Mappingという項目が出てきます

Mappingはどういう形で画像をCubemapにするかを決める項目です

f:id:tubakihimeLoveHate:20190512125638p:plain

Mapping項目を上から説明すると

・Auto:Unityが自動で判別

・6Frames Layout:Cubemapとは、で出てきた切り方

・Latitude-Longtitude Layout:パラノマ画像で、自然に見える

・Mirrored Ball:円形の画像用

 

今回はパラノマ画像なので「Latitude-Longtitude Layout」を選択

高画質に設定してApplyして完了です

※画像サイズが大きいと時間がかかってしまいますが、少し待ちましょう

 

③Create>Mterialでマテリアルを新規作成します。名前はなんでも良いです

④shaderからskybox/Cubemapを選択

⑤Cubemapの項目に先ほど作成したCubemapを選びます

f:id:tubakihimeLoveHate:20190512042913p:plain

 

完成したものをSkyboxに設定するとこのようになります 

f:id:tubakihimeLoveHate:20190512134719p:plain

 

完成してびっくり!自分でもこんな綺麗な画面作れると思わなかった笑

真ん中にある球体はReflectionProbeを適用したものです

また、ReflectionProbeについても記事書きたいのでそちらで紹介します

  

◆6sidedシェーダーでskybox作成

こちらはcubemapシェーダーと違い、限りなく天球に近いように見せることが可能です

これを作成するには6枚の画像が必要で、昔のCubemapみたくこの6枚の画像を

x,-x,y,-y,z,-zに指定して行きます

 

みなさん最初にたどり着くskyboxアセットはWispyskyだと思います(適当)

混乱を防ぐためにも、Wispyskyに内包されているレガシー(昔のバージョンで使っていた)なCubemapを説明します

 

WispyskyのCubemapのInspectorを見てみると、先ほど作成したCubemapと少し内容が違います

f:id:tubakihimeLoveHate:20190512140137p:plain

f:id:tubakihimeLoveHate:20190512140156p:plain

昔のCubemapの作り方もできますが今は推奨されていないみたいです

「こういうのもあるんだ〜」って見てもらうだけで結構です

 

ということで、 やっと6Sidedシェーダーでの作成方法に移っていきます

手順:

①画像を用意する

 最初ですが一番面倒なところです。Cubemapを6枚に切り取ってTextureで用意しなければいけません

しかし、Unityで自動生成してくれたCubemapはどこに格納されているのか、

また取り出せるのかすらわからないので画像はUnityの外側で用意しましょう

 

こんなサービスを見つけました↓

画像をCubemapに変換してくれたり、6枚に分割してくれます

ただ、私のpcでは6枚分割のモードは処理が重すぎたので、まずCubemapを作成して

地道に切り取りました

f:id:tubakihimeLoveHate:20190512150404p:plain

これで準備は完了です

 

②マテリアル作成

Create>Materialでマテリアルを作成し、Shaderを「skybox/6 Sided」に変更します

その後先ほどの6枚の画像をパズルみたいにはめていきます

f:id:tubakihimeLoveHate:20190512151259p:plain

というとこで完成です!

 

このskyboxを設定したのがこちら↓

f:id:tubakihimeLoveHate:20190512151910p:plain

画質はあまり変わりませんが、絵画がずれているのがわかりますか?

自分の手で切り取った場合、サイズが違ったらこのようなことが起こるのでなかなか難しいです・・・

あとは、画像が反転している場合もあるので直してインポートしましょう!

 

今回はここまで。ではまた

 

またはてなブログの発見として、中見出しと合わせて小見出しを設定して目次にすることで、ちゃんとずれて表示してくれるのを初めて知りました笑

最近は結構HTMLでも編集するので、ブログのことを書いた記事を出してみるのもいいかもしれない

以上余談でした

 

--------------------------------------------------------------------------------

※当ブログにおいてナンバリングはあまり関係ありません 

私とブログの成長記のようなものです