執筆バージョン: Unreal Engine 5.1.0
|
こんにちは!
見た目が変わると雰囲気変わって面白いですよね。今回はシーンのディレクショナルライトを取得してトゥーンっぽい表現をしてみたいと思います。
1:マテリアルをUnLitに設定し適当に配色したモデル(今回はグレイマンにしてます)を用意します。
今の見た目はこんな感じです。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/304614f348aa758a2cfff82dfbef4055.png)
2:次にカスタムノードからディレクショナルライトを取得してみましょう。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/22f727df7141fd4293daa4fd9fe61d72.png)
Customノードを作成して…、
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/57d57c5a1c4c2b9d43ba6e0e7af48786.png)
3:左側のCodeに「return ResolvedView.DirectionalLightDirection;」と入力しましょう。
これをすることでシーン上のディレクショナルライトの正規化されたベクトルを取得することができます。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/57d57c5a1c4c2b9d43ba6e0e7af48786.png)
4:ディレクショナルライトの正規化されたベクトルとオブジェクトの法線との内積をとります。
ライトの当たった所が明るく、当たってない所が暗くなりました。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/e259fffee5667ee1377c4cb87165a91e.png)
5:キワがボヤっとしているので、クッキリさせてあげるとよさそうです。
そのためstepノードを使うことにしました。
Stepノード…Yに入った値より大きければ1小さければ0を返します。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/8c37e11c1cd3f2671ac21f595d9faca2.png)
これでクッキリしました。グレイマンもこんな見た目になっています。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/0169c0ff1912aa5b7e68bb78b2ab3353.png)
6:もう一段カゲを追加してみたいと思います。
先程と同様にStepノードを入れて調整できる形を作り、黒よりもう少し明るくするため+0.5しました。
+0.5したため1より大きくなっている可能性があるため、Saturateノードで出力値を0~1にしています。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/64f5b4b651b4a9d485d118e616a6e190.png)
さっきよりも薄い色ができました。
7:二つのカゲを合わせて2段階のカゲを作ります。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/ec98767a3d2822af481b64efa6688341.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/e6fa40349144f9335cd9f806f1d7b6ce.png)
二段階のカゲができました。Stepに入れる値(ここではsdw1:薄い色、sdw2:黒)をコントロールすればカゲの幅を調整することができます。
8:ここでノーマルマップがあるので、使ってみたいと思います。
Pixel Normal WSノードをNormalMapに繋ぎます。
ノーマルマップをシェーディングに使う場合、ワールドスペース法線にする必要があるため、Transformノードでタンジェントスペースからノーマルマップを変換する必要があります。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/f1a86a03e6b823deaecabf4042019ab3.png)
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/145565d3c4444ae83542bc860c456a59.png)
9:あとは元の色に8:でできたノードを乗算すれば完成です。
![](https://historia.co.jp/wp/wp-content/uploads/2023/04/67d6589da20da11015d24829dbcd3443.png)
こんな感じになりました!
他にも別のやり方でやってみたり、テクスチャをあわせてタッチが入るようにしてみたりすると面白いと思います!
色々遊んでみてください~!