Jak mogę tworzyć naturalne krople deszczu na ekranie?


11

Staram się, aby efekt deszczu spadał za pomocą metaballi i śladu na ekranie. Znalazłem wskazówkę w shadertoy, ale nie rozumiałem, jak zaimplementowano:

https://www.shadertoy.com/view/ltffzl

niestety ma wiele obliczeń matematycznych i nie mogę używać go w jedności, ponieważ powoduje opóźnienie. oczywiście powinienem używać tekstur, ale jak mogę uzyskać efekt szlaku ?!

wprowadź opis zdjęcia tutaj

moim pomysłem jest użycie renderera tekstur i szlaków do upuszczania, ale jak mogę uzyskać efekt metaballi? wprowadź opis zdjęcia tutaj


Aktualizacja

Mógłbym wdrożyć Metaballs według tego artykułu

https://github.com/smkplus/RainFX/tree/master

ale nie mam pojęcia o szlaku

Odpowiedzi:


11

Myślę, że powinieneś pomyśleć o efekcie jako „obliczyć mapę, gdzie jest woda” + „wygeneruj normalny wektor z tej mapy i użyj go, aby zrównoważyć wyszukiwanie tekstury tła”.

W podziale na to, co robi twój przykładowy shadertoy, po prostu oblicza „ślad”, aby pokazać, gdzie następuje defogowanie:

wprowadź opis zdjęcia tutaj

Oblicza normalne okrągłe krople deszczu,

wprowadź opis zdjęcia tutaj

i używa tej normalnej mapy, aby zrównoważyć wyszukiwanie tekstury do fałszywego załamania.

Jeśli chcesz, aby ślady były wykonywane przez przetwarzanie końcowe w module cieniującym, powinieneś po prostu utworzyć kształt „śladu” w module cieniującym za pomocą algebry. Na przykład w poniższej funkcji nałożyłem „chwiejną ścieżkę” i stożek na głowie i ogonie, aby uzyskać

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);
}

Oto szorstki POC w shadertoy - https://www.shadertoy.com/view/XlBfz1 demonstrujący tworzenie zestawu kropli deszczu. Wygląda ziarniście w małych rozdzielczościach ze względu na rozdzielczość instrumentów pochodnych, ale powinien wyglądać lepiej, jeśli wyświetlisz go na pełnym ekranie.

Edycja: Dodano przykład z nakładanymi kroplami deszczu

wprowadź opis zdjęcia tutaj

Pozostawione jako ćwiczenie dla czytelnika:

1) Dodaj małe okrągłe krople. dla inspiracji, spójrz na StaticDropsfunkcję w swoim oryginalnym przykładzie shadertoy.

2) Dodaj wysokiej jakości normalne obliczenia. Jak #define CHEAP_NORMALSsugeruje opcja z oryginalnego przykładu shadertoy, wbudowany dFdx jest przybliżeniem niskiej wierności i można uzyskać lepsze wyniki, ręcznie obliczając pochodne (kosztem obliczenia funkcji 3 razy).

3) Randomizowanie odstępów między kolumnami. Możesz poszerzyć kolumny, a następnie zmodyfikować uv.x - 0.5 + 0.2 * wobblebit, aby dodać losowe przesunięcie na osi x. Prawdopodobnie zechcesz jeszcze raz usunąć stronę z oryginalnego przykładu i nałożyć na siebie kilka różnych strumieni strumieni, aby uzyskać mniej jednolity wygląd.



@DMGregory odnotowano. usunięcie komentarza metaball
Jimmy

Sam szlak można wykonać za pomocą bufora, poprzez zanikanie (zwracaj oldValue * .95 + newdiskposition). Zwykle ludzie używają szumu Perlina, aby zakłócić linię prostą.
Seyed Morteza Kamali

coś takiego: shadertoy.com/view/4dy3zR Próbowałem zrobić głośny szlak, ale nie mogłem
Seyed Morteza Kamali

7

możesz uzyskać ten efekt, wykonując następujące czynności:

