【Unity】テクスチャをグレースケールからカラーへ素敵にトランジションさせるShader
実行結果
世界に色を取り戻しました。Shaderは世界を救う…
しくみ
「カラー画像からグレースケール画像を作って、ルール画像で2つの画像間のトランジションパターンを決める。」って感じです。
ルール画像とは以下のような規則性があるっぽいグレースケール画像のことです。
このルール画像をうまいこと使えば、素敵なトランジションを行うことができます。
コード
【Unity】テクスチャトランジション（グレイスケールからカラー。もしくはその逆）【Shader】
上記Shaderコードでは大体以下の①〜③の手順を踏んでます。
① 入力テクスチャのオリジナルカラー値（col）からグレースケール値（gray）を生成
② 変数_Thresholdとルール画像のピクセル値（pg）を比較。比較結果から0か1を取得。
③ オリジナルカラー値（col）とグレースケール値（gray）をlerpで補間、出力。補間値は②で取得した値。
問題点
ルール画像によっては下図のような残りカスみたいなのができます。
ルール画像のピクセル値（pg）がちょうど0か1となってしまう場合、_Threshold（0〜1）をどんなにいじっても、0より小さくならないし、1より大きくもなりません。つまり、step(pg, _Threshold) の値が変動しなくなってしまいます。step(pg, _Threshold) が変動しないので、最終的に出力するピクセル値も変動しません。
これが原因で変化しないピクセル、残りカスができてしまうみたいです。
今回は解決のためにpgを0.01~0.99の範囲にclampしてます。
Thresholdの範囲を広げるのもありだと思います。
おまけ
グレースケール画像に関してもう少し詳しく知りたい場合は以下の記事を。
以下のサイトで素敵なルール画像をたくさんゲットできます。
