使用带有three.js的纹理图集时，在立方体边缘上接缝

Question

当在three.js中使用纹理图集时，我在立方体的水平面之间有接缝 这是演示：http://jsfiddle.net/rnix/gtxcj3qh/7/或http://jsfiddle.net/gtxcj3qh/8/（来自评论）

问题的屏幕截图：
这里我使用重复和偏移：

    var materials = [];
    var t = [];
    var imgData = document.getElementById("texture_atlas").src;
    for ( var i = 0; i < 6; i ++ ) {
      t[i] = THREE.ImageUtils.loadTexture( imgData ); //2048x256
      t[i].repeat.x  = 1 / 8;
      t[i].offset.x = i / 8;
      //t[i].magFilter = THREE.NearestFilter;
      t[i].minFilter = THREE.NearestFilter;
      t[i].generateMipmaps = false;
      materials.push( new THREE.MeshBasicMaterial( { map: t[i], overdraw: 0.5 } ) );
    }

    var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024), new THREE.MeshFaceMaterial(materials) );
    skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
    scene.add( skyBox );

该地图集的大小为2048x256（2的幂）。我也试过手动UV映射而不是重复，但结果是一样的。我使用8个瓷砖而不是6个瓷砖，因为我认为1/6的精度导致了问题，但没有。

此行上的像素来自地图册中的下一个图块。我尝试了完整的白色地图册，没有任何人工制品。这解释了为什么Z面的垂直边界上没有接缝。我玩过滤器，wrapT，wrapS和mipmaps但它没有帮助。提高分辨率无济于事。有8192x1024地图集http://s.getid.org/jsfiddle/atlas.png我尝试了另一张地图册，结果是一样的。

我知道我可以将地图册拆分成单独的文件，但效果很好，但不方便。

怎么了？

Answer 1

我认为问题是纹理表的过滤问题。在纹理表中的图像边界上，由于精度有限，gpu可以从正确的图像或邻居图像中拾取纹素。由于颜色通常非常不同，因此会产生可见的接缝。在常规纹理中，这可以通过CLAMP_TO_EDGE来解决。

如果必须使用纹理别名，则需要通过填充图像边框来伪造CLAMP_TO_EDGE行为。请参阅此答案https://gamedev.stackexchange.com/questions/61796/sprite-sheet-textures-picking-up-edges-of-adjacent-texture。它应该看起来像这样:(为了清晰起见，夸张的边框）

否则，更简单的解决方案是为每个面使用不同的纹理。 Webgl支持立方体纹理，并且通常在大多数情况下用于实现天空盒。