Cząstka

Cząstka

RenderTextuer

możesz zapisać wynik za pomocą RenderTexture. to jest przykład multipass w shadertoy:

https://www.shadertoy.com/view/ltccRl

iñigo quilez: Shadertoy używa wielu przebiegów, po jednym na „bufor”. Jak wskazuje nazwa, przechowuje wyniki w buforze. Bufor to tylko tekstura. Unity pozwoli ci także renderować tekstury.

Stworzyłem kamerę do renderowania cząstek do RenderTexture:

topór

Renderuj teksturę

GrabPassing

możesz zdobyć przepustkę za zastosowanie Distortion

Wyjaśniłem to w tym poście:

Jak mogę odtworzyć efekt cząsteczki zniekształcającej Quantum Break?

Plama

dzięki użyciu alfa w kolorze przez całe życie mamy proste rozmycie

alphaovertime

gradiant

aby uzyskać lepszy wynik, lepiej zastosować proste rozmycie, ale jak uzyskać rozmycie?

Macierz splotowa

W przetwarzaniu obrazu jądro, macierz splotu lub maska ​​to mała matryca. Służy do rozmycia, wyostrzania, wytłaczania, wykrywania krawędzi i nie tylko. Odbywa się to poprzez splot jądra z obrazem.

Aby uzyskać więcej informacji, kliknij ten link

Jądro

 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
        }
    }
}

Boxblur

Rozmycie ramki (znane również jako filtr liniowy pola) to liniowy filtr domeny przestrzennej, w którym każdy piksel w obrazie wynikowym ma wartość równą średniej wartości sąsiednich pikseli w obrazie wejściowym. Jest to forma filtra dolnoprzepustowego („rozmycia”). Rozmycie pola 3 na 3 można zapisać jako macierz

https://en.wikipedia.org/wiki/Box_blur

1_oos3y1ztoewgsubpdnbvea

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
        }
    }
}

blurbox

Powtórzenie

możesz użyć Rendertexture do zapisania poprzedniej klatki. więc możesz złapać poprzednią klatkę, a następnie rozmyć. powtarzając to osiągasz rozmycie.

0fe28c6167db2132d4bb8677fc1b2050 - Leandro-Erlich-Argentina

Normalna

float4 distortion = tex2D(_MainTex,i.uv);
float3 distortionNormal = UnpackNormal(distortion);

record_2019_03_03_21_35_45_417

Wniosek

Ostateczny moduł cieniujący:

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
        }
    }
}

bez używania koloru alfa przez cały okres użytkowania:

record_2019_03_03_21_48_36_273

za pomocą alfa w kolorze przez całe życie:

record_2019_03_03_21_48_19_786

Źródło jest dostępne:

https://github.com/smkplus/RainDrop

Jest więcej!

możesz także tworzyć fale

record_2019_03_04_22_10_25_457

Przydatne linki

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/


1

Wiele lat temu istniało pytanie , ale w ogóle nie dotyczy Unity (niestety). Jeśli spojrzysz na slajd 57 połączonej prezentacji, wspominają o podejściu opartym na siatce.

Istnieje pewne pokrewne pytanie dotyczące Physics SE, które może Cię zainteresować. Link do droplet.pdf w połączonym pytaniu jest zepsuty, ale nadal znajduje się na Wayback Machine. Zajmuje się matematyką wody spływającej z kilku rodzajów powierzchni. Kropelki wolą podróżować po ścieżkach wcześniej używanych przez wcześniejsze krople deszczu, na przykład (patrz p926).

Prawdopodobnie możesz po prostu wymodelować głowy i ogony każdej „kropli deszczu” i pozwolić jej trochę zygzakować. Kiedy zderzają się dwie wydłużone krople deszczu, przypuszczam, że można je połączyć w większą i szybciej poruszającą się kroplę deszczu. Objętość wody pozostaje taka sama. Jest po prostu poruszany i kształtowany przez siły grawitacji, przyczepność do szkła i spójność.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.