Receiver и caster теней

В библиотеке A-Frame система теней построена поверх графического движка Three.js и управляется через компонент shadow. Поддерживаются два базовых типа взаимодействия объектов с тенями:

  • caster — объект отбрасывает тень;
  • receiver — объект принимает тень.

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

Компонент shadow

Компонент подключается к любому объекту сцены:

<a-entity shadow="cast: true; receive: true"></a-entity>

Параметры:

Свойство Тип Назначение
cast boolean Отбрасывает ли объект тень
receive boolean Принимает ли объект тень

По умолчанию оба значения равны false.

Активация теней в сцене

Тени работают только при выполнении трёх условий:

  1. У источника света включена генерация теней.
  2. Объект-источник имеет cast: true.
  3. Объект-получатель имеет receive: true.

Пример базовой сцены:

<a-scene>
  <a-plane rotation="-90 0 0"
           width="10"
           height="10"
           color="#ccc"
           shadow="receive: true">
  </a-plane>

  <a-box position="0 1 -3"
         color="red"
         shadow="cast: true">
  </a-box>

  <a-light type="directional"
           position="0 10 5"
           intensity="1"
           castShadow="true">
  </a-light>
</a-scene>

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

Не все типы света поддерживают тени.

Поддержка теней:

  • directional
  • spot
  • point

Тип ambient не создаёт теней, так как освещает сцену равномерно.

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

<a-light type="directional"
         position="0 10 5"
         castShadow="true">
</a-light>

Параметр castShadow="true" обязателен для генерации теней.

Особенности caster-объектов

Объект, выступающий в роли caster:

  • участвует в расчёте карты теней;
  • увеличивает нагрузку на GPU;
  • должен иметь непрозрачный материал (прозрачность усложняет корректный рендеринг теней).

Пример:

<a-sphere position="0 2 -4"
          radius="1"
          color="#4CC3D9"
          shadow="cast: true">
</a-sphere>

Если объект находится вне зоны действия света, тень отображаться не будет.

Особенности receiver-объектов

Receiver — это поверхность, на которую проецируется тень.

Чаще всего:

  • пол;
  • стены;
  • статическая геометрия.

Пример:

<a-plane rotation="-90 0 0"
         width="20"
         height="20"
         material="color: #999"
         shadow="receive: true">
</a-plane>

Важно учитывать:

  • Материал должен поддерживать освещение.
  • При использовании shader: flat тени отображаться не будут.
  • Плоскость должна быть ориентирована корректно относительно источника света.

Технические аспекты работы теней

Shadow Map

A-Frame использует технику shadow mapping, реализованную в Three.js. Суть метода:

  1. Сцена рендерится с точки зрения источника света.
  2. Формируется карта глубины.
  3. При основном рендере выполняется проверка глубины для определения затенённых участков.

Это означает:

  • Чем выше разрешение карты теней, тем выше качество.
  • Увеличение качества повышает нагрузку.

Настройка качества теней

Параметры источника света позволяют управлять качеством.

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

<a-light type="directional"
         position="0 10 5"
         castShadow="true"
         shadow-mapWidth="2048"
         shadow-mapHeight="2048"
         shadow-camera-near="0.5"
         shadow-camera-far="50"
         shadow-camera-left="-20"
         shadow-camera-right="20"
         shadow-camera-top="20"
         shadow-camera-bottom="-20">
</a-light>

Основные параметры:

Параметр Назначение
shadow-mapWidth / shadow-mapHeight Разрешение карты теней
shadow-camera-near / far Диапазон глубины
shadow-camera-left/right/top/bottom Область охвата

Чем меньше область камеры теней, тем выше детализация в пределах этой области.

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

Тени — одна из самых затратных операций в WebGL.

Рекомендуется:

  • Ограничивать количество источников света с тенями.
  • Использовать тени только для ключевых объектов.
  • Снижать разрешение карты теней на мобильных устройствах.
  • Отключать cast у мелких или второстепенных объектов.

Пример оптимизации:

<a-entity shadow="cast: false; receive: true"></a-entity>

Распространённые проблемы

Тень отсутствует

Возможные причины:

  • Не включён castShadow у света.
  • У объекта отсутствует cast: true.
  • У поверхности отсутствует receive: true.
  • Объект находится вне зоны действия камеры теней.

Тень обрезается

Причина — слишком маленькая область shadow-camera-*.

Решение — расширить границы камеры теней.

Тень «лесенкой»

Причина — низкое разрешение shadow map.

Решение — увеличить shadow-mapWidth и shadow-mapHeight.

Динамические объекты и анимация

Тени корректно работают с анимацией и перемещением объектов. При изменении позиции caster-объекта карта теней пересчитывается в реальном времени.

Пример:

<a-box position="0 1 -3"
       shadow="cast: true"
       animation="property: position; to: 3 1 -3; dir: alternate; loop: true; dur: 2000">
</a-box>

При движении объект продолжает отбрасывать динамическую тень.

Кастомные компоненты и доступ к Three.js

Через системный объект сцены можно получить доступ к внутреннему экземпляру Three.js:

AFRAME.scenes[0].renderer.shadowMap.enabled = true;

Доступ к объекту:

const mesh = el.getObject3D('mesh');
mesh.castShadow = true;
mesh.receiveShadow = true;

Это позволяет управлять тенями на низком уровне, включая работу с кастомной геометрией и загруженными моделями.

Тени у glTF-моделей

При использовании gltf-model необходимо включать тени для вложенных мешей:

el.addEventListener('model-loaded', () => {
  el.getObject3D('mesh').traverse(node => {
    if (node.isMesh) {
      node.castShadow = true;
      node.receiveShadow = true;
    }
  });
});

Без этой процедуры модель может отображаться без теней, даже если компонент shadow указан.

Влияние материалов на тени

Материалы, основанные на освещении (например, стандартный material A-Frame), корректно работают с тенями.

Некоторые ограничения:

  • flat-шейдер не поддерживает освещение.
  • Полностью прозрачные объекты могут некорректно отбрасывать тень.
  • Полупрозрачные материалы требуют дополнительной настройки.

Мягкие тени

По умолчанию используется базовая фильтрация. Улучшение качества достигается настройкой типа карты теней в Three.js:

AFRAME.scenes[0].renderer.shadowMap.type = THREE.PCFSoftShadowMap;

Методы:

  • BasicShadowMap
  • PCFShadowMap
  • PCFSoftShadowMap

Мягкие тени повышают реалистичность сцены, но требуют больше вычислительных ресурсов.

Итоговое понимание механизма

Система теней в A-Frame базируется на комбинации:

  • источника света с включённой генерацией теней;
  • объектов-caster;
  • объектов-receiver;
  • корректной настройки области shadow camera;
  • оптимизации производительности.

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

Оглавление