以下の内容はhttps://www.karvan1230.com/entry/2022/08/23/205126より取得しました。


【Unity】壁に隠れた箇所をディザリング透過で表示する

診断結果

Twitterで「あなたの〇〇診断結果」的な結果をわざわざツイートする人の気持ちが分からない皆さんこんにちは。見も知らぬ人間の面白診断の結果なんて当人以外興味がないと思うんですが、世間から何かしらリアクションがもらえると思って呟いているんでしょうか?ちなみに私のアイドル化した時の担当カラーは"スカイ"だそうです。

 

壁の向こう

カメラ位置が定点的なゲームでは、プレイヤーの操作するキャラクターが壁などの周囲のオブジェクトに隠されて操作不能になってしまうことは避けたい事案です。

この為オブジェクトの配置には注意が必要ですが、どうしても避けられない場合はキャラクターが隠された箇所にそのシルエットを表示してプレイヤーが操作できるする対処が取られます。

このブログでもそうした時にシルエットを表示する方法について紹介しています。

www.karvan1230.com

 

ディザリング透過

一方でオブジェクトの半透明の表現手法としてディザ抜きと呼ばれる手法があります。

これはガラス窓などで使用されるMaterialのTransparency(透明度)を変更する透過法とは異なり、網目の細かい網戸越しに背景を見るような感じで、不透明で描画するピクセルを一定間隔とする(穴を空ける)ことで、半透明であるかのように見せかける手法です。

綺麗な半透明とはなりませんが、あくまで不透明描画なのでTransparencyを使った手法よりもパフォーマンスが稼げるというメリットがあります。

このディザ抜きシェーダに関する説明やシェーダーのソースは以下のリンクで紹介されています

light11.hatenadiary.com

knasa.hateblo.jp

 

隠れた箇所だけ透過させる

上のリンクでは壁全体、オブジェクト全体のディザリング透過が実装されていますが、できればキャラクターが隠れた箇所だけを半透明化させたい所です。

その為、今回はシルエットを表示した時と同じようにステンシルバッファを利用して不透明描画する箇所とディザ抜きをする箇所を分けることにしました。

 

シルエットを表示する手法では壁側のシェーダーがステンシルバッファにマスク値を設定し、キャラクター側のシェーダーがそれを参照してマスク値の箇所を黒く塗りつぶしていましたが、今回はその逆の手順となります。

最初にキャラクター側のシェーダーでステンシルバッファにマスク値「1」を設定します。

 

次に壁側の不透明描画する箇所ではステンシルバッファがマスク値(=1)となっていない箇所だけを描画します。

 

 

最後に壁側に対してステンシルバッファがマスク値(=1)となっている箇所だけをディザ抜きで描画するようにします。

 

 

同時に重ねるとこんな感じ

氷の壁の向こうのペンギンが透けて見えると思います。

 

動作例

実際にゲーム内で動作させた結果は以下の通り、GIF化したのでディザ抜きの箇所が不ぞろいに見えますが実際は上の図のように網目が均等に見えます。

 

今回の動作例では不透明描画するシェーダーとディザ抜きをするシェーダーをそれぞれ用意し、それをそれぞれ適用したオブジェクトを重ねて使っています。(つまり同じ個所にシェーダーの異なる障害物のオブジェトが二つある)

一つのシェーダーでPassを使えば同時に出来そうですが、ちょっとそれを作成する時間がありませんでした。

 




以上の内容はhttps://www.karvan1230.com/entry/2022/08/23/205126より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14