This explanation is currently available in Japanese.
ひとことで
表面の各点にノイズの値を割り当て、しきい値より小さい部分を描かない(切り抜く)ことで、物体が燃え尽きる・崩れる・溶けるように消えていく表現です。しきい値をアニメーションさせるだけで、消滅も出現(逆再生)も作れます。しきい値のすぐ上の細い帯を発光させると、燃える縁ができます。
ゲームでの使いどころ
- 敵の消滅:倒した敵が光の粒や灰になって消える。死体を片付ける演出としても定番です。
- 出現・転送:召喚されたキャラクターやアイテムが、下から組み上がるように現れる。
- 燃焼・腐食:紙が燃える、布が焦げる、金属が酸で溶ける。
- ステルス・変身:姿が徐々に透けていく、別の姿へ変わる境界の演出。
しくみ
フラグメントシェーダーで、各画素のノイズ値 (0〜1)としきい値 を比べます。
を 0 から 1 へ動かすと、ノイズ値の小さい場所から順に穴が開き、最後に全体が消えます。縁の幅 の帯には発光色を足し、ブルームで光をにじませると、燃えて崩れる縁になります。
消え方の「方向」を付けたいときは、ノイズに位置の成分を混ぜます。
デモの「下から上へ」はこの形で、足元から燃え上がるように消えます。中心から外へ、特定の点(被弾した場所)から広がる、なども同じ考え方で作れます。
実装のポイント
- ノイズの分布を広げる:fBm の出力は 0.5 付近に集中しがちです。そのまま使うと、しきい値の少しの変化でほぼ全体が一気に消えます。値の範囲を 0〜1 に広げておくと、しきい値に比例して均等に消えていきます(デモの開発でも最初はここでつまずきました)。
- オブジェクト空間の座標を使う:ワールド座標でノイズを作ると、動いているキャラクターの上を穴が流れてしまいます。
- 影も切り抜く:影の描画(深度パス)にも同じ discard を入れないと、消えたはずの部分の影が残ります。
- 粒子と組み合わせる:縁の位置から火の粉や灰の粒子を出すと、完成度が一段上がります(サーフェス放出)。
つまずきやすい点
- discard のコスト:discard を使うと、GPU の早期深度テスト(Early-Z)が効かなくなる場合があります。常時ではなく、消える演出の間だけ専用のマテリアルに切り替えるのが一般的です。
- 縁のちらつき:縁の帯が細すぎると、遠くから見たときに途切れたりちらついたりします。距離に応じて幅を調整します。
- 半透明との組み合わせ:透明度で消すのではなく切り抜くので、並べ替えの問題は起きませんが、縁は硬くなります。柔らかくしたい場合はディザ(網点)での切り抜きを使います。
デモで試すこと
- 「自動で進める」をオフにして「しきい値」を少しずつ上げると、ノイズの低い場所から穴が広がっていく様子が観察できます。
- 「消え方」を下から上へにすると、足元から燃え上がるように消えます。
- 「燃える縁の幅」を 0 にすると、ただ穴が開くだけの味気ない表現になります。縁の発光がこの演出の要であることが分かります。