Quantum Breakのディストーションパーティクルエフェクトを複製するにはどうすればよいですか？

68

Quantum Breakにはこの素晴らしいパーティクル効果があります。これは割れたガラスのような歪み効果です。この効果をどのように再現できるか知りたいですか？以下にそれを見ることができます、そして、完全なビデオはYouTubeで利用できます：

record_2018_02_05_16_34_26_307

record_2018_02_01_22_27_44_971

unity  shaders  graphic-effects 
— セイド・モルテザ・カマリ
ソース
4
「この質問は十分に注目されていません。」？
— ベイランクール
@AlexandreVaillancourt私はそれは私が私のreason.thanksを変更します問題がある場合useful.Iは恵みの理由で、より良い理由を見つけることができなかったと思うので、私はちょうどより多くのビューのためにこの質問をピンと注意を引く
— セイェドモルテザ・カマリ
2
バウンティの目的は、実際には質問を「固定」することだけではありません。あなたの述べた根拠はやや不誠実です。報奨金の目的は、回答が必要な質問に注意を引くこと、またはあなたが行っていない既存の回答に報いることです。コミュニティが有用で興味深いと感じるトピックに報いるためのメカニズム（HNQ、投稿の多く）が既に用意されています。
— ジョシュ
2
貪欲にならないでください。すでに十分な視聴と投票を得ています
— カサノバ
@JoshPetrieそのとおりです申し訳ありませんが、この状態を繰り返すことはできません。
— セイドモルテザカマリ

回答:

101

ピラミッド粒子

Unityのデフォルトパーティクルの形状はクワッドです。最初に、ピラミッドオブジェクトを使用してこのシェイプをピラミッドに変更するか、ジオメトリシェーダーでクワッドをピラミッドに変換する必要があります。

画像

ひどい

屈折

割れたガラス効果（屈折）を作成するには GrabPass { "TextureName" }、画面の内容をテクスチャに取り込みます。

GrabPassは特別なパスタイプです。これは、オブジェクトがテクスチャに描画されようとしている画面のコンテンツを取得します。このテクスチャを後続のパスで使用して、高度な画像ベースのエフェクトを実行できます。

https://docs.unity3d.com/Manual/SL-GrabPass.html

record_2018_02_03_23_09_06_370

Shader "Smkgames/GlassRefraction"
{
    Properties{
        _Refraction("Refraction",Float) = 0.05
        _Alpha("Alpha",Range(0,1)) = 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;
            };

            struct v2f
            {
                float4 grabPos : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            sampler2D _MainTex;
            float _Alpha,_Refraction;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.grabPos = ComputeGrabScreenPos(o.vertex);
                return o;
            }

            sampler2D _GrabTexture;

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2Dproj(_GrabTexture, i.grabPos+_Refraction);
                return float4(col.rgb,_Alpha);

            }
            ENDCG
        }
    }
}

メッシュ法線の使用

ワールド空間でメッシュの法線を表示するシェーダーに進みましょう。3次元の壊れた形状を表示したかったため、これを使用しました。

法線

record_2018_02_05_18_06_09_41

record_2018_02_03_23_19_06_705

    Shader "Smkgames/BrokenGlass3D"
{
    Properties{
        _MainTex("MainTex",2D) = "white"{}
        _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 grabPos : TEXCOORD0;
                float3 normal :NORMAL;
            };

            struct v2f
            {
                float4 grabPos : TEXCOORD0;
                float4 vertex : SV_POSITION;
                half3 worldNormal :TEXCOORD1;

            };
            sampler2D _MainTex;
            float _Intensity,_Alpha;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.grabPos = ComputeGrabScreenPos(o.vertex);
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                return o;
            }

            sampler2D _GrabTexture;

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 c = 0;
                c.rgb = i.worldNormal*0.5+0.5;
                float4 distortion = tex2D(_MainTex,i.grabPos)+_Intensity;
                fixed4 col = tex2Dproj(_GrabTexture, i.grabPos+c.r);
                return float4(col.rgb,_Alpha);
            }
            ENDCG
        }
    }
}

熱歪み

熱歪みを作成するには、フローマップを使用できます

フローマップは、2D方向情報をテクスチャに保存するテクスチャです。ピクセルの色は、UV座標テクスチャをベースとして使用する方向を決定します。色が多いほど、比例速度は速くなります。例の緑は、左上に移動し、中央がニュートラルになり、赤が右に移動することを示しています。これは、水のような液体マテリアルに役立つテクニックであり、単なるパンナーノードに代わる便利な代替手段です。

flow_map

熱変形

    Shader "Smkgames/HeatDistortion"
{
    Properties{
        _DistortionMap("DistortionMap",2D) = "white"{}
        _Intensity("Intensity",Float) = 50
        _Mask("Mask",2D) = "white"{}
        _Alpha("Alpha",Range(0,1)) = 1
    }
    SubShader
    {
Tags {"Queue"="Transparent" "RenderType"="Transparent"}

        GrabPass
        {
            "_GrabTexture"
        }

        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float4 grabPos : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            sampler2D _Mask,_DistortionMap;
            float _Alpha,_Refraction;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.grabPos = ComputeGrabScreenPos(o.vertex);
                return o;
            }

            sampler2D _GrabTexture;
            float _Intensity;

            fixed4 frag (v2f i) : SV_Target
            {
                float mask = tex2D(_Mask,i.grabPos);
                mask = step(mask,0.5);
                //mask = smoothstep(mask,0,0.4);
                float4 distortion = tex2D(_DistortionMap,i.grabPos+_Time.y)+_Intensity;
                fixed4 col = tex2Dproj(_GrabTexture, i.grabPos*distortion);
                return float4(col.rgb,mask*_Alpha);

            }
            ENDCG
        }
    }
}

