[opengl] advanced chapter of texture - principle of flowmap

       flowmap Simply put, it is a special uv Texture animation , We record the motion vector in the texture , And let the texture uv Move in a particular direction .

       

        Its principle is very simple , But if you multiply the motion vector by time , Superimposed on the original texture coordinates , Then you won't get the right result ：

vec2 motionvector = texture(flowmap, uv).xy * 2 - 1; // decode motion vector
uv = uv + time * motionvector;
vec3 color = texture(tex, uv).rgb;

      When we accumulate a texture disturbance , The image is bound to be distorted , This distortion occurs when the texture is stretched or compressed , And texture generation tiling. But the value is small , Less distortion .

      We must ensure that the motion vector accumulated on the texture coordinates is a relatively small value , Therefore, we should apply motion vectors circularly in a small numerical space .

      Based on this idea , We optimize our code as follows ：

vec2 motionvector = texture(flowmap, uv).xy * 2 - 1; // decode motion vector
uv = uv + fract(time) * motionvector * flowstrength;
vec3 color = texture(tex, uv).rgb;

      We intercept the fractional part of time , Make sure its value is in a small range , among ,flowstrength Can be used to control the range of values , The greater the numerical , The greater the range of motion , The deformation of the image will also be more serious . In general , This parameter should not exceed 1.

      however , This kind of circular application will bring discontinuity , therefore flowmap The real difficulty is , How to realize the never-ending “ flow ”.

      In order to reduce the effect of discontinuity , We apply two phases that differ by half a period uv motion , And mix between the two images , Get a result that looks more correct .

      Specifically applied to texture , As the first image uv The movement is at the end of the current cycle , Fade out , Of the second image uv The motion starts at the beginning of the cycle , Fade into .

vec2 motionvector = texture(flowmap, uv).xy * 2 - 1; // decode motion vector
vec2 uv1 = uv + fract(time) * motionvector * flowstrength;
vec2 uv2 = uv + fract(time + 0.5) * motionvector * flowstrength;
vec3 color1 = texture(tex, uv1).rgb;
vec3 color2 = texture(tex, uv2).rgb;

      According to time , Calculate a mixing coefficient ：

float alpha = abs((fract(time) - 0.5) * 2); //  Simulated triangular wave , You can also use sin Function simulation 
vec3 color = mix(color1, color2, alpha);