У меня есть швы между горизонтальными гранями куба при использовании атласа текстур в 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-отображение вместо повторения, но результат тот же. Я использую 8 плиток вместо 6, потому что я думал, что точность деления 1/6 вызывает проблему, но это не так.
Пиксели в этой строке взяты из следующего тайла в атласе. Пробовал полностью белый атлас, артефактов не было. Это объясняет, почему на вертикальных границах Z-граней нет швов. Я играл с фильтрами, wrapT, wrapS и mipmaps, но это не помогает. Увеличение разрешения не помогает. Существует атлас 8192x1024 http://s.getid.org/jsfiddle/atlas.png Пробовал другой атлас, результат тот же.
Я знаю, что я могу разделить атлас на отдельные файлы, и это прекрасно работает, но это не удобно.
Что не так?