normalを使用した別の例：

切り取る

法線マップ

smoketile_normal 1

Shader "Smkgames/HeatDistortion2" {
Properties {
        _CutOut ("CutOut (A)", 2D) = "black" {}
        _BumpMap ("Normalmap", 2D) = "bump" {}
        _BumpAmt ("Distortion", Float) = 10
}

Category {

    Tags { "Queue"="Transparent"  "IgnoreProjector"="True"  "RenderType"="Opaque" }
    Blend SrcAlpha OneMinusSrcAlpha
    Cull Off 
    Lighting Off 
    ZWrite Off 
    Fog { Mode Off}

    SubShader {
        GrabPass {                          
            "_GrabTexture"
        }
        Pass {

CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_particles
#include "UnityCG.cginc"

struct appdata_t {
    float4 vertex : POSITION;
    float2 texcoord: TEXCOORD0;
};

struct v2f {
    float4 vertex : POSITION;
    float4 uvgrab : TEXCOORD0;
    float2 uvbump : TEXCOORD1;
    float2 uvcutout : TEXCOORD2;
};

sampler2D _BumpMap,_CutOut,_GrabTexture;
float _BumpAmt;
float4 _GrabTexture_TexelSize;
float4 _BumpMap_ST,_CutOut_ST;

v2f vert (appdata_t v)
{
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex);
    o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y*-1) + o.vertex.w) * 0.5;
    o.uvgrab.zw = o.vertex.zw;
    o.uvbump = TRANSFORM_TEX( v.texcoord, _BumpMap );
    o.uvcutout = TRANSFORM_TEX( v.texcoord, _CutOut );
    return o;
}



half4 frag( v2f i ) : COLOR
{
    half2 bump = UnpackNormal(tex2D( _BumpMap, i.uvbump )).rg;
    float2 offset = bump * _BumpAmt * _GrabTexture_TexelSize.xy;
    i.uvgrab.xy = offset * i.uvgrab.z + i.uvgrab.xy;

    half4 col = tex2Dproj( _GrabTexture, UNITY_PROJ_COORD(i.uvgrab));
    fixed4 cut = tex2D(_CutOut, i.uvcutout);
    fixed4 emission = col;
    emission.a = (cut.a);
    return emission;
}
ENDCG
        }
    }

  }
}

RGBスプリット

最初のgifに注意を払うと、RGBの分割がほとんど見られません。

u_rgb_seperation_ar

Shader "Hidden/RgbSplit"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _NoiseTex1 ("Noise Texture A", 2D) = "white" {}
        _NoiseTex2 ("Noise Texture B", 2D) = "white" {}
    }
    SubShader
    {

        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,_NoiseTex1,_NoiseTex2;
            float3 colorSplit(float2 uv, float2 s)
{
    float3 color;
    color.r = tex2D(_MainTex, uv - s).r;
    color.g = tex2D(_MainTex, uv    ).g;
    color.b = tex2D(_MainTex, uv + s).b;
    return color;
}

float2 interlace(float2 uv, float s)
{
    uv.x += s * (4.0 * frac((uv.y) / 2.0) - 1.0);
    return uv;
}

    fixed4 frag (v2f i) : SV_Target
    {

    float t = _Time.y;

    float s = tex2D(_NoiseTex1, float2(t * 0.2, 0.5)).r;

    i.uv = interlace(i.uv, s * 0.005);
    float r = tex2D(_NoiseTex2, float2(t, 0.0)).x;

    float3 color = colorSplit(i.uv, float2(s * 0.02, 0.0));

    return float4(color, 1.0);

            }
            ENDCG
        }
    }
}

便利なリンク

https://www.fxguide.com/featured/time-for-destruction-the-tech-of-quantum-break/

Githubのソース

— セイド・モルテザ・カマリ
ソース
47
私は興味があります、あなたはこれらのようなテクニックを共有するために開発者ブログをセットアップすることを考えましたか？そのようなリソースを購読します。:)
— DMGregory
7
2番目の提案！あなたのアプローチは常に創造的で、詳細でありながら理解しやすいので、私は毎日あなたの反応をウェブサイトで監視しています。提供する例も非常に役立ちます。
— altskop
4
RGBスプリット効果について：私はメガネをかけていますが、色収差によって自然に発生する同様の効果を常に経験します。これは、目から画面までの距離によって異なります。3Dメガネが何かの距離のさまざまなキュー間でミスマッチを引き起こすのと同じように、あなたの効果は、私の脳が解釈してスクリーンが私の目からどれだけ離れているかを推定する詳細に干渉します。それは非常に不快で、吐き気を催すほどです。使用することを選択した場合は、オプションにしてください。
— -Aoeuid
1
@Aoeuid FWIW、それは矯正視力のない人々にとってさえ非常に不快です:)
— マックス
うん@DMGregory：DIは持っていないサイトので、私はここに私のテクニックを共有し、私は私が参考になりますあなたは私をサポート開発ブログやsite.Ifへのご支援を必要とhttps://www.patreon.com/SeyedMortezaKamaly
— セイェドモルテザ・カマリ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.