1作目進捗(7) + シェーダの調整

概要

泡盛もろみです。

今回は
・シェーダの調整 (by泡盛)
・装備について (by泡盛)
について書きたいと思います。

シェーダの調整

シェーダに関する内容は前回支援者限定部分に記載していましたが、今回はこちらで解説します。
理由は
・先週時点でこんなに弄ることになるとは思わなかった
・技術的な話は進捗とは別に公開していきたい
というところからです。

前回ちょこっと言った「ゲーム画面にあわせた調整」をはるかに超える大改修が入ってしまいました。
シェーダについて右も左もわからない人間がシェーダを自作した過程を、二回に分けて掲載したいと思います。

1回目：
・Toon
・アウトライン
・法線マップ
・ハイライト
・影を落とす/受ける

2回目：
・影の単純化
・透過
・金属っぽさ

Toon

「Toon」とは。つまりアニメっぽい感じです。
左：Standardシェーダ
右：Toonシェーダ

明暗がハッキリクッキリとします。

これについてはこちらのサイトを参考に作成しました。
Rampテクスチャの色を白〜黒にして使用しています。
【Unityシェーダ入門】トゥーンシェーダを自作してみる

アウトライン

アウトラインは、絵でいうところの主線ですね。

こちらを参考に実装しました。
Unityでシェーダー描いてみたい

そこで色々探した結果、ポストプロセスという手法も検討することにしました。
ポストプロセスとは...なんかカメラ側で撮影した画像をあとから調整する？撮影後加工？そんな感じだと思ってます。

色々探してこちらを参考にさせていただくことに。
【Unity】セルシェーディングを１から作ってみるメモ その３ 脱Post-process【Shader】

これはいい感じなので、アウトラインはこれで決定。

ちなみにアウトライン色は単に黒ではなく、RGBをHSV変換して少し暗くした色にしています。
参考はこちらです。
【Unity】RGBをHSVに変換して明るさとかを変えるシェーダー

先週の進捗で触れた内容はここの実装の話まででした。
正直、シェーダの実装はここまででもいいんじゃないかと思ってました。

法線マップ

色々あって、法線マップを適用したくなりました。
法線マップとは...まっ平らな面に凸凹の情報を与えられる魔法のような仕組みです。
参考はこちらです。
Unity シェーダーチュートリアル ノーマルマップ

この何もない壁が、

法線マップ適用で突然それっぽくなります。

ハイライト

アニメっぽい表現になって、法線マップも適用できて、もういいかな？と思ったところで気がつきました。
ハイライトがない。
ここまで色々シェーダをいじりながら調べたのでだんだんわかってきています。
ハイライトを入れるなら、スペキュラーとグロスをいじればいいのでは。
ということで適用したのがこちら。

・・・なんか物足りない。(二度目)

光り方が自然すぎて、逆になんか変というか、アニメっぽくなくなってる気がします。
アニメっぽいハイライトってなんだ。
視点とは関係なく、なんかこう白くなるアレ。アレがほしい。
(注:R18的なアレを隠す魔法の光ではない)

ということで、ここはRampで対応することにしました。
(ここで壁の色が変わったのは、前回撮影まで色を適用するのを忘れていたからです。書きながら実装を巻き戻しつつ撮影していたので。あまり影響ないので気にしないでください)

うん、これくらいの方が好みです。いいかんじ。
ゴブリンの鼻の頭が光っているのが個人的にポイント高いです。

ちなみに実装方法はRampテクスチャをこうしておいて

影を落とす/受ける

ハイライトを入れた後に気づきました。
この人たち、影が落ちていないんです。

まずはなぜ影が落ちていないのかの調査から・・・も何も、Toonで参考にさせてもらったサイトではCustom Lighting Modelでatten(=attenuation, 減衰)を無視してました。
これを適用してあげれば、影が落ちました。

今回はここまで

先週の内容からだいぶシェーダに変更が加わりました。
冒頭でも述べました通り、次回もシェーダの実装について触れたいと思います。