THREE.js片段着色器实现纹理环绕平移时出现异常黑线如何解决

问题原因 #

1. Three.js默认启用纹理线性过滤，采样时会对目标坐标周围的像素做加权平均，实现平滑显示效果。
2. 你手动通过mod函数将UV坐标截断到0-1范围时，当采样点刚好处于0/1的边界位置，采样器无法感知你做了坐标环绕，跨边界插值时会和纹理默认的边缘填充色（透明/黑色）混合，就会出现深色线条。
3. 默认纹理的包裹模式为ClampToEdgeWrapping，超出0-1范围的坐标会被固定在边缘，进一步加剧了边界颜色异常。

解决方法 #

方案一：直接修改纹理配置（最推荐，适配当前平移环绕需求） #

将纹理的包裹模式设置为重复环绕，不需要在着色器内手动写mod逻辑，GPU会自动处理边界采样的衔接，从根源避免黑线问题。
在纹理加载完成后新增以下配置即可：

var background = new THREE.TextureLoader().load('https://wearablewearyphase.davidbrock1.repl.co/background.png');
// 新增配置开始
background.wrapS = THREE.RepeatWrapping;
background.wrapT = THREE.RepeatWrapping;
// 若不需要平滑效果，可改为最近点采样，彻底消除插值带来的边界问题
background.minFilter = THREE.NearestFilter;
background.magFilter = THREE.NearestFilter;
// 新增配置结束

修改后着色器内可以直接写：

gl_FragColor = texture(background, vec2(vUv.x + 0.47, vUv.y));

不需要再做mod计算。

方案二：适配自定义坐标计算场景 #

如果你必须从其他纹理读取采样坐标（比如你提到的双摆分形实现场景），可以给原始纹理手动增加1像素的衔接边：将纹理最左侧1列像素复制到最右侧，最右侧1列像素复制到最左侧，上下边缘同理。这样即使采样时出现跨边界插值，也会采样到正确的衔接色，不会出现黑线。

内容的提问来源于stack exchange，提问作者David Brock