Vortex Image Effect

Question

I need some kind of vortex/spiraling image effect. Something like transition effect which works like a vortex. I cant find anything like that for URP, there was image effect like that for old Unity, but nothing right now. I also cant find any resources, paid plugins or anything on this.

Appreciate any help on this, whether link where i can find more about this or direct tips. Thanks

Answer 1

Answer by Bunny83 · Jan 14 at 01:08 AM

Well since you said vortex / spiraling I guess you mean the usual twirl / swirl effect? That's an ultra trivial distortion mapping. Here, I quickly created a shader toy example. You can control the strength of the twirl by holding down your left mouse button on the output. The x position is directly mapped to the strength. So at the left edge you get zero twirl and it's increasing as you move to the right.

Here's the same thing as a Unity shader that I quickly thrown together:

 Shader "B83/Twirl"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _Twirl ("twirl", float) = 0
     }
     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;
             uniform float _Twirl;
 
             fixed4 frag(v2f i) : SV_Target
             {
                 // center UV coords
                 float2 uv = i.uv -0.5;
                 // get angle from the center to uv coordinate
                 float a = atan2(uv.y, uv.x);
                 // get distance from the center
                 float d = length(uv);
                 // offset angle based on twirl strength and distance from the center.
                 // affect the center the most
                 a += (0.5 - d) * _Twirl;
                 // recalculate new uv coordinate with new angle.
                 uv.x = cos(a) * d;
                 uv.y = sin(a) * d;
                 uv += 0.5;
 
                 fixed4 col = tex2D(_MainTex, uv);
                 return col;
             }
             ENDCG
         }
     }
 }

Depending on what you need / want you can make some changes. Currently the twirl has a boundary circle that touches the texture boundary on all 4 sides. That circle would not be affected (distance 0.5 from the center). The inner part is rotated one way, the outer part the other way. If you just want to rotate the inner part, you can clamp the addition with a "max":

 a += max(0.5 - d, 0) * _Twirl;

If you want the twirl circle to touch the 4 corners, you would need to use a distance of half the square root of 2 (about 0.707)

 a += max(0.707 - d, 0) * _Twirl;

You can also increase that circle radius to lay outside the visible range. This would in essence just rotate the whole image more.

Add comment · Show 5 · Share

Wekthor · Jan 14 at 01:58 AM 0

Share

Amazing, thank you. Can this be applied as screen effect? Ie affect whole game scene as image effect?

Eno-Khaon Wekthor · Jan 14 at 03:10 AM 0

Share

Yes, it can. The main render uses 0-1 UV coordinates to designate where to draw on screen, and _MainTex is the rendered frame itself. It's directly compatible.

Wekthor · Jan 14 at 03:35 PM 0

Share

I have tested it and also tested some other similar stuff and it seems to not work in URP? I might be doing something wrong, but i applied the shader via OnRenderImage function on camera and followed other tutorials and it seems to not work in URP based on what information i found. Any idea if that can be the case or it should work in URP?

Bunny83 Wekthor · Jan 14 at 05:05 PM 0

Share

OnRenderImage is part of the old render system. That method is not even called from the URP. Keep in $$anonymous$$d when you switch to a scriptable render pipeline like URP, everything related to rendering is handled differently and directly by the pipeline. See this Forum thread for more information.

After some fiddling I managed to setup a custom render pass by using this as basis. Though the whole scriptable render pipeline is quite convoluted. It's quite powerful and you can really hook into the rendering pipeline at almost any point, but it also requires a lot of setup work. I barely used the SRP system at all ^^. So I'm also not that familiar with it. Though as I said with no pre knowledge I got it working in about 30 $$anonymous$$ with a lot of testing. When it finally worked, it worked too well as it affects all cameras including the sceneview camera(s). Though the "renderingData" does have information on the camere if it's a sceneview camera or not.

I don't have much time at the moment, so I can't really go more into detail. Anyways, you should find information on the net without any issues. Just keep in $$anonymous$$d that you have to look for the right information. The SRP came out in 2018. So any "tutorial" that is rendering related before that year is already out.

Wekthor Bunny83 · Jan 14 at 05:25 PM 0

Share

Thanks for looking into it. I appreciate your time. I did find that forum post as well and had a look into it. But to be honest, i am a bit reluctant to implement it, since there is so little information on it and i have no idea if adding new render pass will screw up something else later. I am using URP because of the new 2d lights, so i need to use it, but adding those render passes seem like not worth it, since this is supposed to be only occasional effect and possible issues down the road. I will read through that article you shared tho. Thanks again.

Vortex Image Effect

1 Reply

Your answer

Follow this Question

Related Questions