Home > Blockchain >  How to center the screen after using a distortion with fragment shader?
How to center the screen after using a distortion with fragment shader?

Time:11-08

I'm trying to add some drunk effects by using fragment shader.

MainScreen

But I still get some trouble with coords on top right corner as you can see on the picture...

Here's the fragment shader :

/* Render of the screen */
uniform sampler2D uSampler;
/* Texture of the distortion*/
uniform sampler2D uDeformation;
/* Texture for the intensity */
uniform sampler2D uIntensity;
/* The time (u_time) */
uniform float uTime;
/* Scale of Deformation */
uniform float uScale;
/* Coords of fragment */
varying vec2 vTextureCoord;

void main (void) {
    vec4 intensityVec = texture2D(uIntensity, vTextureCoord)*(uTime,0.5); // Intensité qu'on met aux corrdonnées (uTime,0.5)
    vec2 mod_texcoord = vec2(0,vTextureCoord.y*sin(uTime)) intensityVec.xy; // Calcul des coordonnées de la deformation à appliquer en fonction du sinus
    gl_FragColor = texture2D(uSampler, vTextureCoord uScale*texture2D(uDeformation, mod_texcoord).rg); // On assemble l'intensité, la deformation et le rendu
}

Does someone have a idea of what I'm supposed to do ? I tried to rescale it, but it seems to do nothing and I'm out of ideas...

CodePudding user response:

How about you mix the original texture coordinates with the distorted one based on the distance from the edge of the screen so that the deformation fades out towards the edge?

Something like this:

float tc_mix_fact = 1.0 - distance(vTextureCoord, vec2(0.5)));
vec2 final_tc = mix(vTextureCoord, uScale*texture2D(uDeformation, mod_texcoord).rg, tc_mix_fact);
gl_FragColor = texture2D(uSampler, final_tc);

You most likely want to tweak the funciton to blend the texture coordinates but this should be a decent starting point.

Note: the distance function for tc_mix_fact is going to be slow so you could also just create a look up gradient/vignetting texture to speed this up.

Note2: Alternatively to applying the mix factor to the texture coordinates, it might look better to apply it to the uScale factor instead to fade out the distortion towards the screen edge.

  • Related