shader heightmap translation following camera in libgdx on an tiledmap

Question

I am trying to create a nice water distortion effect using shader on a 2D game based on libgdx using heightmap.

At first, I render the whole scene to a FBO

then I apply the distortion effect to the rendered FBO and use a mask to determine the waterfall location. Before applying the mask:

To achieve the effect, I translate the Y coordinate of the heightmap in the shader based on time and I loop in it using fract(heighmapCoord).

The problem is that when the camera move to follow the player, the heighmap stay static on the X axis. I decided to translate the heightmapCoord based on the camera.position and the fract() function. The heighmap seems to follow the camera but with less speed, causing the effect to slide inside the waterfall mask.

It seems that there is a projection problem. Also, I am not sure if this is the good way to create this kind of effect.

How can I make the heightmap following exactly the camera move?

EDIT:

I only use a fragment shader, the vertex one is the passthrought shader:

void main() {
    v_color = a_color;
    v_texCoord0 = a_texCoord0;
    gl_Position =  u_projTrans * vec4(a_position, 1.);
}

Answer 1

I found the solution. You have to translate the coordinate from screen to the shader as the following:

assuming the screen as a viewport of 15 * 10 tiles (width * height), you will need to translate the heighmap texture coord as

texCoord.x += camera.x / viewPortTileWidth;  // 15
texCoord.y += camera.y / viewPortTileHeight; // 10

then the heighmap will not slide anymore as the player is moving.