How to place a texture in a specific location? (GLSL)

Questions
, , , ,
1

In my code, I’m mixing two textures. I want to position a texture at any place on the plane but when I add an offset to the texture UV XY coordinate the image just gets stretched.

offsetText2 = vec2(0.5,0.5);       
vec4 displacement  = texture2D(utexture2,vUv+offsetText2);

How do I move the texture to any position without stretching it?

VERTEX SHADER:

  varying vec2 vUv;
  uniform sampler2D utexture1;
  uniform sampler2D utexture2;
  varying vec2 offsetText1;
  varying vec2 offsetText2;

  void main() {
      offsetText1 = vec2(0.0,0.0);
      offsetText2 = vec2(0.5,0.5);

      vUv = uv;
      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
      vec4 displacement  = texture2D(utexture1,vUv+offsetText1);
      vec4 displacement2 = texture2D(utexture2,vUv+offsetText2);
      modelPosition.z   += displacement.r*1.0;
      modelPosition.z   += displacement2.r*40.0;
      gl_Position       = projectionMatrix * viewMatrix * modelPosition;
  }

FRAGMENT SHADER:

  #ifdef GL_ES
  precision highp float;
  #endif
  uniform sampler2D utexture1;
  uniform sampler2D utexture2;
  varying vec2 vUv;
  varying vec2 offsetText1;
  varying vec2 offsetText2;

  void main() {
      vec3 c;
      vec4 Ca = texture2D(utexture1,vUv+offsetText1 );
      vec4 Cb = texture2D(utexture2,vUv+offsetText2);
      c       = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (2.0 - Ca.a);
      gl_FragColor = vec4(c, 1.0);
  }

As you can see the image is being stretched from the top left and bottom right

rt
rt1426×945 89.8 KB

2

Hi!
How the final result has to look like?

4

the overall result I’m looking for is to shift the texture to ANY location without stretching. So if I choose to shift utexture1 halfway off the plane I should get utexture1 halfway off the plane without stretching. I hope that helps

5

TBH, not that much.
Any chance to provide a minimal editable live code working example? jsfiddle, codepen etc.
With more details about how it has to behave and what result you expect.

7

So this is what I’m trying to recreate. (the video starts at what I’m trying to accomplish) Maybe I’m misunderstanding how this tech is being used. but It looks as if the author is able to place a texture at a given location