Quantum Break의 왜곡 입자 효과를 어떻게 복제 할 수 있습니까?


68

Quantum Break는이 환상적인 입자 효과를 가지고 있으며, 깨진 유리와 같은 왜곡 효과입니다. 이 효과를 어떻게 복제 할 수 있는지 알고 싶습니다. 아래에서 볼 수 있으며 YouTube에서 전체 비디오를 볼 수 있습니다 .

record_2018_02_05_16_34_26_307

record_2018_02_01_22_27_44_971


4
"이 질문은 충분히 주목받지 못했습니다." ?
Alexandre Vaillancourt

@AlexandreVaillancourt 나는 단지 더 많은 견해를 위해이 질문을 고정하고 그것이 유용하다고 생각하기 때문에 관심을 끌었습니다. 현상금 이유로 더 나은 이유를 찾을 수 없었습니다. 문제가 있다면 내 이유를 바꿀 것입니다. 감사합니다
Seyed Morteza Kamali

2
바운티의 목적은 실제로 질문을 "고정"하는 것이 아닙니다. 당신의 진술 된 이론적 근거는 다소 불분명하다. 바운티의 목적은 답변이 필요한 질문에주의를 기울이거나 기존 답변에 대해 보상하는 것입니다. 커뮤니티가 유용하고 흥미 롭다고 느끼는 주제를 보상하기위한 메커니즘이 이미 마련되어 있습니다 (많은 게시물이 적는 HNQ).
Josh

2
탐욕하지 마십시오. 귀하는 이미 충분한 의견과 투표를 받았습니다
Casanova

@JoshPetrie 당신 말이 맞아 죄송합니다.이 상태를 반복하지 않습니다. 부끄러워서 평판을 반환하지 않고 기능에서 내 질문을 제거 할 수 있습니다. 어쩌면 다른 사람들을 도울 것이라고 생각했기 때문에이 작업을 수행합니다.
Seyed Morteza Kamali

답변:


101

피라미드 입자

유니티 기본 파티클의 모양은 쿼드입니다. 먼저 피라미드 오브젝트를 사용하여이 모양을 피라미드로 변경하거나 지오메트리 쉐이더를 사용하여 쿼드를 피라미드로 바꿉니다 .

영상

끔찍한

굴절

깨진 유리 효과 ( 굴절 )를 만들려면 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
나는 두 번째 제안! 귀하의 접근 방식은 항상 창의적이고 상세하며 이해하기 쉬우므로 매일 웹 사이트에서 귀하의 답변을 모니터링합니다. 당신이 제공하는 예제들도 큰 도움이됩니다.
altskop

4
RGB 분할 효과와 관련하여 : 저는 안경을 쓰고 화면마다 거리에 따라 색수차로 인해 자연스럽게 발생하는 유사한 효과를 경험합니다. 3D 안경이 물체가 얼마나 멀리 떨어져 있는지에 대한 다양한 신호를 불일치시키는 것과 같은 방식으로, 효과는 뇌가 화면이 눈에서 얼마나 떨어져 있는지 추정하기 위해 해석하는 세부 사항을 방해합니다. 메스꺼움에 이르기까지 매우 불쾌합니다. 사용하기로 선택한 경우 선택 사항으로 만드십시오!
Aoeuid

1
@Aoeuid FWIW, 시력이없는 사람들에게도 매우 불쾌합니다 :)
Max

@DMGregory yep : DI는 사이트가 아니므로 기술을 공유하고 블로그 나 사이트를 개발하는 데 도움이 필요합니다. 저를 지원하는 경우 도움이 될 것입니다 https://www.patreon.com/SeyedMortezaKamaly
Seyed Morteza Kamali
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.