Welcome to the tutorial to discooridnated chromatic effect.
The above is an example of screen distortion. It is necessary to understand the first type of screen distortion in order to understand the final effect listed second.
It is achieved by having screen coordinate texture then applying the altered screen coordinate when rendering the final scene.
Better to see what's happening then read description. Let's take a look at the debug screen.
I use this green texture of color .5 .5 0 as my new coordinate texture. Why .5 .5 0? Because red value is used for x coordinate and green value is used for y coordinate. And because default value for coordinate change of the screen should be 0, 0. And .5 .5 0 gives you coordinate change value of 0, 0.
The equation for translating the color pixels to coordinate is following.
final_coordinate = original_coordinate + (colorPixel - (.5 , .5) ) / .5;
This effect only takes three lines of code. That's right. Three lines then you are good to go.
fixed4 GetColor(sampler2D main, sampler2D src, float2 uv){
//main is the main screen texture. src is the green texture, uv is the original screen coordinate for the pixel
float4 color = tex2D(src,float2(uv.x,1-uv.y));
float2 coordinate = (color.rg - float2(.5,.5) ) /.5;
return tex2D(main,uv + float2(coordinate.x,coordinate.y) );
}
fixed4 frag(vertex i) : COLOR {
return GetColor (_MainTex,_DistortionCoordinateTextue, i.uv );
}
However the effect we want to achieve is not a simple screen distortion but color channel based screen distortion.
All we need to do is repeat the step above three times for each color of the pixel; red, green, and blue.
In order to distort three times, we are going to need three distortion fields.
fixed4 frag(vertex i) : COLOR {
float4 originalColor = tex2D(_MainTex,i.uv);
float4 r = GetColor (_MainTex,_distortionRed, i.uv );
float4 g = GetColor (_MainTex,_distortionGreen, i.uv );
float4 b = GetColor (_MainTex,_distortionBlue, i.uv );
return float4(r.r,g.g,b.b,originalColor.a);
}