1
\$\begingroup\$

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

Here is my texture so far. enter image description here

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

\$\endgroup\$
  • 1
    \$\begingroup\$ You're missing green. \$\endgroup\$ – tkausl Nov 10 '18 at 8:33
  • \$\begingroup\$ The author says nothing about G values. Only R and B. \$\endgroup\$ – Maverick Nov 10 '18 at 15:20
  • \$\begingroup\$ Also the G component would be used as a Y component (up/down) which makes no sense. The shader only moves left and right. \$\endgroup\$ – Maverick Nov 10 '18 at 15:20
  • 1
    \$\begingroup\$ 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 \$\endgroup\$ – tkausl Nov 11 '18 at 0:07
  • \$\begingroup\$ woah thank you I missed that. Let me see if that fixes my problem. \$\endgroup\$ – Maverick Nov 11 '18 at 1:35
1
+50
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Maverick Nov 10 '18 at 19:09
  • \$\begingroup\$ 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. \$\endgroup\$ – Maverick Nov 10 '18 at 22:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.