ファンタジー背景グラフィック制作事例【UE4 Environment Art Dive 2019】

UE4 Environment ArtDive 「ファンタジー背景グラフィック制作事例」

自己紹介 橋本 竜 プラチナゲームズ株式会社 背景アーティスト 普通の背景業務から、表現の検証など色々やってます。

本講演の概要 個人制作として作った背景をベースに 表現的な工夫や、制作中のちょっとした検証、絵作りの際に考えたこと などを簡単に解説させていただきます。

おことわり ・講演内容に関しては、完全に個人の趣味として作ったものになります。 ・制作時のバージョンは4.20を使用しています。 ・描画負荷に関しては 「作業中に重くなるのも嫌だし、適当にLODとかカリングだけ入れとくか...」 くらいの温度感です。

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

ざっくり構造解説 ・地面はランドスケープで作成 ベースのheightmapは Worldmachineで作成 UE4上でスカルプトして 調整しています

ざっくり構造解説 ・アセットはスカルプトして Substance Painterで テクスチャ作成 Smart Materialで効率化

ざっくり構造解説 ・岩山はアセットの組み合わせ

ざっくり構造解説 ・天球はフリーのHDRIを使用 http://noemotionhdrs.net/hdrevening.html

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

広い平面をサクッと良い感じにしたい... ・屋外の広いエリアを作る際に要素として一番大きいのは地面 ・アセットの種類を一杯作るのはしんどい ・広い平面の雰囲気を一気に調整できるようにしたい ⇒草のシェーダーでなんか試してみよう

シェーダー効果オフ

シェーダー効果オン

解説

草のバリエーション作成 ・モデルについて 草のモデルの法線は半球から転写

草のバリエーション作成 ・色ムラ具合のリファレンス

手っ取り早くランダムカラーを入れてみる ⇒ SpeedTreeColorVariation

草のアセットを配置しただけの状態

Speed Tree Color Variation を追加

ん~...

草のバリエーション作成 ・色ムラは出るが、全体的に均質に入る →色ムラの出し方をコントロールしたい ・なんか不自然な色が混ざる →発生する色をコントロールしたい シェーダーの方針 ⇒色ムラはマスクで 色味はグラデーションマップでコントロールする

草のバリエーション作成 ・グラデーションマップとは グレースケールのどの階調にどんな色を割り当てるかを指定するマップ

草のバリエーション作成 GradientMap_Multi という マテリアルファンクションがあるので こちらを使っていきます

草のバリエーション作成 グラデーションマップ用のテクスチャを用意します ・横のピクセル数が色数 ・縦のピクセル数がパターンの数になります 今回は128×10ピクセルで作成しました（10パターン） 一列で1パターン

草のバリエーション作成 色ムラ用のマスクテクスチャを用意します これで色ムラの分布を制御します 最終的に良い感じならどんな模様でもOKです

草のバリエーション作成 これらの組み合わせで生成した色の分布を 上から投影して色ムラを作るイメージです

Base Color TEX Specular調整 Normal強さ調整 風揺れ処理 SSS Lerpのマスク グラデーションマップでのカラーバリエーション Speed Tree Color Variation 色味調整

Base Color TEX Specular調整 Normal強さ調整 風揺れ処理 SSS Lerpのマスク グラデーションマップでのカラーバリエーション Speed Tree Color Variation 色味調整

パターンの切り替え マスクの値をオフセット 全体の色味調整 Landscapeのサイズに合わせて投影 マスクテクスチャ 何パターン使うかを指定 グラデーションマップテクスチャ

パターンの切り替え マスクの値をオフセット ParameterCollectionで 複数アセットの値を一括調整 全体の色味調整

パターンの切り替え マスクの値をオフセット アセットごとに個別で調整したい場合は スイッチで切り替えできる

草のバリエーション作成 堆積マップ的なやつ

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

アセットの馴染ませ検証 配置したアセットを地面と馴染ませる手法について 製作中にいくつか試してみたものを簡単に解説します ・DistanceField / Precomputed AO Mask を使用したマテリアルブレンド ・Dither + Pixel Depth Offset を使用した擬似半透明ブレンド

アセットの馴染ませ検証 ・DistanceField / PrecomputedAO を使用したマテリアルブレンド

アセットの馴染ませ検証 ・下準備 Distance Fieldを有効にする https://docs.unrealengine.com/ja/Engine/Rendering/LightingAndShadows/MeshDistanceFields/index.html Precomputed AO Maskを使用する（ページの一番下） https://docs.unrealengine.com/ja/Engine/Rendering/Materials/ExpressionReference/Constant/index.html

アセットの馴染ませ検証 ・下準備 Distance Fieldを使用するメッシュは DetailsのAffect Distance Field Lightingの チェックをはずす

アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成 DistanceField Precomputed AO mask

DistanceFieldでのマスク生成 アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

DistanceToNearestSurfaceで取得した値を元にマスク生成 コントラスト調整 ブレンド境界にノイズを追加 アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

Precomputed AO Mask アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

Distance Field Distance Field と Precomputed AO どちらをマスクとして使うか スイッチで切り替え Precomputed AO アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

草のマテリアル 岩のマテリアル マスク マテリアルブレンド アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

アセットの馴染ませ検証 ・ブレンド結果

アセットの馴染ませ検証 ・ブレンド結果 色味は馴染んでいるが シェーディングが馴染んでいない

アセットの馴染ませ検証 ・ブレンド結果 色味は馴染んでいるが シェーディングが馴染んでいない Base Color

