Why is there a line when I rotate texture shader in sphere?

Hey, I mapped a UV value between [0.1, 1.1] to [0, 1], which is equivalent to rotating a circle by one tenth, but at the point where the texture is connected appears a line. At first I think it may be casued by accuracy or aliasing, however it seems not after tested.
Here is the problem image:


and this is the code:

  sphereGeometry = new THREE.SphereGeometry(10, 60, 40);
  sphereMaterial = new THREE.ShaderMaterial({
    uniforms: {
      originalTexture: { value: originalImage },
    },
    fragmentShader: `
        precision mediump float;
        uniform sampler2D originalTexture; 
        varying vec2 vUv;

        float getPosition(float p, float offset) {
          if (p + offset > 1.) {
            return p + offset - 1.;
          }
          return p + offset;
        }


        vec2 GeneratePosition(vec2 v, vec2 offset) {
          return vec2(getPosition(v.x, offset.x), getPosition(v.y, offset.y));
        }

        void main() {
        gl_FragColor = texture2D(originalTexture,GeneratePosition(vUv, vec2(0.01, 0.)));
        }
    `,
    vertexShader: `
        varying vec2 vUv; 

        void main() {
        vUv = uv;

        vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewPosition; 
        }
    `,
    side: THREE.BackSide,
  });

  sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  scene.add(sphere);

There’s several possible reasons, but without a working example it’s hard to give a definitive answer. If you made it easier for others to confirm suspected causes by providing a working example incl. the texture, you would be getting better answers faster.

Anyway: note that textures are sampled at the center of texels and that 1.0 is outside the texture. What you see here is probably inaccuracies in the texture coordinates leading to these artifacts. Maybe.

1 Like

Can you try disabling filtering on the texture and see if the issue changes? I suspect @grml is correct. If you disable filtering on the texture with:

texture.minFilter = texture.magFilter = THREE.NearestFilter, and the line looks the same, that would probably confirm it.

You could also try to dilate/shrink the Uvs, via different settings of texture.repeat/texture.offset and see if it changes…

like… texture.offset.set(.001,0) and/or texture.repeat.set(.999,0.)

maybe it would better to use the IcosahedronGeometry with detail > 3 instead of SphereGeometry…

1 Like

Thanks, I use texture.wrapS = THREE.RepeatWrapping replacing calculate position in shader. It seems resolveing the problem.

1 Like