MeshDepthMaterial и MeshNormalMaterial

MeshDepthMaterial в Three.js предназначен для рендеринга глубины объектов сцены относительно камеры. Основное применение — генерация карт глубины для постобработки, теней или эффекта глубины резкости (depth of field).

Создание и базовое использование

const depthMaterial = new THREE.MeshDepthMaterial({
    depthPacking: THREE.RGBADepthPacking, // способ упаковки глубины
    wireframe: false,                     // отображение каркаса вместо поверхности
    alphaTest: 0.5                        // порог для прозрачных объектов
});

Ключевые параметры:

  • depthPacking Определяет, как глубина кодируется в цвете текстуры. Доступны варианты: THREE.BasicDepthPacking и THREE.RGBADepthPacking. Второй используется для более точного хранения дальности.

  • wireframe При значении true объект отображается как каркас, что удобно для отладки геометрии.

  • alphaTest Позволяет игнорировать пиксели с прозрачностью ниже указанного порога, что важно при работе с текстурами с альфа-каналом.

Использование с камерой

Часто MeshDepthMaterial применяется вместе с THREE.WebGLRenderTarget для получения карты глубины:

const renderTarget = new THREE.WebGLRenderTarget(width, height);
renderer.setRenderTarget(renderTarget);
scene.overrideMaterial = depthMaterial;
renderer.render(scene, camera);
scene.overrideMaterial = null;
renderer.setRenderTarget(null);

Здесь overrideMaterial временно заменяет все материалы сцены на depthMaterial, чтобы получить единообразную карту глубины.

Особенности и ограничения

  • Не учитывает текстуры, освещение или тени в привычном виде — материал ориентирован исключительно на геометрию и положение вершин.
  • Подходит для эффектов постобработки: глубина поля, SSAO, затирание объектов по расстоянию.
  • Сочетается с THREE.ShaderMaterial для создания кастомных эффектов глубины.

MeshNormalMaterial

MeshNormalMaterial используется для визуализации нормалей поверхности объекта. Он окрашивает каждый фрагмент в соответствии с направлением нормали, что упрощает анализ геометрии и отладку освещения.

Создание и параметры

const normalMaterial = new THREE.MeshNormalMaterial({
    flatShading: false,      // использование плоской затененности
    wireframe: false,        // отображение каркаса
    opacity: 1.0,            // прозрачность материала
    transparent: false       // включение прозрачности
});

Основные свойства:

  • flatShading При true нормали каждой грани одинаковы для всех её вершин, создается эффект “плоской” модели без плавного сглаживания.

  • wireframe Отображает только каркас, без заливки.

  • opacity и transparent Позволяют создавать прозрачные версии материала для комбинирования с другими визуальными эффектами.

Применение в отладке

MeshNormalMaterial отлично подходит для проверки нормалей при моделировании сложной геометрии:

const mesh = new THREE.Mesh(geometry, normalMaterial);
scene.add(mesh);

Цвета на поверхности будут меняться в зависимости от ориентации нормали относительно камеры:

  • Красный — X
  • Зеленый — Y
  • Синий — Z

Особенности

  • Материал не реагирует на освещение сцены, так как цвет определяется только нормалями.
  • Используется при визуализации нормалей для корректировки моделей перед применением освещения или шейдеров.
  • Может комбинироваться с прозрачными материалами для наложения на основную геометрию.

Сравнение MeshDepthMaterial и MeshNormalMaterial

Свойство / Материал MeshDepthMaterial MeshNormalMaterial
Освещение Игнорирует Игнорирует
Основная цель Глубина, постобработка Визуализация нормалей
Применение Карты глубины, тени, эффекты DOF Отладка геометрии, нормали
Зависимость от текстур Частично (alphaTest) Нет
Возможность wireframe Да Да
Подходит для кастомных шейдеров Да Да

Оба материала являются инструментами анализа сцены, не предназначенными для финального рендеринга с освещением и сложными материалами, но критически важными для визуализации данных о геометрии и глубине.

Практические советы

  1. С MeshDepthMaterial удобно использовать alphaTest, чтобы корректно обрабатывать текстуры с прозрачными участками.
  2. MeshNormalMaterial с flatShading: true помогает выявлять проблемные полигоны и артефакты при моделировании.
  3. Для генерации эффектов постобработки карту глубины можно сохранить в WebGLRenderTarget и передать в шейдеры, работающие с глубиной.
  4. Оба материала легко переключаются через scene.overrideMaterial, что упрощает отладку сложных сцен.
  5. Для комбинирования с другими эффектами можно использовать прозрачность или наложение wireframe.

Эти материалы являются базовыми инструментами Three.js для работы с геометрией, нормалями и глубиной, и их глубокое понимание позволяет создавать более сложные эффекты визуализации и постобработки.

Оглавление