アセットの馴染ませ検証 ・ブレンド結果 色味は馴染んでいるが シェーディングが馴染んでいない Detail Lighting

アセットの馴染ませ検証 ・ブレンド結果 色味は馴染んでいるが シェーディングが馴染んでいない Normal

アセットの馴染ませ検証 ・ブレンド結果 色味は馴染んでいるが シェーディングが馴染んでいない ⇒ブレンド部分の法線を調整する Normal

アセットの馴染ませ検証 ・地形の法線をどう取得するか... 今回は LandscapeのNormalテクスチャを用意し アセット側のマテリアルで参照することに

アセットの馴染ませ検証 ・LandscapeのNormalテクスチャ作成 Heightmapをエクスポートして

アセットの馴染ませ検証 ・LandscapeのNormalテクスチャ作成 Heightmapをエクスポートして Substance DesignerでNormalを作成

アセットの馴染ませ検証 ・LandscapeのNormalテクスチャ作成 ・Height to Normal World Unitsノードの場合 Surface Size = 512 Height Depth = 512 ・Normal ノードの場合 intensity = 256 Substance Designer UE4

Landscapeのノーマル World SpaceからTangent Spaceに変換 Landscapeのワールド座標に合わせて投影 Normalの強さ調整 アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

アセットの法線 Distance Field のマスク 法線のブレンド率調整（デバッグ） アセットの法線と地面の法線をブレンド 地面の法線 アセットの馴染ませ検証 ・岩のマテリアルに地面の草のマテリアルをブレンドするためのマスクを生成します

アセットの馴染ませ検証 ・法線ブレンドの結果

アセットの馴染ませ検証 ・法線ブレンドの結果

アセットの馴染ませ検証 ・馴染みました

アセットの馴染ませ検証 ・馴染みました

アセットの馴染ませ検証 ・欠点 1. 地面側のマテリアルが複数になると 対応できない... 2. Landscapeの形状を変更するたびに Normalのテクスチャを更新する必要がある

アセットの馴染ませ検証 ・Dither + Pixel Depth Offset を使用した擬似半透明ブレンド

アセットの馴染ませ検証 ・Pixel Depth Offset Dither TemporalAAに オフセット値を掛けて Pixel Depth Offsetに繋ぐだけ。

アセットの馴染ませ検証 ・Pixel Depth Offset オフセット値を大きくしていくと…

アセットの馴染ませ検証 ・Pixel Depth Offset なんか暗くなる…

アセットの馴染ませ検証 ・Pixel Depth Offset 自分の影が透けて暗く見えている

アセットの馴染ませ検証 ・Pixel Depth Offset Cast Shadowをオフにすると解消

アセットの馴染ませ検証 ・Pixel Depth Offset 地面のマテリアルに左右されない

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

その他シェーダー小ネタ ・岩のシェーダー小ネタ

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 岩に関しては結構大きめの物が多いので ディテールを補完する処理を入れています

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 ユニークのテクスチャ

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 ユニークのテクスチャ + ディテールノーマル追加

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 ユニークのテクスチャ + ディテールノーマル追加 + ディテールノーマルの溝に色

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 ユニークのテクスチャ + ディテールノーマル追加 + ディテールノーマルの溝に色

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 ユニークのテクスチャ + ディテールノーマル追加 + ディテールノーマルの溝に色

その他シェーダー小ネタ ・岩のシェーダー小ネタ その1 Detail Tiling オブジェクトのスケールに応じて タイリング数に補正がかかる

その他シェーダー小ネタ ・岩のシェーダー小ネタ その2 Random Tint Object Positionから0~1の乱数を生成し マスクとして使用する

アジェンダ ・作品について ・草のバリエーション作成 ・アセットの馴染ませ検証 ・その他シェーダー小ネタ ・画作りの話 ・Q&A

構図の方針

構図の方針 手前から奥にかけてこんな感じの流れを意識して構成しています

構図の方針 地形の大きな流れをこんな感じで意識しながらレイアウトしています

ライティングの方針 高地の澄んだ感じが出したいので、あまりフォグで空気感を曇らせないように構成していく

ライティングの方針 空気遠近だけに頼らなくても、明暗の対比があると手前と奥が認識できる

ライティングの方針 対比の弱い部分は、背景にフォグシートを敷いてやると手前と奥の切り分けができる

平行光源が全域に当たっている状態

開けた地形に影を落とす要素として、雲の嘘影を利用 明るい領域、暗い領域が大きな塊としてグルーピングできるので画面がまとまりやすい

明暗対比の弱い場所や、前後の切り分けを強調したい場所などにフォグシートを配置

明暗対比の弱い場所や、前後の切り分けを強調したい場所などにフォグシートを配置

明暗対比の弱い場所や、前後の切り分けを強調したい場所などにフォグシートを配置

明暗対比の弱い場所や、前後の切り分けを強調したい場所などにフォグシートを配置

Q&A

参考資料 ・80lv https://80.lv/articles/creating-realistic-virtual-landscapes/ ・Polycount https://polycount.com/discussion/181140/unreal-4-terrain-blending-tool-inspired-by-star-wars-battlefront https://polycount.com/discussion/183365/tips-tutorials-tricks-ue4-alirezas-art-blog#latest ・その他、KiteDemoやUnreal Tournamentの色々なマップなど

素材 ・HDRI http://noemotionhdrs.net/hdrevening.html ・BGM https://www.bensound.com/

ご清聴ありがとうございました