GLSL texture distortion

Question

I want to create a simple heat distortion on my texture, but can't seem to figure out the steps required to accomplish this. So far, I've been able to change pixel colors the following way (using pixel shader):

    varying vec3 v_Position;        
    varying vec4 v_Color;           

    varying vec3 v_Normal;          
    varying vec2 v_TexCoordinate;  

    void main()
    {
      var col = texture2D(u_Texture, v_TexCoordinate);
      col.r = 0.5;
      gl_FragColor = col;
    }

This is where I get lost. How can I modify pixel locations to distort the texture? can I set any other properties, but gl_FragColor? or do I have to create a plane with many vertices and distort the vertex locations? Is it possible to get 'neighbour' pixel color values? Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 11:50

How can I modify pixel locations to distort the texture?

By modifying the location from which you sample the texture. That would be the second parameter of texture2D

var col = texture2D(u_Texture, v_TexCoordinate);
                              ^-------------^
          Texture distortion goes here

Is it possible to get 'neighbour' pixel color values?

Yes, and that's the proper way to do it. In a fragment shader the location you're writing to is immutable¹, so it has all to be done through the fetch location. Also note that you can sample from the same texture an arbitrary² number of times, which enables you to implement blurring³ effects.

¹: writes to freely determined image locations (scatter writes) are supported by OpenGL-4 class hardware, but scatter writes are extremely inefficient and should be avoided.

²: there's a practical limit of the total runtime of the shader, which may be limited by the OS, and also by the desired frame rate.

³: blurring effects should be implemented using so called separable filters for largely improved performance.

GLSL texture distortion

1 Answers1