春日部つむぎ no ゲーム作ってみよう!【UE5/UE4】 - セルルックライティング【UE5/UE4】

https://youtu.be/VfM_BjdJFRA?si=63IZqGVhrl-195dE

3DCG映像におけるライティングのメリットは

リアルな表現:
ライティングによって、CG映像にリアルな光の表現を与えることができます。
これにより、CG映像がより自然な印象を与えるようになります。
感情表現:
ライティングによって、CG映像に感情表現を与えることができます。
例えば、暗いライティングで不気味な雰囲気を演出することができます。
物体の質感表現:
ライティングによって、CG映像に物体の質感表現を与えることができます。
例えば、金属の光沢感を表現することができます。
映像の奥行き表現:
ライティングによって、CG映像に奥行き表現を与えることができます。
例えば、影を使って立体感を表現することができます。
映像の美しさ:
ライティングによって、CG映像に美しさを与えることができます。
例えば、色調を調整することで映像に統一感を与えることができます。

1.Detailed Lighting(詳細ライティング)00:27

[Lit(ライティングあり)]>[Detailed Lighting(詳細ライティング)]で、
ビューモードを詳細ライティングにします。

マテリアルから引き出した法線データでのライティングのみがレンダリングされる。
ベースカラーが暗すぎたり、乱雑でライティングが不明瞭になっている場合の分離に有効。

2.輝度ベースのマスクを作成00:48

ライティングの輝度ベースでマスクを作成します。

2-1.ポストプロセスマテリアルの作成00:53

右クリック>「Material(マテリアル)」で新しいマテリアルを作成します。
名前を「PPMM_GraphicLights」にします。

[Material Domain] : [Post Process]
[Blendable Location] : [Before Translucency(透過処理前)]

Scene Textureノードを配置します。
[Scene Texture ID] : [PostProcessInput0]

Scene Textureノードを配置します。
[Scene Texture ID] : [Base Color]

両方、赤チャンネルだけをマスクするようにします。

ComponentMaskノードを配置します。
緑ベクターをオフにして、赤チャンネルだけにします。

Scene TextureノードのPostProcessInput0につなぎます。

Scene TextureノードのBaseColorにも同様に赤チャンネルだけにします。

Divide(除算)ノードで、
PostProcessInput0をBace Colorで除算します。

Clampノードにつなぎます。

エミッシブカラーピンにつなぎます。

保存します。

2-2.ポストプロセスマテリアルの適用02:04

新しく作成したポストプロセスマテリアルを追加します。

ポストプロセスボリュームを選択。
レンダリング機能>ポストプロセスマテリアル>Array
「+」で追加します。
メニューでマテリアルリファレンスを選択します。
「PPMM_GraphicLights」マテリアルを追加します。

ビューモードを[Lit(ライティングあり)]に戻します。

ビューポートを見ると明暗領域がグレースケールで表示されています。

3.セルルックライティング02:34

輝度ベースのマスクを調整して、セルルックライティングにします。

3-1.Light_Falloff02:40

光が当たって影ができる場所を調整するパラメータを作成します。

「PPMM_GraphicLights」マテリアルを開きます。

IFノードを配置します。

Ifノードは、[A]ピンと[B]ピンを比較します。
[A]が[B]よりも大きい場合
[A]と[B]が同じ場合、
[A]が[B]よりも小さい場合の比較結果に基づいて値を返します。

ライト用輝度ベースマスクを[A]ピンにつなぎます。

[B]ピンにはスカラーパラメータをつなぎます。

1キーを押しながらクリック
または、Sキーを押しながらクリックしてスカラーパラメータを配置します。

このパラメータの名前を[Light_Falloff]にします。
Default Valueを「0.3」にします。

Ifノードの[B]ピンにつなぎます。

このパラメータを使って
0〜1の範囲にある値を判断します。

[Light Falloff]ノードの詳細パネルで
[Slider Max]を「1.0」に設定します。

[A]が[B]より大きい場合と小さい場合で
BaseColorシーンテクスチャのカラーリングを変えます。

