Учебник A-Frame

Введение в веб-VR и A-Frame
- Что такое A-Frame и зачем он нужен
- Место A-Frame в экосистеме WebXR
- Обзор возможностей и ограничений библиотеки
- Сравнение с Three.js, Babylon.js и нативным WebXR API
- Требования к браузеру и устройствам
- Установка и первый запуск
Архитектура и основные концепции
- Модель сцены: Scene Graph в A-Frame
- Система Entity-Component-System (ECS)
- Жизненный цикл сущностей и компонентов
- Связь A-Frame с Three.js под капотом
- Структура HTML-разметки A-Frame
- Глобальный объект AFRAME и его свойства
Примитивы и базовые объекты
- Примитив a-box
- Примитив a-sphere
- Примитив a-cylinder
- Примитив a-cone
- Примитив a-plane
- Примитив a-circle
- Примитив a-ring
- Примитив a-torus
- Примитив a-dodecahedron и прочие фигуры
- Примитив a-text
- Примитив a-image
- Примитив a-video
- Примитив a-videosphere
- Примитив a-sky
- Примитив a-curvedimage
- Примитив a-light
- Примитив a-camera
- Примитив a-cursor
- Примитив a-sound
- Примитив a-scene
Трансформации и система координат
- Система координат в WebGL и A-Frame
- Позиционирование: компонент position
- Вращение: компонент rotation и порядок осей
- Масштабирование: компонент scale
- Вложенность сущностей и наследование трансформаций
- Единицы измерения и масштаб сцены
Материалы и текстуры
- Компонент material: обзор свойств
- Цвет, прозрачность, сторонность (side)
- Схемы затенения: flat, phong, standard, toon
- Загрузка и применение текстур
- Текстурные карты: color map, normal map, roughness map, metalness map
- Компонент src и система ассетов
- Повтор текстуры: repeat и wrap
- Анимированные текстуры и видео-текстуры
- Wireframe-режим
- Пользовательские шейдеры через компонент shader
- Встроенный шейдер flat
- Встроенный шейдер standard (PBR)
- Написание собственного GLSL-шейдера
Система ассетов
- Элемент a-assets и зачем он нужен
- Предзагрузка ресурсов
- a-asset-item для моделей и данных
- img, audio, video внутри a-assets
- Управление событиями загрузки
- Таймаут загрузки и обработка ошибок
- Кэширование и повторное использование ассетов
- Использование data URI
Свет и освещение
- Типы источников света в A-Frame
- Ambient light
- Directional light
- Point light
- Spot light
- Hemisphere light
- Probe light
- Тени: настройка shadowMap
- Receiver и caster теней
- Влияние освещения на производительность
Камера и управление
- Компонент camera
- Поле зрения (fov), near и far плоскости
- Компонент look-controls: мышь и гироскоп
- Компонент wasd-controls
- Параметр active: несколько камер в сцене
- Ручное управление камерой через JavaScript
- Позиционирование rig-объекта
- Компонент embedded для встраивания в страницу
Курсор и взаимодействие с объектами
- Компонент cursor
- Raycasting: принцип работы
- Компонент raycaster: параметры и настройка
- События курсора: click, mouseenter, mouseleave, fusing
- Режим fuse (взгляд-клик)
- Intersection и intersectedEl
- Отключение курсора для отдельных объектов
- Лазерные указатели для контроллеров
Анимации
- Компонент animation
- Свойство property: что можно анимировать
- Параметры from, to, dur, delay
- Функции плавности (easing)
- Режимы повтора: loop, alternate
- Анимация по событию: startEvents, pauseEvents, resumeEvents
- Цепочки анимаций
- Анимация компонентов и вложенных свойств
- Синхронизация анимаций между сущностями
Система событий
- Браузерные DOM-события в контексте A-Frame
- Пользовательские события: emit и addEventListener
- Делегирование событий
- Передача данных через detail
- Системные события A-Frame: loaded, renderstart
- События сцены: enter-vr, exit-vr
- Событийная модель компонентов
Компоненты: создание и регистрация
- AFRAME.registerComponent: сигнатура и структура
- Схема компонента (schema)
- Типы данных в схеме: string, number, boolean, vec2, vec3, color, selector и другие
- Методы жизненного цикла: init, update, tick, tock, remove, play, pause
- Доступ к сущности и сцене из компонента
- Доступ к объекту Three.js через el.object3D
- Передача данных между компонентами
- Зависимости компонентов: dependencies
- Мультиэлементные компоненты
- Обновление схемы и атрибутов через setAttribute
- Отладка компонентов
Системы (Systems)
- AFRAME.registerSystem: назначение и отличие от компонентов
- Методы системы: init, tick, pause, play
- Глобальное состояние через системы
- Доступ к системе из компонента
- Взаимодействие систем между собой
Примитивы: создание собственных
- AFRAME.registerPrimitive: структура и параметры
- Маппинг атрибутов на компоненты
- Значения по умолчанию
- Наследование от существующих примитивов
Геометрия
- Компонент geometry: встроенные типы
- Параметры box, sphere, cylinder, plane, ring, torus и других
- Создание пользовательской геометрии: AFRAME.registerGeometry
- Прямой доступ к BufferGeometry Three.js
- Merge геометрий для оптимизации
- Использование геометрии без материала
Загрузка 3D-моделей
- Форматы моделей: glTF, GLB, OBJ, FBX
- Рекомендации по использованию glTF 2.0
- Компонент gltf-model
- Компонент obj-model
- Доступ к вложенным объектам модели
- Анимации внутри glTF-моделей
- Компонент animation-mixer
- Замена материалов у загруженных моделей
- Проблемы масштаба и ориентации моделей
- Оптимизация моделей перед импортом
Звук и пространственное аудио
- Компонент sound
- Параметры: src, autoplay, loop, volume, rolloffFactor
- Пространственный звук (positional audio)
- Управление воспроизведением через JavaScript
- Синхронизация звука с событиями
- Ограничения браузеров на автовоспроизведение
Текст и типографика
- Компонент text
- Параметры: value, font, color, align, width, wrapCount
- Встроенные шрифты MSDF
- Подключение пользовательских шрифтов
- Генерация SDF-шрифтов из TTF
- Размещение текста в пространстве
- Многострочный текст и перенос
- Производительность текстовых объектов
Среды и атмосфера
- Компонент a-sky и HDR-фоны
- 360-градусные изображения и видео
- Туман: компонент fog
- Цвет фона сцены
- Работа с cubemap-текстурами
Физика
- Обзор физических движков для A-Frame
- Подключение aframe-physics-system
- Компонент static-body
- Компонент dynamic-body
- Гравитация и масса
- Коллайдеры: box, sphere, hull, trimesh
- Импульсы и силы
- Отслеживание столкновений
- Ограничения и суставы
- Производительность физических симуляций
Контроллеры и VR-ввод
- Обзор WebXR Input API
- Компонент hand-controls
- Компонент vive-controls
- Компонент oculus-touch-controls
- Компонент windows-motion-controls
- Унифицированный компонент tracked-controls
- Получение событий кнопок и осей
- Лучевой ввод (ray input) с контроллеров
- Тактильная обратная связь (haptics)
- Позиционирование рук и телепортация
AR-режим и WebXR
- Отличие VR от AR в контексте A-Frame
- Hit testing: поиск поверхностей
- Компонент ar-hit-test
- Anchors и привязка к реальному миру
- Освещение из окружения (light estimation)
- DOM Overlay в AR-режиме
- Ограничения AR на разных устройствах
Производительность и оптимизация
- Профилирование сцены в браузере
- Stats-компонент и отслеживание FPS
- Инспектор A-Frame
- Batching геометрий: merge и instancing
- Уровни детализации (LOD)
- Occlusion culling и frustum culling
- Оптимизация текстур: размер, форматы, сжатие
- Compressed textures: KTX2 и Basis Universal
- Пул объектов (object pooling)
- Отключение tick у неактивных компонентов
- Ограничение количества источников света
- Рекомендации по полигональности моделей
- Использование instanced mesh
- Throttle в методе tick
Работа с JavaScript и DOM
- Получение элементов: querySelector и querySelectorAll
- setAttribute и getAttribute для компонентов
- Динамическое создание сущностей
- Клонирование объектов
- Удаление сущностей из сцены
- Прямой доступ к объектам Three.js
- Использование el.sceneEl
- Работа с системами через sceneEl.systems
- Модификация сцены вне цикла рендера
Инспектор и инструменты разработки
- Запуск визуального инспектора
- Навигация и выбор объектов в инспекторе
- Редактирование компонентов в реальном времени
- Экспорт сцены из инспектора
- Браузерные DevTools для отладки A-Frame
- Расширение A-Frame Inspector
Интеграция с фреймворками
- A-Frame и React: aframe-react и прямая интеграция
- A-Frame и Vue.js
- A-Frame и Angular
- A-Frame и Svelte
- Управление состоянием и реактивность
- Серверный рендеринг и ограничения SSR
Сеть и многопользовательский режим
- Обзор networked-aframe
- Синхронизация позиций и компонентов
- Адаптеры: WebSocket, WebRTC
- Аватары и представление пользователей
- Общее состояние и авторитетный сервер
- Latency и компенсация задержки
Публикация и деплой
- Структура проекта для продакшена
- Сборка через webpack и vite
- CDN-подключение vs npm-пакет
- HTTPS как обязательное условие для WebXR
- Оптимизация загрузки: gzip, brotli
- Progressive loading сцены
- Метатеги для VR-превью в соцсетях
- Тестирование на реальных устройствах