Швы на краях куба при использовании атласа текстур с three.js

У меня есть швы между горизонтальными гранями куба при использовании атласа текстур в three.js.
Это демо: http://jsfiddle.net/rnix/gtxcj3qh/7/ или http://jsfiddle.net/gtxcj3qh/8/ (из комментариев)

Скриншот проблемы: seams
Здесь я использую повтор и смещение:

    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 Пробовал другой атлас, результат тот же.

Я знаю, что я могу разделить атлас на отдельные файлы, и это прекрасно работает, но это не удобно.

Что не так?


person rNix    schedule 31.01.2016    source источник
comment
Не ответ, но немного улучшил вашу скрипку: jsfiddle.net/gtxcj3qh/8.   -  person WestLangley    schedule 31.01.2016
comment
Я расширил вашу скрипку и заставил ее работать, используя холст в качестве источника растрового изображения вместо изображения (jsfiddle.net/gtxcj3qh/ 14). Исходное изображение плитка за плиткой рисуется на отдельном холсте, который затем используется для создания отдельной текстуры. Я задал очень похожий вопрос здесь (заголовок stackoverflow.com/questions/43401684/) .. но вместо вашего подхода я создал пользовательскую UV-карту и одну текстуру .. , однако результат был таким же, как у вас.   -  person knee-cola    schedule 14.04.2017


Ответы (1)


Я думаю, что проблема заключается в проблеме фильтрации с текстурными листами. На границах изображения в текстурном листе графический процессор может выбрать тексель либо из правильного изображения, либо из соседнего изображения из-за ограниченной точности. Поскольку цвета обычно очень разные, это приводит к видимым швам. В обычных текстурах это решается с помощью CLAMP_TO_EDGE.

Если вы должны использовать псевдоним текстуры, вам нужно сымитировать поведение CLAMP_TO_EDGE, заполнив границы изображения. См. этот ответ https://gamedev.stackexchange.com/questions/61796/sprite-sheet-textures-picking-up-edges-of-adjacent-texture. Это должно выглядеть примерно так: (увеличены границы для ясности)

введите здесь описание изображения

В противном случае более простое решение — использовать разные текстуры для каждой грани. Webgl поддерживает текстуру куба и обычно используется в большинстве случаев для реализации скайбоксов.

person WacławJasper    schedule 31.01.2016
comment
Преувеличенные границы — не идеальное решение. Наверное, идеального решения вообще не существует. - person rNix; 01.02.2016
comment
Я согласен с тем, что преувеличенные края не являются хорошим решением, однако эта идея вдохновила меня на поиск решения этой проблемы. Решение состоит в том, чтобы расположить плитки таким образом, чтобы они были смежными с плитками, к которым они будут примыкать в 3D-объекте. Таким образом, их края будут соприкасаться с теми, которых они будут касаться в 3D-объекте. Более подробное описание этого решения можно найти здесь: stackoverflow.com/questions/43401684/ (это частично дублированный вопрос/ответ, поскольку использовался другой метод применения текстуры) - person knee-cola; 14.04.2017