Текстурные карты: color map, normal map, roughness map, metalness map

В A-Frame текстурные карты используются для создания реалистичных материалов на 3D-объектах. Каждая карта несёт уникальную информацию о свойствах поверхности и напрямую влияет на визуальное восприятие модели. Библиотека строится поверх Three.js, поэтому понимание базовой логики работы текстур совпадает с принципами WebGL и PBR (Physically Based Rendering).

Color Map

Color map (или diffuse map) отвечает за базовый цвет объекта. Это изображение, которое «накладывается» на поверхность модели и определяет её визуальную окраску. В A-Frame color map подключается через атрибут src в компоненте material:

<a-box position="0 1 -3" width="2" height="2" depth="2"
       material="src: url(textures/wood_color.jpg);">
</a-box>

Ключевые моменты работы:

Формат текстуры: JPEG, PNG, иногда WebP.
Если объект сложной геометрии, рекомендуется использовать UV-развёртку, чтобы карта корректно отображалась.
Цветовая карта не содержит информации о светотени или отражениях — только о цвете поверхности.

Normal Map

Normal map создаёт иллюзию рельефа на поверхности без добавления дополнительных полигонов. Она задаёт направление нормалей каждой точки модели, что позволяет свету реагировать так, будто объект имеет микрорельеф. В A-Frame подключение выглядит так:

<a-sphere position="0 1.5 -4" radius="1.5"
          material="src: url(textures/metal_color.jpg);
                    normalMap: url(textures/metal_normal.jpg);">
</a-sphere>

Особенности нормалей:

Используется цветовая кодировка: красный канал — отклонение по X, зелёный — по Y, синий — по Z.
Normal map усиливает визуальную детализацию без роста полигональности, что важно для производительности.
Совмещается с roughness и metalness картами для реалистичных материалов.

Roughness Map

Roughness map определяет шероховатость поверхности и то, насколько она рассеивает отражённый свет. В PBR моделях это ключ к контролю блеска. В A-Frame подключается через roughnessMap:

<a-plane position="0 0 -3" rotation="-90 0 0" width="5" height="5"
         material="src: url(textures/floor_color.jpg);
                   roughnessMap: url(textures/floor_roughness.jpg);
                   roughness: 1;">
</a-plane>

Свойства roughness map:

Белые участки — максимальная шероховатость, свет рассеивается.
Чёрные участки — гладкая поверхность, сильные отражения.
Можно сочетать с metalnessMap для создания поверхностей металлов и полированных объектов.

Metalness Map

Metalness map управляет металлической природой материала. В PBR-материалах значение 0 — неметалл, 1 — чистый металл. В A-Frame используется через атрибут metalnessMap:

<a-cylinder position="2 1 -3" radius="0.5" height="2"
            material="src: url(textures/metal_color.jpg);
                      metalnessMap: url(textures/metal_metalness.jpg);
                      metalness: 1;">
</a-cylinder>

Принципы работы:

Металлы отражают свет почти полностью и окрашивают отражение в цвет самой поверхности.
Неметаллические объекты используют diffuse (color) карту для цвета.
Обычно комбинируется с roughness map для контроля блеска.

Совмещение карт для реализма

В современных PBR-материалах все карты работают совместно:

Color map — основная окраска.
Normal map — микрорельеф, создаёт реалистичные тени.
Roughness map — распределение блеска по поверхности.
Metalness map — металлическая природа объекта, влияет на отражения.

Пример полного материала:

<a-sphere position="0 1.5 -4" radius="1.5"
          material="src: url(textures/metal_color.jpg);
                    normalMap: url(textures/metal_normal.jpg);
                    roughnessMap: url(textures/metal_roughness.jpg);
                    metalnessMap: url(textures/metal_metalness.jpg);
                    roughness: 0.5;
                    metalness: 1;">
</a-sphere>

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