Alpha Test を綺麗に見せる方法
画作り
VRで植物を作る際、シェーダーは Alpha Test にする事がセオリーですが、
どうしてもエッジのジャギーが気になります。
(山の木々ビルボードを大量に並べた)
TXAA や FXAA など、ポストプロセスによるアンチエイリアスを入れれば軽減できますが、
一体型HMDコンテンツの場合、弊社では MSAA しか使わない決まりにしています。
MSAA はジオメトリのエッジには効くものの、テクスチャの描画部分には効かないので、
Alpha Test のエッジがどうしてもギザギザして周りから浮いてしまうのです。
Alpha Test ではなく Transparent を使用する
Transparent で解決できる場合もあるので、例を見ていきましょう。
Transparent の問題点
Transparent は前後関係を正しく描画できない、という問題点があります。
以下の画像は、冒頭の木々のシェーダーを Alpha Test から Transparent に変更した例です。
”アルファのエッジはキレイ”なのですが、前後関係が滅茶苦茶ですね。
これを無理やり正すには、ビルボードごとにマテリアルを分けて、
各マテリアル毎に Render Queue を一つずつずらして設定する、
という馬鹿げたことをしなければならないので、当然実用的な策ではありません。
使用できるケース
ただし、対象が10個程度で、複雑な前後の絡みが無い場合は、この手法で良いと思います。
少しの手間で美が手に入ります。
Alpha to Coverage を使用する
Transparent では解決できないレベルで大量 & 複雑なケースは、
Alpha to Coverage という機能をおススメします。
※ MSAA 必須なので注意してください。
手描きシェーダー
ごく標準的な Alpha Test シェーダーの記述に加え、AlphaToMask On と書くだけです。(16行目)
Amplify Shader Editor
弊社ではデザイナー向けビルトインパイプラインシェーダ作成ツールとして、
Amplify Shader Editor を使用しています。
こちらのツールを使用している方もきっと多いと思うので、以下に手順を示します。
① Blend Mode を Custom にして、Masked 相当の設定にする。
② Alpha To Coverage を True にする。
③ アルファソースを Opacity Mask ではなく、Opacity に繋げる。
結果
冒頭画像のような切り抜き部分のジャギーが消えました。
VRで見てもなかなかにキレイなので、一度お試しください。
こちらに、Alpha to Coverage に関する素晴らしい記事があるので、ぜひ読んでみてください。
[…] Alpha Test を綺麗に見せる方法 | Tsumiki Tech Times […]