Учебник PlayCanvas

Введение в PlayCanvas
- Что такое PlayCanvas и его место в экосистеме WebGL
- Сравнение с другими игровыми движками: Three.js, Babylon.js, Unity WebGL
- Архитектура движка: редактор, runtime, облако
- Установка и настройка окружения
- PlayCanvas Editor vs чистый JavaScript SDK
- Структура проекта и файловая система
- Первый запуск: минимальное приложение на SDK
Основы JavaScript SDK
- Подключение библиотеки через CDN и npm
- Инициализация приложения: pc.Application
- Жизненный цикл приложения: initialize, update, postUpdate, destroy
- Цикл рендеринга и игровой цикл
- Система событий: pc.EventHandler, on, off, fire
- Менеджер ресурсов: pc.AssetRegistry
- Конфигурация canvas и адаптация под экран
Сцена и граф сущностей
- Концепция Entity-Component-System в PlayCanvas
- Класс pc.Entity: создание, иерархия, трансформации
- Корень сцены и управление деревом объектов
- Локальное и мировое пространство
- Методы поиска: findByName, findByTag, findByGuid
- Клонирование и уничтожение сущностей
- Теги: назначение, поиск, фильтрация
- Enabled/disabled: управление активностью сущностей и компонентов
Трансформации и математика
- Класс pc.Vec2: операции, применение
- Класс pc.Vec3: сложение, вычитание, нормализация, скалярное и векторное произведение
- Класс pc.Vec4 и однородные координаты
- Класс pc.Quat: кватернионы, интерполяция, euler-углы
- Класс pc.Mat4: матрица трансформации, умножение, инверсия
- Класс pc.Color: пространства цвета, альфа
- Класс pc.BoundingBox и pc.BoundingSphere
- Вспомогательные функции pc.math: lerp, clamp, degToRad, randRange
- Работа с пространствами: world, local, screen
Компоненты движка
- Компонент Camera: типы проекций, fov, near/far, viewport
- Компонент Light: точечный, направленный, прожектор, параметры затухания
- Компонент Model: подключение мешей, материалов
- Компонент Render: отличия от Model, batching
- Компонент RigidBody: типы тел, масса, трение, упругость
- Компонент Collision: примитивы, меши, триггеры
- Компонент Script: подключение пользовательской логики
- Компонент Animation и Anim: воспроизведение, состояния
- Компонент AudioSource и AudioListener
- Компонент Particle System: базовые параметры
- Компонент Screen и Element: UI в сцене
- Компонент LayoutGroup и LayoutChild
- Компонент ScrollView
- Компонент Button и ProgressBar
- Компонент Zone и LightProbe
Скрипты и пользовательская логика
- Архитектура скриптов PlayCanvas: Script Type
- Регистрация скрипта: pc.createScript
- Атрибуты скрипта: типы, редактирование в Editor, инициализация
- Жизненный цикл скрипта: initialize, postInitialize, update, postUpdate, swap, destroy
- Обмен данными между скриптами
- Ссылки на сущности и компоненты из скрипта
- Порядок выполнения скриптов
- Горячая замена скриптов (hot reload) в редакторе
- Отладка скриптов: breakpoints, console, инспектор
Ресурсы и загрузка
- Типы ресурсов: texture, material, model, animation, audio, script, json, binary, font, shader
- AssetRegistry: регистрация, поиск, удаление
- Загрузка ресурсов по имени, тегу, id
- Preload vs on-demand загрузка
- Asset Bundle: группировка, преимущества
- Callbacks и Promise при загрузке
- Отслеживание прогресса загрузки
- Управление памятью: выгрузка ресурсов
- Работа с внешними URL
Материалы и шейдеры
- Стандартный материал: pc.StandardMaterial
- PBR-параметры: albedo, metalness, roughness, emissive, opacity
- Карты текстур: diffuse, normal, specular, ao, lightmap, emissive
- Настройка UV-тайлинга и смещения
- Blending: прозрачность, режимы смешивания
- Culling: front, back, none
- Depth test и depth write
- Унифицированный интерфейс чанков шейдера
- Чанки: переопределение частей стандартного шейдера
- Пользовательские шейдеры: pc.Shader, pc.ShaderDefinition
- GLSL в PlayCanvas: uniforms, attributes, varyings
- Передача uniforms из JavaScript
- Материал pc.BasicMaterial
- Материал для частиц
- Обновление материалов в runtime
Текстуры и атласы
- Класс pc.Texture: параметры создания
- Форматы пикселей: RGB8, RGBA8, DXT, ETC, ASTC, BASIS
- Mipmaps: автоматические и ручные
- Фильтрация: nearest, linear, anisotropic
- Wrap mode: clamp, repeat, mirror
- Рендер-текстуры: pc.RenderTarget
- Использование canvas как источника текстуры
- Динамическое обновление текстур
- Текстурные атласы и спрайты
- Класс pc.Sprite и pc.SpriteAnimation
Освещение и тени
- Типы источников света и их параметры
- Физически корректное освещение
- Динамические тени: cascades, softness, bias
- Lightmaps: запекание, применение
- Ambient occlusion
- Environment map: cubemap, octahedron
- HDR и tonemapping
- Probe-освещение: Light Probe, Reflection Probe
- Ограничение количества источников на сцене
- Оптимизация освещения: static/dynamic разделение
Камера и виды
- Настройка перспективной камеры
- Ортографическая камера
- Управление viewport и рендер-слоями
- Несколько камер: порядок рендеринга, render order
- Постэффекты: подключение и написание
- Встроенные постэффекты: bloom, SSAO, DOF, vignette, FXAA
- Класс pc.CameraComponent: screenToWorld, worldToScreen
- Raycasting из камеры
- Cubemap-камера
Физика
- Подключение физического движка Ammo.js
- Типы тел: static, dynamic, kinematic
- Форма коллайдера: box, sphere, capsule, cylinder, cone, mesh, compound
- Настройка физических материалов: friction, restitution
- Применение сил и импульсов
- Constraints: хinge, point-to-point, cone twist, generic
- Обнаружение коллизий: события collision, contact, triggerenter, triggerleave
- Raycasting в физическом пространстве
- Групповые маски коллизий
- Настройка гравитации
- Оптимизация физической симуляции
Анимация
- Классическая система Animation: клипы, playback
- Система Anim: конечный автомат, граф состояний
- Anim State Graph: состояния, переходы, условия, параметры
- Переходы: blend time, условия, прерывания
- Анимационные слои и маскирование костей
- Программное управление параметрами графа
- Скинированные меши: Skin, Skeleton
- Morphing: blend shapes, управление весами
- Процедурная анимация через скрипты
- Tweening: создание и использование
- Синхронизация анимации с физикой
Звук
- Инициализация аудиосистемы
- Компонент AudioSource: позиционный и не позиционный звук
- Компонент AudioListener
- Управление воспроизведением: play, pause, stop, loop
- Параметры 3D-звука: rolloff, distanceMax, distanceRef
- Группы слотов и приоритеты
- Динамическая загрузка и воспроизведение звука
- Web Audio API в связке с PlayCanvas
- Управление общей громкостью
Пользовательский интерфейс
- Иерархия Screen-Element: world vs screen space
- Типы Element: image, text, group
- Якоря и pivot: адаптивная верстка
- Масштабирование UI под разные разрешения
- Компонент Button: события clicked, hover, pressed
- Компонент ScrollView: прокрутка контента
- Шрифты: bitmap и msdf, импорт
- Локализация текста
- Компонент LayoutGroup: вертикальный и горизонтальный
- Input-события на элементах: mousedown, touchstart
- ProgressBar: настройка и обновление
- Построение инвентаря и HUD через Script
Ввод и управление
- Класс pc.Keyboard: keydown, keyup, isPressed, wasPressed
- Класс pc.Mouse: movementX/Y, кнопки, колесо
- Класс pc.TouchDevice: touches, события
- Класс pc.GamePads: axes, buttons, вибрация
- Pointer Lock API в PlayCanvas
- Объединение ввода в единый контроллер
- Жесты: pinch, swipe, tap
- Чувствительность и сглаживание ввода
Рендер-пайплайн и слои
- Архитектура слоёв: pc.Layer, pc.LayerComposition
- Порядок отрисовки: opaque, transparent, immediate
- Ручное управление составом слоёв
- Sublayers: front-to-back, back-to-front
- Добавление объектов в конкретный слой
- Excluded cameras и видимость слоёв
- Forward renderer vs clustered lighting
- Immediate rendering: drawLine, drawWireBox
Оптимизация производительности
- Статический и динамический batching
- Инстансинг: pc.MeshInstance, drawCall
- LOD: уровни детализации, pc.LODGroup
- Occlusion culling
- Frustum culling: автоматика и ручное управление
- Управление drawcalls: профилирование
- Оптимизация текстур: атласы, форматы сжатия
- GPU skinning
- Ограничение физических шагов
- Object pooling: реализация на скриптах
- Профайлер PlayCanvas: счётчики, графики
- Memory leaks: обнаружение и устранение
Работа с графикой низкого уровня
- Класс pc.GraphicsDevice
- Создание буферов: pc.VertexBuffer, pc.IndexBuffer
- Формат вершин: pc.VertexFormat
- Класс pc.Mesh: ручное создание геометрии
- Обновление геометрии в runtime
- Рендеринг пользовательских примитивов
- Transform feedback
- Compute: возможности и ограничения
- Работа с WebGL extensions через PlayCanvas
Процедурная генерация
- Генерация меша из кода
- Построение terrain: heightmap, сетка
- Создание геометрии дорог и кривых
- Динамическая генерация UV
- Алгоритмы шума: Perlin, Simplex в проекте
- Процедурные материалы через uniforms
- Генерация инстансов на поверхности
- Процедурные деревья и растительность
Частицы и визуальные эффекты
- Редактор Particle System: emitter, shape, over lifetime
- Параметры частиц: скорость, размер, цвет, прозрачность, вращение
- Текстурные анимации частиц: flipbook
- Мировое и локальное пространство частиц
- Взаимодействие с физикой
- Программное управление системой частиц
- Трейлы: настройка и применение
- Постэффекты как часть VFX-пайплайна
Работа с сетью
- XMLHttpRequest и Fetch API в скриптах
- WebSocket: реализация реального времени
- Синхронизация состояния сущностей
- Интерполяция и предсказание позиций
- Сериализация данных: JSON, бинарные форматы
- Colyseus и PlayCanvas: интеграция
- Многопользовательское управление вводом
Мобильная разработка
- Особенности WebGL на мобильных браузерах
- Адаптация ввода: touch vs mouse
- Производительность на слабых устройствах
- Pixel ratio и retina-экраны
- Ориентация экрана: landscape, portrait
- PWA и fullscreen API
- Ограничения аудио на iOS
- Тестирование на устройствах
Сборка и деплой
- Экспорт проекта из Editor
- Самостоятельная сборка через SDK без Editor
- Настройка webpack и bundler для проекта
- Минификация и tree-shaking
- Загрузка на собственный хостинг
- iframe-встраивание
- Управление кешированием ресурсов
- Деплой на PlayCanvas Hosting
- CI/CD для PlayCanvas-проектов