Модель сцены: Scene Graph в A-Frame

A-Frame строит виртуальную реальность на основе WebVR и WebXR, предоставляя декларативный способ создания 3D-сцен с использованием HTML-подобного синтаксиса. Основой любой сцены является Scene Graph — иерархическая модель объектов, которая определяет, как сущности сцены взаимодействуют друг с другом и с пользователем.

Сущности и компоненты

В A-Frame базовой единицей сцены является <a-entity>. Любой объект сцены, будь то камера, свет, геометрическая фигура или пользовательский элемент, создается как сущность. Сущности могут иметь компоненты, которые описывают их поведение, внешний вид и взаимодействие:

  • Геометрия (geometry) — определяет форму объекта (box, sphere, plane и т.д.).
  • Материал (material) — управляет цветом, текстурой, прозрачностью и отражением.
  • Позиция (position), масштаб (scale), вращение (rotation) — ключевые трансформации в пространстве.
  • Анимация (animation) — задает динамическое изменение свойств во времени.
  • Кастомные компоненты — создаются для специфического поведения через JavaScript.

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

Иерархия объектов

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

<a-entity position="0 1 0">
  <a-box color="red" position="0 1 0"></a-box>
  <a-sphere color="blue" position="1 0 0"></a-sphere>
</a-entity>
  • Родительская сущность задает локальные координаты для всех дочерних элементов.
  • Дочерние объекты наследуют трансформации родителя: перемещение родителя перемещает все вложенные элементы.
  • Иерархия позволяет создавать сложные структуры, например, модели персонажей, транспортные средства или здания.

Камеры и точки обзора

Ключевой элемент сцены — камера (<a-camera>). Камера может быть самостоятельной сущностью или вложенной в другие объекты. Это дает возможность:

  • Создавать камеры с ограничением движения относительно сцены.
  • Реализовывать эффекты от первого лица, следование за объектом или динамические переходы между точками обзора.

Камеры используют компоненты, такие как look-controls и wasd-controls, для управления движением и вращением с клавиатуры и мыши.

Освещение

Освещение в Scene Graph влияет на все видимые объекты сцены:

  • Directional light — имитирует солнце, дает направленный свет.
  • Point light — источник света в одной точке, рассеивается по радиусу.
  • Spotlight — концентрированный световой конус.
  • Ambient light — равномерное освещение всей сцены без источника направления.

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

Коллизии и взаимодействие

A-Frame использует компоненты для обработки коллизий, взаимодействия с пользователем и физики. Популярные подходы:

  • aabb-collider — обнаружение столкновений по оси.
  • super-hands — для взаимодействия с объектами через контроллеры VR.
  • dynamic-body и static-body — физические свойства объектов через библиотеку Cannon.js.

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

Группировка и повторное использование

Scene Graph упрощает организацию сцены через группировку:

<a-entity id="tree-group" position="0 0 0">
  <a-entity geometry="primitive: box" material="color: brown" position="0 0 0.5"></a-entity>
  <a-entity geometry="primitive: cone" material="color: green" position="0 1 0"></a-entity>
</a-entity>
  • С помощью ID и классов можно манипулировать группами объектов через JavaScript.
  • Компоненты и анимации могут применяться к целым группам сразу.
  • Повторное использование шаблонов и префабов упрощает масштабирование больших сцен.

Рендеринг и оптимизация

Scene Graph напрямую влияет на производительность:

  • Количество сущностей и глубина дерева увеличивают нагрузку на WebGL.
  • Правильная иерархия позволяет минимизировать лишние расчеты трансформаций.
  • Использование instancing и объединение геометрий снижает количество draw calls.
  • Лодирование и удаление невидимых объектов помогают поддерживать плавный FPS.

Взаимодействие с JavaScript

Каждая сущность Scene Graph доступна через DOM и API A-Frame:

const box = document.querySelector('#myBox');
box.setAttribute('position', { x: 1, y: 2, z: 3 });
box.addEventListener('click', () => {
  console.log('Box clicked!');
});
  • Можно динамически добавлять и удалять объекты.
  • Управлять компонентами и событиями.
  • Создавать кастомные системы управления сценой и физикой.

Связь Scene Graph с WebXR

A-Frame Scene Graph автоматически интегрируется с WebXR:

  • Все объекты сцены отображаются в VR/AR режиме.
  • Камеры и контроллеры обеспечивают естественное взаимодействие с пространством.
  • Иерархия объектов позволяет использовать локальные и глобальные координаты для точного позиционирования в реальном пространстве.

Scene Graph является фундаментальной концепцией, которая объединяет все элементы A-Frame в единую, управляемую структуру. Он обеспечивает гибкость, расширяемость и оптимизацию сцен для веб-реальности.

Оглавление