Alpha Test を綺麗に見せる方法

画作り

VRで植物を作る際、シェーダーは Alpha Test にする事がセオリーですが、

どうしてもエッジのジャギーが気になります。

(山の木々ビルボードを大量に並べた)

Unity シェーダー アルファテスト Alpha to Coverage

Unity シェーダー アルファテスト Alpha to Coverage

 

TXAA や FXAA など、ポストプロセスによるアンチエイリアスを入れれば軽減できますが、

一体型HMDコンテンツの場合、弊社では MSAA しか使わない決まりにしています。

 

MSAA はジオメトリのエッジには効くものの、テクスチャの描画部分には効かないので、

Alpha Test のエッジがどうしてもギザギザして周りから浮いてしまうのです。

 

 

 Alpha Test ではなく Transparent を使用する

Transparent で解決できる場合もあるので、例を見ていきましょう。

 

 Transparent の問題点

Transparent は前後関係を正しく描画できない、という問題点があります。

以下の画像は、冒頭の木々のシェーダーを Alpha Test から Transparent に変更した例です。

Unity シェーダー アルファテスト Alpha to Coverage

 

”アルファのエッジはキレイ”なのですが、前後関係が滅茶苦茶ですね。

これを無理やり正すには、ビルボードごとにマテリアルを分けて、

各マテリアル毎に Render Queue を一つずつずらして設定する、

という馬鹿げたことをしなければならないので、当然実用的な策ではありません。

 

 使用できるケース

ただし、対象が10個程度で、複雑な前後の絡みが無い場合は、この手法で良いと思います。

少しの手間で美が手に入ります。

Unity シェーダー アルファテスト Alpha to Coverage

 

 

 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 に繋げる。

Unity シェーダー アルファテスト Alpha to Coverage

 

 

 結果

冒頭画像のような切り抜き部分のジャギーが消えました。

VRで見てもなかなかにキレイなので、一度お試しください。

Unity シェーダー アルファテスト Alpha to Coverage

 

 

こちらに、Alpha to Coverage に関する素晴らしい記事があるので、ぜひ読んでみてください。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)