Фильтрация: magFilter, minFilter и MipMap

В графике на основе WebGL фильтрация текстур играет ключевую роль в визуальном качестве сцены. Она определяет, как пиксели текстуры интерпретируются при масштабировании на поверхности объекта. В библиотеке Three.js управление фильтрацией реализовано через свойства magFilter, minFilter и использование MipMap.

Магнитуда фильтрации: magFilter

magFilter отвечает за фильтрацию текстуры при увеличении (масштабировании текстуры больше её исходного размера). Поддерживаются следующие режимы:

  1. THREE.NearestFilter

    • Выбор ближайшего пикселя (nearest neighbor).
    • Результат: резкое увеличение текстуры, пикселизация видна.
    • Используется для пиксельной графики или ретро-стиля.

  2. THREE.LinearFilter

    • Линейная интерполяция между ближайшими пикселями.
    • Результат: сглаживание при увеличении текстуры, плавные переходы цвета.
    • Оптимальный вариант для реалистичных материалов.

Пример применения:

const texture = new THREE.TextureLoader().load('texture.jpg');
texture.magFilter = THREE.LinearFilter; // сглаживание при увеличении

Важно: magFilter работает только при увеличении текстуры. Для уменьшения используется minFilter.

Минимизация текстуры: minFilter

minFilter отвечает за фильтрацию при уменьшении текстуры (когда текстура отображается меньше исходного размера). Минимизация критически влияет на качество и производительность, особенно при отображении объектов на дальнем плане.

Основные типы фильтрации:

  1. THREE.NearestFilter

    • Берётся ближайший пиксель без интерполяции.
    • Быстро, но могут возникнуть «мозаичные» артефакты.

  2. THREE.LinearFilter

    • Линейная интерполяция между пикселями.
    • Сглаженные края, но результат может быть слегка размытым.

  3. MipMap фильтры

    • Применяются для улучшенной минимизации и включают несколько уровней детализации текстуры:

      • THREE.NearestMipMapNearestFilter – ближайший пиксель из ближайшего уровня MipMap.
      • THREE.LinearMipMapNearestFilter – линейная интерполяция в пределах уровня MipMap.
      • THREE.NearestMipMapLinearFilter – ближайший пиксель из линейно интерполированных MipMap.
      • THREE.LinearMipMapLinearFilter – линейная интерполяция и между уровнями MipMap (наиболее плавный результат).

Пример:

texture.minFilter = THREE.LinearMipMapLinearFilter; // плавное уменьшение с MipMap

MipMap: многоуровневая детализация

MipMap — это предварительно сгенерированные версии текстуры с уменьшающимся разрешением (обычно каждый уровень половинного размера предыдущего). Использование MipMap позволяет:

  • Снизить мерцание и «aliasing» при удалении объектов.
  • Уменьшить нагрузку на графический процессор, так как используются текстуры меньшего размера.
  • Обеспечить плавное качество изображения при удалении объектов от камеры.

Создание MipMap в Three.js:

texture.generateMipmaps = true; // по умолчанию true для текстур с размерами степени 2
texture.minFilter = THREE.LinearMipMapLinearFilter;

Примечание: для текстур с размерами, не кратными степени 2, MipMap может не генерироваться автоматически, что повлияет на фильтрацию.

Взаимосвязь фильтров и производительности

  • THREE.NearestFilter – наименее требователен к ресурсам.
  • THREE.LinearFilter – немного дороже, но визуально мягче.
  • MipMap фильтры – обеспечивают лучшую визуализацию на дальних расстояниях, но требуют генерации дополнительных уровней текстуры, что увеличивает расход памяти.

Выбор фильтра зависит от типа сцены и приоритетов между качеством и производительностью.

Практические рекомендации

  1. Для пиксельной графики и спрайтов:

    texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;

  2. Для реалистичных материалов:

    texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.generateMipmaps = true;

  3. Для динамических текстур (например, canvas или видео) MipMap часто отключают:

    texture.generateMipmaps = false;
texture.minFilter = THREE.LinearFilter;

Использование magFilter, minFilter и MipMap позволяет тонко управлять визуальным качеством текстур, балансируя между плавностью отображения и производительностью в реальном времени.

Оглавление