Unreal Engine (UE) Advent Calendar 2024 の一発目の記事です！
今年もこの季節がやってまいりましたね。おかずさんいつもありがとうございます！
さてさて今回の記事は、
表題の通りUnlit を有効活用しましょうという内容です。
ではいきましょう。
Unlitを使う目的
私は近年、HDモバイルゲームの背景制作に携わってきました。
モバイルではマップのどこを見てもかなり負荷がカツカツで、できる限りの処理負荷対策を行わねばなりません。
負荷対策の一環として、一番負荷の軽い『Unlit』という物が使えないか目星を付けますが、
のっぺりした絵になってしまい悪目立ちする結果に……。
そこでUnlitをカスタマイズして、見た目がDefault Litからかけ離れない見た目を担保しつつも、
負荷を抑える模索をしばらくしていました。
そんな表現方法を模索し続けた結果をここに残したいと思います。
☆記事の内容
- 主要どころではないアセットをUnlitに置き換えて負荷対策
- Unlitをカスタマイズして見栄えをある程度担保する
- NormalMapを併用してマスクを作成する (やや中辛)
Unlit とは
Unlitの基本説明。気になる方はここをクリック！
Unlit（非ライティング）はざっくり言うと、UEの中で一番処理負荷が軽いマテリアルの名称です。
様々な処理が省略されているため用途が限られますが、その分 描画負荷が軽い特徴があります。
UEでマテリアルを作成すると『Default Lit』というマテリアルがまず用意されます。
それを『Unlit』に変更する所から、このお話のスタートです。
使用できる出力はエミッシブカラーのみと、かなり攻めたマテリアルのようです。
この特徴からUnlitがよく使われるシーンとしては、
のっぺりしていても自然でエミッシブさえあればOKなもの――大抵は電球などのライト類で使用されます。
ブルームが入って輪郭がボヤけてしまえば形状ののっぺりさも隠せますから、軽いマテリアルで済ますのが効率的と言えます。
テクスチャも挿せるようです。
ではエミッシブカラーにテクスチャを繋いだ出力結果を、電球以外のアセットに出してみましょう。
このような感じで、陰影の無いのっぺりした物が描画されました。
ん～…通常使用するには厳しい感じです。Default Litと比較すると一目瞭然です。
単体で見ている分にはこれでも使い所がありそうな感じがしますが、
何個も重ねると、奥行きが全く感じられない見た目でかなり厳しそうです。
DefaultLitの質感を完璧でなくとも保持したままUnlitに変更することはできないでしょうか？
Unliをカスタマイズする！
のっぺりした見た目になっちゃうUnlitを使用するにあたり改良したい点を考えてみます。
兎にも角にものっぺりを解決したいところですね。
- 陰影が入るようにしたい
- ラフネス光沢が欲しい
この2点をUnlitに追加すれば、見た目の違和感を解消できそうな感じです。
1. 陰影を追加
上記サンプルを見ると既にいい感じです。Unlitでも陰影のついた見た目を表現することが可能です。
こちらの作成手順を解説します。
陰影を作る時に大事な点としては、"落ち影(Cast Shadow)と陰影の方向が同一である" ことです。
ここがチグハグになるとすごく違和感が出ますから、このルールを守りつつノードを組んでみます。
ババン！
この組み方で陰影を追加することができます。
影を追加するのが、終端ノードのMultiplyに繋がっている下半分のノード群です。
もう少し詳しく見てみましょう。
・陰影方向の取得
陰影を作るには影のマスクを作成するのが簡単そうです。
マスクを作るにあたっては先程も書いたように、
"落ち影(Cast Shadow)と陰影の方向が同一である" 点が大事です。
そのためには DirectionalLight の方向を取得して、
マスクがそれに沿って動くようにするのが早そうです。
これなら太陽が動く時間変化のあるマップでも対応できそうです。
DirectionalLight の方向を取得して一致させるためには、
『Sky Atmosphere Light Direction』のノードを使います。
そこに『VertexNormalWS』で各モデルとの内積(Dot)を取得することで陰影を表現できます。
これだけで陰影をつけることが出来ますが、これだとマスク境界が中心でピシッと入ってしまいます。
Multiplyしたらど真ん中を境にモデル半分が真っ黒になってしまいます
次に、この境界線をなじませましょう。
・陰影のなじませ方法
これを解消するために0.5をAdd(足すこと)で影の明るさを底上げしています。
その一個手前にあるパラメーター化しているMultiplyの0.5で影の境界のにじみを変更できるようにしています。
これを１にすると真ん中で真っ黒になります。境界の強さは配置場所によって変えたいこともあるでしょうから、私はここをパラメーター化することにしています。
なお、ノーマルマップがあるモデルならVertexColorをノーマルマップに変更することでより細かい陰影をつけることができます。
ただしその分重くなりますので、必要なモデル、不要なモデルはよく考えて使い分けるべきでしょう。
標準Unlitのモデルを複数並べただけのものと、
陰影付きUnlitで並べたものを見比べてみましょう。右側はどちらもDefault Litです。
- 上：テクスチャを繋いだだけのもの
- 下：陰影を追加したカスタムUnlit
奥行きがあり、既にいい感じです。
処理負荷の比較
気になる処理負荷です。せっかくUnlitにしたのですから、DefaultLitより軽くなってもらわないと困ります。
このテクはモバイルゲームでも威力を発揮するものですから、SM5とiOSの環境で比較してみましょう。
ええやん！
Unlitはやはり負荷対策に効果があるようです。
SM5だと落ちてはいますがそこまでの差はなさそうですが、特筆すべきはモバイルシェーダーです。
特にモバイル環境ではラフネスの負荷がかなり重いので、Unlitにすることで非マスク部分が黄緑色にまで落ちています。
なにより顕著なのが白い部分がないという点。
白色部分は処理負荷がMAXまで行っているので、目立つくらいあるなら修正するようエンジニアから言わることが多いです。
マスター前とかに修正が入ると大変なので、先に潰しておきましょう。
Maskedマテリアル＋ラフネスありは比較的すぐに白色に到達します。
次に、先程の複数配置の方で見るとより顕著です。
右側が遠景でずらーーーーっと配置されている所を想像すると、おそらくエンジニアはぶっ倒れます。
Unlitにしつつも陰影を追加することで、処理負荷を落としながらグラフィッククオリティをある程度維持することができます。
モバイルに限らず、こういう白くなった部分が目立つ場合はどんなハードであってもケアしてあげるべきです。
遠景負荷対策のもっと突っ込んだお話（ある程度の経験者向け）
このテクはPS5などの高スペックでも等しく必要な場面があります。
高スペックの場合、グラフィッククオリティの点からDefault Litで作らないといけないシチュエーションも多くあると思います。
その場合、森林ステージなどのアルファ抜き植物が大量にあるようなレベルを作っていると、
あっという間に遠方が真っ白になってしまうことが予測されます。
Maskedマテリアルで白色が目立つ場合は、
LOD2以降は陰影付きのUnlitに変更する等、プロジェクトで仕様を設けましょう。
クオリティ優先で近い部分はもう白色が多少出ることを許容しつつ、
遠景ではきちんと負荷を落としてあげればかなりの負荷対策が出来ます。
エンジニアへの「こいつらちゃんと対策やってんなぁ～」というアピールにもなります
UnlitでCastShadowが落ちないことが大きな欠点となる場合は、
Default LitにラフネスをカットするためのStatic Switch Parameterを追加してください。
ラフネスをカットすると共にマスクテクスチャ自体を無効化することでドローコールも減らします。
マテリアルインスタンス側でスイッチをTrueにした物を用意し、LODに適用します。
LODスロットを用意したせいでドローコールが増えてしまった分、
スイッチで使用テクスチャを間引いて少しでも相殺するイメージです。
距離によるラフネスカットもifやDistance等を使えばノード上で作れそうですが、
これだとマスクテクスチャは生き続けたままになる上、常にGPUに距離計算をさせ続けることになるのであまりオススメしません。
Static Switch Parameterは、昔からUEに馴染みのある人ほどトラウマがあって使いにくいですが、前やってた案件ではバリバリ使っていました。
エンジニアから問題が報告されたことは無かったので、もはや大丈夫なのでしょう
2. ラフネス反射を追加
次は、擬似的なラフネス反射を追加します。
先ほどの球体で使っていたテクスチャと同じものを立方体に割り当ててみました。
まず下記のGIFをご覧ください。
どちらかがUnlitで、もう片方がDefault Litです。
違いは分かりますか？
左がUnlitで、右がDefault Litです。
Unlitでもラフネスのシミュレートはここまで出来るようです。
あくまで疑似ラフネスなので多少変な部分も発生しますが、概ね問題なく使えます。
疑似ラフネスでやりたいことを考えてみます。
- DirectionalLightと同じ向きに反射光があること
- 反射色を変更できるようにする
- 実際のラフネスと同様、ツヤ感の範囲を変えられるようにする
これらは最低限欲しいですね。
ノードで構成すると下記のような感じです。
構成を一つずつ見ていきましょう。
・DirectionalLightと同じ向きに反射光があること
これは先程使った『Sky Atmosphere Light Direction』を再利用します。
ラフネスの場合、カメラに合わせてツヤが変化する必要があるので『Camera Vector』をAddします。
次に、その結果でノーマルマップとの内積（Dot)を計算します。
これでほぼ正しくラフネスのシミュレートを行うことができました。
・反射色を変更できるようにする
3floatをパラメーター化しておき、AddでDiffuseに色を加算します。
Diffuseそのまま出しと、ツヤが加算されたものをLerpで繋ぐ算段です。
反射色はDirectionalLightのカラーをgetすれば作業効率をあげられますが、
Unlitを使う目的は処理負荷対策です。
せっかく軽くしているので、何らかの情報を引っ張ってくるのは極力少なくしたい所です。
私だったらLightのカラーくらいは手入力でやっちゃうかな～という温度感です。
角度は流石に面倒すぎるので『Sky Atmosphere Light Direction』でgetしちゃいました。
ただ、時間変化のあるマップの場合は反射色もgetしてくるのが良さそうです。
・実際のラフネスと同様、ツヤ感の範囲を変えられるようにする
- Areaで境界線の絞りをパラメーター化
- Contrastでコントラストをパラメーター化
処理負荷の比較
またまた気になる処理負荷です。
先程の項目では、モバイル環境においてはラフネスがネックになる旨を説明しましたが、
疑似ラフネスであればどうでしょうか？
SM5は微妙な差ですがモバイル環境は見るからに軽そうです。
あくまで疑似ではありますが、上のgifくらいシュミレートできており、
この緑色が実現できるのであれば使い所が沢山ありそうです。
これでUnlitに追加したい項目はほぼ完成です。
この次の項目はオマケ的なお話となります。
NormalMapを併用してマスクを作成する (やや中辛)
ノーマルマップは一見、青っぽい色をしています。
色だけ見るとBチャンネルに秘密がありそうな気がしますが、実はBチャンネルの情報はUEでは破棄されています。
ノーマルマップは縦方向と横方向の陰影がRとGチャンネルに保存されており、その２チャンネルの情報を読み取れば180°の凹凸を実現できるため事足りるのです。
UEの場合、圧縮設定が自動的に『Normalmap (BC5)』に設定されます。
この『BC5』の時点でBchの破棄が決定付けられてしまいます。
じゃあBchには何が保存されているのか？
Bchには凹凸の深度情報が保存されています。
深度情報……！ ということはこれをHeightMap代わりに使えばドローコールの節約が出来そうな感じです！！！
ですが実装時にはBchが破棄されているため直接引っ張ってくることができなさそうです……。
Bchを直に持ってくることはできませんが、同様の結果を出力できるノードがあります。
『DeriveNormalZ』というノードを噛ましてComponentMaskでBのみ出力することで、
ノーマルマップのBchと同一結果を出力することができます。
ノードの入力値に『intXY』とある通り、RchとGchから生成することができます。
この出力結果を元に、MultiplyとContrastで色差を絞ってあげると凹凸に沿ったマスクを生成することができます。
HeightMapほど正確ではありませんが、海の白波が立つエリアを指定したり、意外と役立ちますので活用してみてください。
海のはるか遠方で立つ白波や、遠景の雪山の冠雪などはこれで十分いい感じになります。
今回の例ではカラーの上乗せとして使っていますが、
ラフネスの差を出すマスクとしての使い勝手もなかなか良い感じです！
ラフネスマップがない時、Diffuseを反転してラフネスとする手がよく使われますが、
ノーマルマップの高さから作ったラフネスはまた違った雰囲気に仕上がります。
ノイズが少なめで、ぼけ気味のグラデーションマスクが山～谷にかけて入ります。
頭頂部分のツヤを強化したい時や、AOとして使って谷底部分を暗くしたい時にも使える可能性を秘めています。
これはUnlitに限らず使用できるので、
HeightMapやマスクテクスチャのドローコールを捻出できない場合は試してみてください
ノーマルマップやマスクテクスチャのアルファチャンネルにHeightMapを入れておく案は非推奨です。
アルファ付きテクスチャはメモリを２倍占有します。
それなら別テクスチャを用意した方がRGBチャンネルの３つ使える分、有効的です。
アルファに入れるのはなしにしましょう。
ご存じの方がいらっしゃれば…
私は過去、Bchが破棄されることを存ぜず、
直にBchから引っ張ってきたものでマスクを生成していました。
UEマニュアルの説明では、BC5はBchが破棄されるとあるため、
仮にBchのままクックすれば、実機での結果はマスクなしになるはずです。
ところが、実際に実機に出してマスクが生きていることを確認しています
知った以後は、破棄がある前提で『DeriveNormalZ』を使用していますが、
もしこれが破棄されず実機で通るようであれば変換作業をスキップでき、
より軽量化が実現します。
私には、仕様が変わったのか、本来出しちゃいけないけどバグって通っているだけなのかまだ検証できていません。
もしこのあたりに明るい方がいらっしゃればお手数ですがコメントを残して頂けますと幸いです
最後に、
今回説明した項目を全て繋げたノードを載せておきます。
もしお力になれたようであればコメントやXで絡んでいただけるととっても嬉しいです！
お読みいただきありがとうございました。良いお年を
自己紹介
フリーランスでデザイナーをしています。
近年はHDゲームとモバイルゲームどちらも経験しており、
リッチな表現とカツカツスペックでの表現どちらもやってます～
ホームページ：
https://westernborn.my.canva.site/
X（Twitter）：
https://x.com/BonChan_3DCG