ノイズを利用して、画面がゆらぐ表現の作り方を紹介します。

サンプルデータ

歪み表現のサンプルデータはGitHubにて公開中です
https://github.com/rngtm/ShaderGraphCookBookSample

Assets/_SampleData/ShaderSamples/12_DIstortionEffect

Universal RP 設定

Universal RP の設定(Universal Render Pipeline Asset)にて、
Opaque Texture を有効にしておきます。

Opaque Texture を有効にすることで、カメラの不透明オブジェクト(Opaque) の描画結果が _CameraOpaqueTexture に書き込まれるようになります。

カプセルの配置

歪みをかけたい領域にモデルを配置します。

これから作成するShaderGraphを利用して、モデルを置いた場所に歪み効果をかけます。

ShaderGraphの作成

ShaderGraphのSurfaceはTransparentに設定しておきます。

SurfaceをTransparentに設定することで、不透明(Opaque)オブジェクトの描画が完了した後に
今回のシェーダーが実行されるようになります。

手順1. スクリーン座標からノイズを作成

スクリーン座標にノイズテクスチャを加算し、SceneColorで色をサンプリングすることで、画面が歪みます。

SceneColorについて

不透明オブジェクトの描画結果は、テクスチャ　_CameraOpaqueTexture へ書き込まれます。

Scene Colorノードを利用すると、テクスチャ _CameraOpaqueTexture から画面の色を取得できるのですが、
座標にノイズを加えることによって歪んだような結果が得られます。

SceneColorから色を取得する際にノイズを混ぜる

手順2 : 境界部分をなじませる

今回の歪み表現ですが、歪みの境界部分が目立ちます。

フレネル効果を歪みの強度として利用することにより、モデルのフチの部分の歪みがゼロに近づき、なじませることができます。

ShaderGraph

Fresnel Effectノードを利用すると、モデルのフチの値が1.0に近づく(白くなる)ようなマスクを作ることができます。
One Minusノードで0-1反転させたものをマスクとして利用します。

手順1 のノイズと今回のマスクを乗算したものを、Subtractでスクリーン座標と合成し、
Scene Colorへ接続します。

以下のように歪みの境界部分がなじむようになりました。

補足 : 半透明オブジェクトに注意

今回の歪み表現を、半透明(Transparent)オブジェクトと一緒に使用する際は注意が必要です。

半透明オブジェクトは後ろに置けない

歪みオブジェクトの後ろに半透明オブジェクトがある場合、半透明オブジェクトが欠けます。

Transparentオブジェクトは、遠くにあるオブジェクトから手前に向かって順番に描画されていくため、このような結果になります。
(半透明オブジェクトの描画が歪みオブジェクトの描画によって上書きされてしまうのが理由です)

半透明オブジェクトは手前に置ける

以下のように、歪みオブジェクトの手前に半透明オブジェクトを配置することで、
オブジェクトが欠けるという不具合は回避できます。

歪みオブジェクトが描画された後に半透明オブジェクトが描画されるため、不具合が発生しません。

歪みオブジェクトのRenderQueueを下げる

歪みオブジェクトのRenderQueue(描画の順番)を下げると、半透明オブジェクトが欠けるという不具合は解消できます。
(ただし、半透明オブジェクトには歪みがかかりません)

---

おまけ : ノイズテクスチャの作成 (After Effects)

今回のノイズテクスチャは、After Effectsのフラクタルノイズを使用して作成しています。

平面レイヤーに、フラクタルノイズ (Fractal Noise)を適用するとノイズを作ることができます。

テクスチャのシームレス化

歪み部分で不自然な切れ目が見えてしまうことがあります。
この現象は、ノイズテクスチャがシームレス化されていない場合(両端がつながっていない場合)
に発生します。

これから紹介する方法でテクスチャをシームレス化した場合、継ぎ目が見えにくくなります。

シームレス化対応後

シームレス化の手順 (After Effects)

Offsetエフェクトの追加

ノイズのレイヤーの上に調整レイヤーを追加し、Offset(オフセット)エフェクトを使ってレイヤーを左にずらします。
テクスチャの両端はつながっていないので、切れて見えるような状態になります。

四角形マスク

四角形ツールを選択します。

マウスドラッグで四角形を引くと、四角形の内側にだけOffsetエフェクトがかかるようになります。

マスクの反転

調整レイヤーはデフォルトでは加算(Add)になっているので、これを減算(Subtract)へ変更します。

マスクが反転し、四角形マスクの外側にOffsetエフェクトがかかるようになります。

マスクをぼかす

最後に、調整レイヤーのぼかし(Feather)を増やして、マスクの境界をぼかします。

以上でノイズテクスチャのシームレス化(左右)は完了となります。

同様の手順でノイズテクスチャの上下もシームレス化すれば、不自然な途切れは見えなくなります。

おまけ: AEで作れるノイズテクスチャの紹介

AE(AfterEffects) のフラクタルノイズで作れるノイズテクスチャを紹介したいと思います。
フラクタルノイズのフラクタルタイプを変えた際のノイズを表にまとめてみました。

フラクタルタイプ	結果
Cloudy
Dynamic
Dynamic Progressive
Dynamic Twist
Max
Rocky
Small Bumps
Smeary
Strings
Swirly
Terrain
Threads
Turbulent Sharp
Turbulent Smooth

フラクタルタイプは以下の部分から設定できます。