ポケモソの近づくと透明になるシェーダーを再現してみた
明けましておめでとうございます！
……というわけでポケモンの近づくと透明になるシェーダーを再現してみました。
ちなみに元ネタ
ゲームボーイカラー以来のポケモンに「3Dだー！」「捕まえるだけでみんな経験値もらっていいんですか⁈」なんて思いながら遊んでたのですが、カメラに近づくと透明になる柱に気づきましてこれは作れそうじゃないかと思った次第です。
まずは分析
カメラが近づくと半透明になる代わりに、徐々に透明になるピクセルがあるパターンで消えています。透明になるピクセルは形状に関係なくスクリーンスペースで決められているっぽい。というのはわかったんですが、この透明にしていくパターンがわからない……ググってどうやらこれはBayerマトリックスと呼ばれるパターンのようです。
これは一体......？
ディザ抜きといわれる半透明に見せかけるための手法で、実際に半透明にするよりも処理負荷が軽いとのこと。ドットをわざと見せてるあたりポケモンでは処理負荷より演出の意味合いが強そう。
作ったコードはこんな感じ
名前をDitheringTransparentにしようと思ったら、どうやら英語ではScreenDoorっぽい
そしてマテリアルの設定
BayerTexのところにはBayerMatrixをもとにした4ⅹ4ピクセルのグレースケール画像を入れます。
画像はWikipediaさんより
この行列に255をかけてあげればおｋ
画像は
←これ(4x4なのでとても小さい)
ただこの時注意なのが、ImportSettingsでCompressionを"High Quality"にすること。
そうしないと、量子化されてしまうようでちょっと物足りなくなります。
←"Normal Quality"だと四色ぐらいになってしまう
それとこれは結果には関係ないですが、Filter Modeを"Point(no filter)"にしておくと見やすいです。
そうじゃないと拡大時にボケてしまってInspectorでみるときにちょっとわかりにくくなります。
後のパラメータは
BlockSize : この数で割った分のピクセルがBayerMatrix一枚分になる
Radius : 透明化を始める距離
BlockSizeは見やすいようにちょっと大きめにしてます。
おしまい
何とか今年初記事を書きました。(ほんとは去年書くつもりだった）
シェーダーをいじる機会が増えてて、ちょうどこれはいい勉強になりそうだったのでやってみた次第です。
カメラに近づくと透明になるシェーダーってなんて名前なんですかね？
「カメラに近づくと透明になるシェーダー」なんですかね？
と、こんなところでガラルに帰ろうかと思います。
まだバッジ集め終わってないんですよ……
参考サイト様
