画面にメタボールとトレイルを配置して雨の効果を落とそうとしています。shadertoyに手掛かりが見つかりましたが、実装方法がわかりませんでした。
https://www.shadertoy.com/view/ltffzl
残念ながら、これには多くの数学計算があり、ラグを生成するため、単一で使用することはできません。明らかに、テクスチャを使用する必要がありますが、どのようにしてトレイル効果を持たせることができますか？
私のアイデアは、ドロップにテクスチャとトレイルレンダラーを使用することですが、メタボールエフェクトをどのように使用できますか？
この記事でメタボールを実装できました
https://github.com/smkplus/RainFX/tree/master
トレイルについてはまだ考えていません
回答:
その効果は、「水のある場所のマップを計算する」+「そのマップから法線ベクトルを生成し、それを使用して背景テクスチャのルックアップをオフセットする」と考える必要があると思います。
サンプルのシェーダートイの機能を分解すると、曇りが発生する場所を示す「トレイル」が計算されるだけです。
円形の雨滴の法線を計算し、
そして、その法線マップを使用して、テクスチャルックアップをオフセットし、偽の屈折を作成します。
トレイラーをシェーダーで後処理する場合は、代数を使用してシェーダーに「トレイル」シェイプを作成するだけです。たとえば、次の関数では、「ゆらぎの道」と頭と尾にテーパーを重ねて取得しています
float trailDrop(vec2 uv, vec2 id, float t) {
// wobbly path
float wobble = 0.5 + 0.5
* cos(120.0 * uv.y)
* sin(50.0 * uv.y);
float v = 1.0 - 10.0 * abs(uv.x - 0.5 + 0.2 * wobble);
// head
v *= clamp(30.0 * uv.y, 0.0, 1.0);
v *= clamp( uv.y + 7.0 * t - 0.6, 0.0, 1.0);
// tail
v *= clamp(1.0 - uv.y - pow(t, 2.0), 0.0, 1.0);
return clamp(v * 10.0, 0.0, 1.0);
}これがshadertoyの大まかなPOCです-https : //www.shadertoy.com/view/XlBfz1実証雨滴トレイルのセットを作成するには。微分解像度のため、小さな解像度では粗く見えますが、フルスクリーンにすると、見栄えがよくなります。
編集：雨滴を重ねた例を追加
読者への演習として残しました：
1）小さな丸い滴を加えます。インスピレーションについては、StaticDropsに、元のshadertoyの例の関数をてください。
2）高品質の通常の計算を追加します。として#define CHEAP_NORMALSオリジナルのシェーダートの例オプションが示すように、組み込みのdFdxは忠実度の低い近似であり、導関数を手動で計算することでより良い結果を得ることができます（関数を3回計算するコストがかかります）。
3）列間の間隔をランダム化します。列を広げ、uv.x - 0.5 + 0.2 * wobbleビットを変更して、x軸にランダムなオフセットを追加できます。また、元の例からもう一度ページを取り出して、サイズの異なるストリームのレイヤーをいくつか重ねて重ねると、外観が不均一になります。
次の手順に従って、この効果を作成できます。
RenderTextureを使用して結果を保存できます。これはshadertoyのマルチパスの例です：
https://www.shadertoy.com/view/ltccRl
iñigoquilez：Shadertoyは「バッファ」ごとに1つずつ、複数のパスを使用します。名前が示すように、このパスは結果をバッファに格納します。バッファは単なるテクスチャです。Unityを使用すると、テクスチャにもレンダリングできます。
パーティクルをRenderTextureにレンダリングするカメラを作成しました。
あなたはディストーションを適用するためのパスをつかむことができます
私はそれをこの投稿で説明しました：
Quantum Breakのディストーションパーティクルエフェクトを再現するにはどうすればよいですか？
ライフタイム全体でカラーにアルファを使用することにより、単純なぼかしができます
より良い結果を得るには、単純なぼかしを使用する方が良いですが、どのようにぼかしを実現するのでしょうか？
畳み込み行列
画像処理では、カーネル、畳み込み行列、またはマスクは小さな行列です。ぼかし、シャープ、エンボス、エッジ検出などに使用されます。これは、カーネルとイメージの間でたたみ込みを行うことによって実現されます。
Shader "Smkgames/Convolution"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
[Enum(kerEdgeDetectionA,1,kerEdgeDetectionB,2,kerEdgeDetectionC,3,kerSharpen,4,kerBoxBlur,5)]
_Kernel("Kernel", Float) = 1
}
SubShader
{
// No culling or depth
Cull Off ZWrite Off ZTest Always
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
sampler2D _MainTex;
float4 _MainTex_TexelSize;
float3x3 GetData(int channel, sampler2D tex, float2 uv, float4 size)
{
float3x3 mat;
for (int y=-1; y<2; y++)
{
for(int x=-1; x<2; x++)
{
mat[x+1][y+1]=tex2D(tex, uv + float2(x*size.x, y*size.y))[channel];
}
}
return mat;
}
float3x3 GetMean(float3x3 matr, float3x3 matg, float3x3 matb)
{
float3x3 mat;
for (int y=0; y<3; y++)
{
for(int x=0; x<3; x++)
{
mat[x][y] = (matr[x][y] + matg[x][y] + matb[x][y]) / 3.0;
}
}
return mat;
}
float Convolve(float3x3 kernel, float3x3 pixels, float denom, float offset)
{
float res = 0.0;
for (int y=0; y<3; y++)
{
for(int x=0; x<3; x++)
{
res += kernel[2-x][2-y]*pixels[x][y];
}
}
return res;
}
float _Kernel;
fixed4 frag (v2f i) : SV_Target
{
float3x3 kerEdgeDetectionA = float3x3 ( 0.0, 0, -1.0,
1.0, 0, -1.0,
0.0, 1.0, 0.0);
float3x3 kerEdgeDetectionB = float3x3 (0.0, 1.0, 0.0,
1.0, -4.0, 1.0,
0.0, 1.0, 0.0);
float3x3 kerEdgeDetectionC = float3x3 (-1.0, -1.0, -1.0,
-1.0, 8.0, -1.0,
-1.0, -1.0, -1.0);
float3x3 kerSharpen = float3x3 (0.0, -1.0, 0.0,
-1.0, 5.0, -1.0,
0.0, -1.0, 0.0);
float3x3 kerBoxBlur = (1.0/9.0)*float3x3 ( 1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0);
float3x3 kernelSelection;
if(_Kernel == 1){
kernelSelection = kerEdgeDetectionA;
}else if(_Kernel == 2){
kernelSelection = kerEdgeDetectionB;
}else if(_Kernel == 3){
kernelSelection = kerEdgeDetectionC;
}else if(_Kernel == 4){
kernelSelection = kerSharpen;
}else if(_Kernel == 5){
kernelSelection = kerBoxBlur;
}
float3x3 matr = GetData(0, _MainTex, i.uv, _MainTex_TexelSize);
float3x3 matg = GetData(1, _MainTex, i.uv, _MainTex_TexelSize);
float3x3 matb = GetData(2, _MainTex, i.uv, _MainTex_TexelSize);
float3x3 mata = GetMean(matr, matg, matb);
// kernel
float4 gl_FragColor = float4(Convolve(kernelSelection,matr,1.0,0.0),
Convolve(kernelSelection,matg,1.0,0.0),
Convolve(kernelSelection,matb,1.0,0.0),
1.0);
return gl_FragColor;
}
ENDCG
}
}
}ボックスブラー
ボックスブラー（ボックス線形フィルターとも呼ばれます）は空間ドメインの線形フィルターで、結果の画像の各ピクセルの値は、入力画像の隣接ピクセルの平均値と同じです。これは、ローパス（「ぼかし」）フィルターの一種です。3 x 3ボックスのぼかしは、行列として記述できます
Shader "Smkgames/Simple Box Blur"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
}
SubShader
{
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
sampler2D _MainTex;
float4 _MainTex_TexelSize;
float4 box(sampler2D tex, float2 uv, float4 size)
{
float4 c = tex2D(tex, uv + float2(-size.x, size.y)) + tex2D(tex, uv + float2(0, size.y)) + tex2D(tex, uv + float2(size.x, size.y)) +
tex2D(tex, uv + float2(-size.x, 0)) + tex2D(tex, uv + float2(0, 0)) + tex2D(tex, uv + float2(size.x, 0)) +
tex2D(tex, uv + float2(-size.x, -size.y)) + tex2D(tex, uv + float2(0, -size.y)) + tex2D(tex, uv + float2(size.x, -size.y));
return c / 9;
}
float4 frag (v2f i) : SV_Target
{
float4 col = box(_MainTex, i.uv, _MainTex_TexelSize);
return col;
}
ENDCG
}
}
}
Rendertextureを使用して前のフレームを保存できるため、前のフレームを取得してぼかすことができます。これを繰り返すことでぼかしを実現します。
float4 distortion = tex2D(_MainTex,i.uv);
float3 distortionNormal = UnpackNormal(distortion);
最終シェーダー：
Shader "Smkgames/BrokenGlass3D"
{
Properties{
_MainTex("MainTex",2D) = "white"{}
_NormalIntensity("NormalIntensity",Float) = 1
_Alpha("Alpha",Float) = 1
}
SubShader
{
Tags {"Queue"="Transparent" "RenderType"="Transparent"}
Blend SrcAlpha OneMinusSrcAlpha
GrabPass
{
"_GrabTexture"
}
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
float2 grabPos : TEXCOORD1;
float3 normal :NORMAL;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 grabPos : TEXCOORD1;
half3 worldNormal :TEXCOORD2;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float _Intensity,_Alpha;
v2f vert (appdata v)
{
v2f o;
o.uv = v.uv;
o.vertex = UnityObjectToClipPos(v.vertex);
o.grabPos = ComputeGrabScreenPos(o.vertex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
return o;
}
sampler2D _GrabTexture;
float _NormalIntensity;
fixed4 frag (v2f i) : SV_Target
{
float4 distortion = tex2D(_MainTex,i.uv);
float3 distortionNormal = UnpackNormal(distortion);
distortionNormal.xy *= _NormalIntensity;
normalize(distortionNormal);
fixed4 col = tex2Dproj(_GrabTexture, i.grabPos+float4(distortionNormal.rgb,0));
return col;
}
ENDCG
}
}
}生涯にわたってカラーでアルファを使用せずに：
生涯にわたってカラーでアルファを使用することにより：
ソースが利用可能です：
https://github.com/smkplus/RainDrop
また、あなたは波紋を作ることができます
役立つリンク
https://80.lv/articles/breakdown-animated-raindrop-material-in-ue4/
https://seblagarde.wordpress.com/2013/01/03/water-drop-2b-dynamic-rain-and-its-effects/
実際、この数年前に質問がありましたが、 Unityにはまったく関係ありません（残念ながら）。リンクされたプレゼンテーションのスライド57を見ると、グリッドベースのアプローチについて言及されています。
ありますやや関連あなたは面白いかもしれないと物理SEの質問が。リンクされた質問のdroplet.pdfへのリンクは壊れていますが、それはまだウェイバックマシン上にあります。それは、いくつかのタイプの表面から流れ落ちる水の数学のいくつかに入ります。液滴は、たとえば以前の雨滴で以前に使用されていた経路を移動することを好みます（p926を参照）。
おそらく、それぞれの「雨滴」の頭と尾をモデル化し、少しずつジグザグにすることができます。2つの細長い雨滴が衝突したとき、それらを組み合わせて、より大きくて動きの速い雨滴にすることができると思います。水の量は変わりません。それは、重力、ガラスへの付着力、および粘着力によって動かされ、形作られているだけです。