How do I make my glsl RGB displacement map look like this

Question

I want to use a RGB texture as described in this video here.

Here is my texture so far.

The author says the first line has no R channel and ranges from B = 0 to B = 255. While each other line has R channel = 255 and B = 255 to B = 0 as seen.

His colors do not match with mine. I wrote my shader like this:

  #version 110
  uniform sampler2D texture;
  uniform sampler2D pattern;
  uniform float progress;

  void main()
  {
    vec4 displacement = texture2D(pattern, gl_TexCoord[0].xy);
    displacement = ((displacement * 2.0) - 1.0) * progress;

    vec2 newTexCoord = gl_TexCoord[0].xy + displacement.xy;
    vec4 pixel = texture2D(texture, newTexCoord);

    vec4 color = gl_Color * pixel;
    gl_FragColor = color;
  }

which is based off his earlier videos but I'm not getting the effect at all. At best I see interlaced layers moving away but they move diagonally instead of left-right. Plus they clamp instead of leaving black color behind as seen in his video.

Here's what mine looks like: click to view

Answer 1

The black background is easy to solve. You're missing an if statement from the shader.

The other problem is that you forgot to normalize the displacement at one point.

In my opinion there's a much simpler way to solve this that doesn't require a separate texture to work. First, you need to find out which row you're in. To do this simply take gl_FragCoord.y and multiply it by the amount of rows you want, then floor the result. The first row will have an index of 0, the second an index of 1 and so on. Every second row should go to the left. To convert the index into a direction simply take the modulo 2 of the index, multiply by 2 and subtract 1:

float direction = mod(index, 2) * 2.0 - 1.0;

The new texture coordinate is simply the current texture coordinate plus vec2(direction * progress, 0). Also make sure that when the x coordinate of the new uv coordinate falls outside the [0, 1] range, then draw black instead to avoid the clamping issue