3-2.LightArea_Color03:45

Scene Textureノードを配置します。
[Scene Texture ID]を[Base Color]に設定します。
ComponentMaskノードをつなぎます。
赤緑青チャンネルを有効にします。

出力ピンを伸ばして、Mキーを押して、
Multiplyノードを配置します。

3キーを押しながらクリックして、3成分ベクターを作成します。
右クリックでパラメータに変換します。
名前を「LightArea_Color」にします。
RGBを「1.0」にして白色にします。

Multiplyノードの[B]ピンにつなぎます。

Ifノードの[A>B]ピンにつなぎます。

3-3.DarkArea_Color04:29


LightArea_Colorと同じようにDarkArea_Colorを作成します。

Scene Textureノードを配置します。
[Scene Texture ID]を[Base Color]に設定します。
ComponentMaskノードをつなぎます。
赤緑青チャンネルを有効にします。

出力ピンを伸ばして、Mキーを押して、
Multiplyノードを配置します。

3キーを押しながらクリックして、3成分ベクターを作成します。
右クリックでパラメータに変換します。
名前を「DarkArea_Color」にします。
RGBを「0.5」にして灰色にします。

Multiplyノードの[B]ピンにつなぎます。

DarkArea_Colorは、
Ifノードの[A<B]ピンにつなぎます。

Ifノードを[Emissive Color(エミッシブカラー)]ピンにつなぎます。

保存します。



ビューポートの表示が変わり、
光と影の領域がハッキリとしました。



Light_Falloffの値を増やしていくと
影の領域が広がります。
逆に小さくするとして
光の領域が広がります。



LightArea_Colorを選択して色を変えると光の領域に
選択した色が反映されます。


同じようにDarkArea_Colorを選択して色を変えると影の領域に
選択した色が反映されます。


光と影の色を個別に変更できます。

4.特定のアセットに適用06:14

キャラクターにだけ適用するようにします。
背景は、PBR(物理ベースレンダリング)ライティングにします。

4-1.ポストプロセスマテリアルの作成06:23

「PPMM_GraphicLights」を複製します。
名前を「PPMM_GraphicLights_CH」にします。

前回の動画でカスタム深度マスクを使って
BaseColorを抽出したので
それを利用します。

キャラクターを選択して
Render CustomDepth Passを有効にします。

前回の動画で作成した
「PPMM_BaseColor_CH」を開きます。

結果ノード以外をCtrl+Cでコピーします。



「PPMM_BaseColor_CH」を閉じます。

名前を「PPMM_GraphicLights_CH」開きます。

Ctrl+Vで貼り付けます。
ベースカラー:カスタム深度マスク

Scene Texture BaseColorノードが3か所あります。

すべてカスタム深度マスクで抽出したBaseColorに置き換えます。

保存します。

4-2.ポストプロセスマテリアルの適用07:40

ポストプロセスボリュームを選択。
レンダリング機能>ポストプロセスマテリアル>Array

まず、「PPMM_GraphicLights」を「0.0」にして無効にします。

「+」で追加します。
メニューでマテリアルリファレンスを選択します。
「PPMM_GraphicLights_CH」マテリアルを追加します。

ビューポートが変って
背景(環境)はPBR(物理ベースレンダリング)ライティングで、
キャラクターはセルルックライティングになりましたね。

4-3.背景が暗い場合08:12

背景が暗い場合があります。
ライティングって難しいですね。

その場合は、
LightAreaのカスタム深度マスク用ベースカラーで

Mキーを押しながらクリックしてMultiplyノードを配置します。
Scene Texture PostProcessInput0ノードを[A]ピンにつなぎます。

1キーを押しながらクリック、または、Sキーを押しながらクリックして、
スカラーパラメータを配置します。
名前を「Brightness(明るさ)」にします。
Multiplyノードの[B]ピンにつなぎます。

MultiplyノードをLerpノードの[A]ピンにつなぎます。

ざっくりまとめ!08:59



設定ファイル09:08