Тени: настройка shadowMap

A-Frame использует движок Three.js для рендеринга 3D-сцен, и тени управляются через систему shadowMap. Тени добавляют глубину и реализм, но их настройка требует внимания к деталям, так как неправильные параметры могут приводить к размытию, “залипанию” объектов или падению производительности.

В A-Frame объекты могут отбрасывать тени (castShadow) и принимать тени (receiveShadow). Эти свойства применяются к компоненту <a-entity> с мешами:

<a-entity geometry="primitive: box" material="color: red"
          shadow="cast: true; receive: true"
          position="0 1 0"></a-entity>

Здесь ключевые моменты:

  • cast: true — объект отбрасывает тень.
  • receive: true — объект получает тень от других объектов.

Без этих свойств тень не появится, даже если источники света настроены правильно.

Источники света и их тени

В A-Frame тени работают только для направленных и точечных источников света, а также для спотовых (spot). Пример настройки направленного света с тенями:

<a-entity light="type: directional; color: #ffffff; intensity: 1; castShadow: true"
          position="5 10 5"></a-entity>

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

  • castShadow: true — включает генерацию тени.
  • shadow.mapSize.width и shadow.mapSize.height — разрешение карты теней (по умолчанию 512×512).
  • shadow.camera.near и shadow.camera.far — задают ближнюю и дальнюю плоскости камеры тени.
  • shadow.camera.left/right/top/bottom — границы ортографической камеры для directional light.

Пример с точечной настройкой карты теней:

<a-entity light="type: directional; castShadow: true; shadow.mapSize.width: 1024; shadow.mapSize.height: 1024; shadow.camera.near: 0.5; shadow.camera.far: 50"></a-entity>

Увеличение mapSize повышает детализацию теней, но увеличивает нагрузку на GPU.

Настройка shadowMap для всей сцены

A-Frame позволяет глобально настраивать тени через компонент shadow на <a-scene>:

<a-scene shadow="type: pcfsoft; autoUpdate: true">

  • type — алгоритм рендеринга тени:

    • basic — простой и быстрый, низкое качество.
    • pcf — сглаживание краев тени, более реалистично.
    • pcfsoft — мягкие, размытые края, максимально приближено к естественной тени.

  • autoUpdate — автоматическое обновление карты теней при движении объектов.

Важно учитывать, что PCF и PCFSoft потребляют больше ресурсов, особенно при высоком mapSize.

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

Тени в A-Frame могут сильно нагружать GPU. Основные методы оптимизации:

  1. Сократить количество объектов, отбрасывающих тень — castShadow должен быть включён только для ключевых элементов.
  2. Уменьшить разрешение карты теней — достаточно 512×512 для большинства сцен; 1024×1024 и выше стоит использовать только при необходимости.
  3. Настроить границы камеры теней (shadow.camera) — узкий диапазон улучшает чёткость и снижает лишние расчёты.
  4. Использовать мягкие тени выборочно — pcfsoft применяется к главным источникам света; второстепенные объекты могут использовать basic.

Пример:

<a-entity light="type: directional; castShadow: true;
                 shadow.mapSize.width: 512; shadow.mapSize.height: 512;
                 shadow.camera.left: -10; shadow.camera.right: 10;
                 shadow.camera.top: 10; shadow.camera.bottom: -10"></a-entity>

Продвинутые приёмы работы с тенями

  • Мягкие границы: комбинация pcfsoft и увеличенного mapSize создаёт естественные тени без резких контуров.
  • Динамические объекты: для движущихся объектов важно включать autoUpdate: true. Если объект статичен, autoUpdate: false уменьшает нагрузку.
  • Комбинированные источники света: для реалистичного освещения можно комбинировать directional light (основная тень) и ambient light (освещает сцену без теней).

Пример комплексного освещения:

<a-entity light="type: ambient; color: #888"></a-entity>
<a-entity light="type: directional; castShadow: true; shadow.mapSize.width: 1024;
                 shadow.mapSize.height: 1024; shadow.camera.left: -15;
                 shadow.camera.right: 15; shadow.camera.top: 15; shadow.camera.bottom: -15"
          position="10 20 10"></a-entity>

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

  • Для внутренних помещений рекомендуется меньший диапазон камеры теней и mapSize 512×512, чтобы избежать размытых и тяжелых теней.
  • Для открытых пространств лучше увеличить shadow.camera и mapSize 1024×1024 или выше.
  • Сочетание castShadow и receiveShadow должно быть тщательно продумано: лишние тени на мелких объектах создают визуальный шум.
  • Проверка на разных устройствах: мобильные платформы могут сильно страдать при использовании pcfsoft с большим mapSize.

Настройка shadowMap в A-Frame требует баланса между качеством и производительностью, понимания источников света и взаимодействия объектов сцены. Правильная комбинация castShadow, receiveShadow, параметров камеры теней и алгоритма рендеринга создаёт реалистичную сцену с оптимальной нагрузкой.

Оглавление