THREE.js中着色器材料边缘的裂缝

Question

我正在使用着色器材料以预期的方式围绕圆环包裹矩形纹理，边缘粘合到边缘。问题是在边缘处，纹理没有完全环绕，并且有一个看起来像扫描的小发光裂缝。

我已经解决了问题并发现它在我的片段着色器中。我需要能够在我的实际程序中自由地移动uv值，所以我在片段着色器中有一些行来规范化uv值以使它们保持在0和1之间。但是，这会导致不幸的纹理裂缝。我无法理解为什么......在开始时不应该uv坐标介于0和1之间？即使没有任何旋转，这些线条也会导致裂缝。删除线条，没有裂缝......但是如果我旋转纹理我无法移除它们因为那时我得到了完全不受欢迎的效果。希望有人可以解释片段着色器中的这些线是如何导致裂缝的，以及我可以做些什么来实现相同的行为但避免裂缝，我是glsl的真正新手。

问题出现在下面，使用if语句。

  uniform sampler2D iChannel0;
  uniform float rotX;
  uniform float rotY;
        varying vec2 vUv;
        void main(){
    vec2 uv = vUv;
    uv.x = uv.x + rotX;
    uv.y = uv.y + rotY;
    if (uv.y > 1.)
                uv.y = uv.y -1.;
            if (uv.y < 0.)
                uv.y = uv.y + 1.;
            if (uv.x > 1.)
                uv.x = uv.x -1.;
            if(uv.x < 0.)
                uv.x = uv.x + 1.;
            gl_FragColor = texture2D(iChannel0, vec2(uv.x,uv.y));
        }

这是一个非常精炼的jsfiddle  再现问题并在圆环上显示子午线纹理旋转。