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

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

• You're missing green. Nov 10, 2018 at 8:33
• The author says nothing about G values. Only R and B.
– Dan
Nov 10, 2018 at 15:20
• Also the G component would be used as a Y component (up/down) which makes no sense. The shader only moves left and right.
– Dan
Nov 10, 2018 at 15:20
• The author says nothing about G values. Only R and B. In the YouTube video in 5:01 the author says The green value is 128 in every pixel Nov 11, 2018 at 0:07
• woah thank you I missed that. Let me see if that fixes my problem.
– Dan
Nov 11, 2018 at 1:35

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

• hey you make some great points. I'm still curious how to do it with RGB maps for complex motions. I tried implementing your idea here: pastebin.com/B7rtTWDy unfortunately the entire screen slides off and not interlacing rows.
– Dan
Nov 10, 2018 at 19:09
• I found that if I multiply gl_FragCoord.y by an odd number it works. However no number represents the rows. Any number that is odd still has the same amount of rows. If I multiply by an even number, I get what I had before with the screen slidiing off to the right.
– Dan
Nov 10, 2018 at 22:09