Учебник Babylon.js

Введение в Babylon.js и среду разработки
- Что такое Babylon.js и где он применяется
- Сравнение с Three.js, PlayCanvas и A-Frame
- Архитектура движка: ядро, модули, расширения
- Установка через npm и CDN
- Настройка проекта с Webpack и Vite
- Настройка проекта с TypeScript
- Babylon.js Playground: возможности и ограничения
- Структура минимального приложения
- Цикл рендеринга и render loop
- Отладка сцены: Inspector и консоль браузера
Сцена, движок и камеры
- Класс Engine: параметры инициализации и адаптация к canvas
- Антиалиасинг, соотношение пикселей и адаптивное разрешение
- Класс Scene: жизненный цикл и внутренние системы
- Очистка ресурсов: dispose и утечки памяти
- ArcRotateCamera: орбитальное вращение и настройка пределов
- FreeCamera: движение от первого лица
- FollowCamera и AnaglyphCamera
- UniversalCamera и TouchCamera для мобильных устройств
- Параметры камеры: fov, minZ, maxZ, inertia
- Управление активной камерой сцены
- Несколько камер и split-screen
- Frustum culling и оптимизация видимости
Освещение
- Типы источников света: Point, Directional, Spot, Hemispheric
- Интенсивность, цвет диффузного и зеркального отражения
- Параметр groundColor у HemisphericLight
- Дальность и затухание у PointLight и SpotLight
- Угол конуса и exponent у SpotLight
- Исключение мешей из расчёта света
- Динамические тени: ShadowGenerator
- Типы карт теней: shadow map, PCF, PCSS, Poisson
- Мягкие тени и параметр blurKernel
- Cascaded Shadow Maps для больших сцен
- Ограничения количества источников света
Меши и геометрия
- MeshBuilder: Box, Sphere, Cylinder, Plane, Ground
- Torus, TorusKnot, Disc, Ribbon, Tube
- Lathe, Polyhedron, Icosphere, Geodesic
- Extruded Shape и Extruded Polygon
- Параметры updatable и последующее обновление геометрии
- Импорт пользовательских форм через пути и полигоны
- Класс Mesh: position, rotation, scaling
- Pivot point и смещение центра вращения
- Родительские объекты и иерархия сцены
- Клонирование и инстансы мешей
- InstancedMesh и производительность
- Thin Instances для тысяч объектов
- Merge Meshes: объединение геометрии
- BoundingBox и BoundingSphere
- Видимость, isPickable, isVisible
- Freeze World Matrix для статических объектов
Материалы и текстуры
- StandardMaterial: диффузный, зеркальный, эмиссионный цвета
- AmbientColor и backFaceCulling
- Wireframe, pointsCloud и fillMode
- Загрузка текстур: Texture и CubeTexture
- UV-координаты: масштаб, смещение и поворот
- Mipmaps и Anisotropic Filtering
- DynamicTexture: рисование на canvas в реальном времени
- VideoTexture: воспроизведение видео на меше
- RenderTargetTexture: сцена как текстура
- MirrorTexture: отражения в реальном времени
- Многослойные текстуры и каналы смешивания
- PBR: физически корректный рендеринг
- PBRMetallicRoughnessMaterial
- PBRSpecularGlossinessMaterial
- Карты нормалей, металличности, шероховатости, AO
- Карта окружения и IBL (Image-Based Lighting)
- HDR-текстуры и конвертация в env-формат
- CustomMaterial и ShaderMaterial: свои шейдеры
- NodeMaterial: визуальный редактор шейдеров
- Граф нод NodeMaterial: входные, операционные и выходные блоки
- Передача uniform-переменных в шейдер
- Анимация параметров материала
- GradientMaterial, GridMaterial и другие материалы из библиотеки
Импорт и экспорт 3D-моделей
- Поддерживаемые форматы: glTF, GLB, OBJ, STL, Babylon
- SceneLoader.ImportMesh и ImportMeshAsync
- SceneLoader.Append и AppendAsync
- Загрузка из URL, Blob и ArrayBuffer
- Работа с результатами загрузки: meshes, skeletons, animationGroups
- Плагин-система загрузчиков
- Обработка ошибок и индикатор прогресса загрузки
- Оптимизация glTF: Draco-сжатие и KTX2-текстуры
- Экспорт сцены в glTF и GLB через GLTF2Export
- Сохранение и восстановление состояния сцены через Babylon-формат
Анимация
- Класс Animation: типы данных и режимы интерполяции
- Ключевые кадры и EasingFunction
- Встроенные функции плавности: Quadratic, Cubic, Bounce и др.
- Animatable: запуск, пауза, остановка и скорость
- AnimationGroup: синхронизация нескольких анимаций
- Скелетная анимация: Skeleton и Bone
- Weight-based blending скелетных анимаций
- AnimationGroup из импортированных glTF-файлов
- Морфинг: MorphTarget и MorphTargetManager
- Procedural animation через onBeforeRenderObservable
- Runtime-анимация через setInterval и deltaTime
- Particle animation и спрайт-анимация
Система частиц
- ParticleSystem: базовая настройка
- Эмиттеры: точка, сфера, бокс, цилиндр, конус, меш
- Параметры жизненного цикла: lifetime, emitRate, maxParticles
- Цвет, прозрачность и их градиенты
- Размер частиц и его изменение со временем
- Скорость, направление и угловое вращение
- Gravity и сила поля
- Текстуры частиц и анимированные спрайт-листы
- Режимы смешивания: additive, multiply, standard
- SubEmitters: цепочки эффектов
- GPUParticleSystem: миллионы частиц на GPU
- Сохранение и загрузка систем частиц
- Solid Particle System (SPS)
- SPS: обновление частиц через updateParticle
- SPS: пикабельность и коллизии между частицами
Физика
- Подключение физических движков: Cannon.js, Ammo.js, Havok
- PhysicsImpostor: типы и параметры
- Масса, трение, restitution
- Силы: applyForce, applyImpulse, setLinearVelocity
- Физические джоинты: HingeJoint, BallAndSocketJoint, SliderJoint
- PhysicsAggregate и Havok Plugin
- Compound bodies из нескольких импосторов
- Коллизии и события onCollide
- Raycast в физическом мире
- Статические, кинематические и динамические тела
- Отладка физических тел
Взаимодействие и ввод
- Система событий браузера и обёртки Babylon.js
- ActionManager: действия на мешах
- Встроенные действия: ExecuteCodeAction, PlayAnimationAction и др.
- Условия действий: ValueCondition, StateCondition
- Pointer события: PointerObservable и PointerInfo
- Пикинг: scene.pick и scene.multiPick
- PickingInfo: mesh, pickedPoint, normal, faceId
- Drag поведение: PointerDragBehavior
- SixDofDragBehavior для VR
- Клавиатурный ввод и KeyboardEventTypes
- Gamepads и контроллеры через GamepadManager
- Мультитач и жесты на мобильных устройствах
Пользовательский интерфейс (Babylon GUI)
- Подключение babylon-gui: FullscreenUI и TextureUI
- Container, Rectangle, Ellipse, Grid, StackPanel, ScrollViewer
- TextBlock: шрифт, выравнивание, перенос, тени
- InputText и InputPassword
- Button: состояния, события, кастомизация
- Image и ImageScrollBar
- Checkbox, RadioButton, SelectionPanel
- Slider и ImageBasedSlider
- VirtualKeyboard
- Привязка GUI-элементов к 3D-объектам: linkWithMesh
- Адаптивный GUI под разные разрешения
- XML Loader для GUI-разметки
Постпроцессинг и эффекты рендеринга
- PostProcess: базовая архитектура
- Встроенные эффекты: Blur, Sharpen, ChromaticAberration
- BlackAndWhite, Grain, Vignette, ColorCorrection
- ImageProcessing: экспозиция, контраст, LUT
- Tone Mapping: типы и настройка
- HighlightsLayer: подсветка объектов
- GlowLayer: свечение
- Lens Flare System
- DepthOfFieldEffect: боке и фокусное расстояние
- MotionBlurPostProcess
- ScreenSpaceReflectionsPostProcess
- SSAO2RenderingPipeline
- DefaultRenderingPipeline: комплексная постобработка
- Создание кастомного постпроцесса на GLSL
Шейдеры и GLSL
- Архитектура шейдерного пайплайна в Babylon.js
- ShaderMaterial: вершинный и фрагментный шейдеры
- Передача атрибутов, uniform и sampler
- Встроенные переменные: world, view, projection
- Effect и EffectFacade
- ShaderStore: хранение шейдеров по имени
- Shader Include и переиспользование блоков кода
- Работа с UV, нормалями и тангентами в шейдере
- Дисплейсмент и геометрические деформации
- Процедурные текстуры через ProceduralTexture
- Встроенные процедурные текстуры: Fire, Wood, Marble, Grass
- Compute Shader через ComputeShader API (WebGPU)
WebGPU
- Отличия WebGPU от WebGL
- Инициализация WebGPU-движка: WebGPUEngine
- Совместимость материалов и шейдеров
- Compute Shaders: структура и применение
- Storage Buffers и Uniform Buffers
- Ограничения и текущее состояние поддержки браузерами
- Производительность WebGPU vs WebGL
Оптимизация производительности
- Понимание render loop: CPU vs GPU bottleneck
- Профилирование через Inspector и Chrome DevTools
- Frustum culling и его настройка
- Occlusion Culling
- Level of Detail (LOD): addLODLevel
- Заморозка материалов: freeze и unfreeze
- Freeze World Matrix для статичной геометрии
- Оптимизация текстур: форматы, размеры, атласы
- Компрессия текстур: KTX2, Basis Universal
- Draco-сжатие геометрии
- Offscreen Canvas и многопоточный рендеринг
- SceneOptimizer: автоматические оптимизации
- Hardware Scaling Level
- Snapshots Rendering
Работа со звуком
- Babylon Sound: загрузка и воспроизведение
- Параметры: loop, autoplay, volume, playbackRate
- Пространственный звук: 3D positional audio
- Привязка звука к мешу через attachToMesh
- SoundTrack и микширование
- Анализ аудио через AudioContext и AnalyserNode
- Реакция визуализации на звук
Спрайты
- SpriteManager: параметры и текстурный атлас
- Sprite: позиция, размер, видимость
- Анимация спрайтов: playAnimation
- Billboard Mode и камера-ориентация
- Пикинг спрайтов
- Производительность: лимиты SpriteManager
Навигация и пути
- RecastJS Navigation Plugin
- Построение NavMesh из геометрии сцены
- Поиск пути: computePath
- Crowd Simulation: агенты и толпа
- Параметры агентов: скорость, ускорение, радиус
- Визуализация NavMesh для отладки
XR: виртуальная и дополненная реальность
- WebXR API и интеграция с Babylon.js
- WebXRDefaultExperience: быстрый старт
- WebXRSessionManager: управление сессией
- Режимы: immersive-vr, immersive-ar, inline
- WebXRCamera и стерео рендеринг
- Контроллеры: WebXRInputSource и WebXRAbstractMotionController
- Телепортация: WebXRMotionControllerTeleportation
- Near и far interaction: захват объектов
- Hand Tracking: отслеживание рук
- Hit Testing в режиме AR
- Plane Detection и Anchor System
- DOM Overlay в AR-режиме
- Оптимизация для VR: Fixed Foveated Rendering
Babylon Node Editor и вспомогательные инструменты
- Node Material Editor: интерфейс и экспорт
- Texture Inspector
- Scene Inspector: вкладки, дерево сцены, свойства
- Inspector: отладка физики, частиц, скелетов
- Babylon.js Sandbox: тестирование моделей
- Storybook-подход к разработке компонентов сцены
Архитектура и паттерны разработки
- Разделение логики на системы и компоненты
- SceneLoader как точка входа для модульных сцен
- Observer Pattern через Observable и Observer
- Менеджеры ресурсов: AssetsManager
- AssetContainer: изоляция и повторное использование наборов ресурсов
- Динамическая загрузка и выгрузка уровней
- Конечные автоматы для игровой логики
- Событийная шина на базе Observable
- Интеграция с React и Vue.js
- Интеграция с Angular
- Серверный рендеринг и headless-контекст