Problem when bind texture with no repeat

Questions
,
1

Hi, everybody. I have a problem when bind texture with no repeat. Please watch this video:


When i move this texture in other texture i want result like that:
result
result512×512 19.1 KB

But i get bad result:
question-pic
question-pic620×618 35.6 KB

My code:

const fr = `
  uniform vec2 u_resolution;
  uniform sampler2D inputImageTexture;
  uniform sampler2D inputImageTexture2;
  uniform vec2 positionChange;

  varying vec2 vertexUV;

  void main(){
    vec4 mask = texture2D(inputImageTexture,vertexUV);
    vec4 maskPig = texture2D(inputImageTexture2,vertexUV - positionChange);
    
    vec3 total = mask.xyz * maskPig.xyz;
    gl_FragColor = vec4(total,1.0);
  }
`;
let texture1 =  new TextureLoader().load("./Assets/iphone14-5.jpg");
texture1.wrapS = ClampToEdgeWrapping;
texture1.wrapT = ClampToEdgeWrapping;

const shaderMaterial = new ShaderMaterial({
  uniforms: {
    positionChange:{ value: new Vector2(0,0)},
    u_resolution: {
      value: new Vector2(renderer.domElement.width,renderer.domElement.height),
    },
    inputImageTexture: {
      value: new TextureLoader().load("./Assets/star.png"),
    },
    inputImageTexture2:{
      value: texture1,
    }
  },
  vertexShader: vs,
  fragmentShader: fr,
});

How should I solve this problem?

2

Have you tried to add a white border in your texture? In this way the white border will be copied to the left.