three.js - объекты подальше от камеры получают неровные текстуры

Я борюсь с текстурами на объектах, которые находятся немного дальше назад в сцене. Текстуры становятся очень зазубренными и создают эффект беспокойства при движении камеры. Я пытался изменить анизотропию, и я пытался изменить фильтры min и mag, но, похоже, ничего не помогло.

Код, который я использую для загрузки текстур (все текстуры имеют размер 1024 на 1024 пикселей):

var texture = new THREE.Texture();
var texloader = new THREE.ImageLoader(manager);
texloader.load('static/3d/' + name + '.jpg', function (image) {
    texture.image = image;
    texture.needsUpdate = true;
    texture.anisotropy = 1;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearMipmapLinearFilter;
});

Вы можете увидеть это в действии здесь: http://www.90595.websys.sysedata.no/

Источник

3 ответа

Гайтат не так, вам нужны мипмапы. Проблема с вашим кодом в том, что они не генерируются. Используя консоль, я обнаружил, что, хотя "generateMipmaps" в ваших текстурах установлено в "true", mipmaps не генерируются, как показано на этом снимке экрана: http://imgur.com/hAUEaur.

Я посмотрел на ваши текстуры и считаю, что мип-карты не были сгенерированы из-за того, что ваши текстуры не были степенью 2 (например, 128x128, 256x256, 512x512). Попробуйте сделать ваши текстуры ширины и высоты, которые имеют степень 2, и я думаю, что будут создаваться мип-карты, и они больше не будут выглядеть неровными.

Источник

По мере удаления объектов от камеры webgl использует автоматически создаваемые текстуры, называемые мипмапами. Это с более низким разрешением. Если они вам не нравятся, отключите их:

texture.generateMipmaps = false;
Источник

Хорошо. Поэтому я подумал, что перепробовал все разные фильтры mipmap, но, видимо, нет. Так вот что в итоге получилось:

texture.minFilter = THREE.NearestMipMapNearestFilter;
texture.magFilter = THREE.LinearMipMapLinearFilter;

Не нужно anisotropy совсем.

Источник
Другие вопросы по тегам