Швы на краях куба при использовании текстурного атласа с 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 (двойки) , Я также попробовал ручной UV-mapping вместо повтора, но результат тот же. Я использую 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 поддерживает текстуру куба и обычно используется большую часть времени для создания skyboxes.