PaperSloth’s diary

主にゲーム開発関連についての記事を書きます。

UE4 昔ながらのSkydomeを使う

環境

UE4.20.3

SkydomeまたはSkyboxについて

ステージ全体を覆う球体を置いてそこにテクスチャを貼る昔ながらの天球表現方法です。
Unityみたいに画面を単色でクリアする方法はないのかと疑問に思っている人がいたので、その代替手段としての利用もできそうだなと思います。
f:id:PaperSloth:20181213141656p:plain

UE4にはBP_Sky_SphereというBlueprintがあり、天球の表現として大変優れていますが
今回のSkydomeのように局所的に空を表現したい場合や
極力テクスチャそのものの色味を表現したい場合等に今回の表現が使えると思います。
また、モバイルやVRなど負荷を抑えたい場合にも活用できるかもしれません。
f:id:PaperSloth:20181213153031p:plain

Skydomeを使う方法

Meshについて

 MeshはUE4内のアセットをそのまま流用してスケールだけ調整すれば良いでしょう。
 Engine/MapTemplates/Sky内にSM_SkySphereという球体のメッシュがあるのでこちらを使います。

Materialについて

 マテリアルもそのまま流用できるものがありますが、少し手を加えたいので今回は自作します。
 Unlitにして下記のようにCubeMapテクスチャに繋げば完成です。
 f:id:PaperSloth:20181213142304p:plain

ここまでで一旦LevelにMeshを配置してMaterialを割り当てると天球が表現できました。
f:id:PaperSloth:20181213142619p:plain

Materialについて(単色表現)

 冒頭に説明したようにUnityのように単色でクリアしたいというものの代替手段として天球で囲ってしまいましょう。
 因みにUnityのDefaultのSolidColorはR:49, G:77, B:121です。
 UE4のマテリアルで使用する値は0-255ではなく0-1ですので変換が必要です。
 LinearColorとColorの変換用のBlueprintなんかを作っておくとなにかの役に立つかもしれませんね。
 f:id:PaperSloth:20181213143631p:plain

 Colorを変換するとR:0.030713, G:0.074214, B:0.191202であることが分かりました。
 あとはこれをEmissiveColorに繋ぐだけです。
 f:id:PaperSloth:20181213144214p:plain

 しかし、あんまりUnityっぽくならないですね。
 f:id:PaperSloth:20181213144447p:plain

 これはUE4がデフォルトでポストエフェクトを色々かけているからですね。
 "ShowFlag.PostProcessing 0"でポストエフェクトを全て無効にします。
 AAも無効になるため、ジャギーも発生しますがデフォルトのUnityっぽい良い感じの絵になりました。
 f:id:PaperSloth:20181213145550p:plain

 脱線したので本題に戻ります。

Skydomeを回転させたい場合

 さて、このままでは天球を回転させても反映されません。
 そこでマテリアルにひと手間加えます。
 f:id:PaperSloth:20181213145112p:plain

 TransformVectorを追加し、WorldSpaceからLocalSpaceに変換しました。
 これでLevelに配置したメッシュを回転させた場合に見た目上も回転が反映されます。
 f:id:PaperSloth:20181213145351p:plain

CubeMapの変換

UE4では面白いことにCubeMapを2DTextureにしたり
2DTextureをCubeMapに変換してくれるようなMaterial Functionが提供されています。

注意点としてどちらもTextureの設定でNoMipMapsにしていないと意図しない線が表示されてしまいます。

CubeMap→2DTexture

UVToLongLatというMaterialFunctionを利用することでできます。
f:id:PaperSloth:20181213175724p:plain

f:id:PaperSloth:20181213175734p:plain

2DTexture→CubeMap

こちらはLongLatToUVというMaterialFunctionを利用することでできます。
f:id:PaperSloth:20181213175855p:plain

f:id:PaperSloth:20181213180208p:plain

ノイズ系のテクスチャを背景にしてみると面白そうですね。

その他

天球の設定をした後はSkyLightも設定することをオススメします。
天球によってはライティングの質がグッと良くなります。

ExponentialHeightFogも忘れてはいけません。
こちらもInscattering TextureからCubemapの設定ができるので設定しておくとより空気感のある絵になります。
f:id:PaperSloth:20181213152204p:plain

また、HDRテクスチャの圧縮方式ですがデフォルトではHDR(RGB, no sRGB)になっていますが
HDR Compressed(RGB, BC6H, DX11)に変更することで圧縮される場合もあるのでそちらも確認してみてください。

同じくテクスチャの設定ですがHDRテクスチャをインポートするとデフォルト解像度が
512 x 512 x 6になってしまいます。
なんだか思ったよりキレイにならないと感じたらチェックしてみてください。
Maximum Texture Sizeから変更でき、最大で2048 x 2048 x 6に変更できます。
ただし、元のTexture解像度が512や1024の場合は当然効果はありません。


天球を活用してよりリッチな絵作りを目指していきましょう!