javascript42
Главная
Все учебники
Блог
Учебник Cannon.js
Введение в физическое моделирование на стороне клиента
Место Cannon.js среди других физических движков
Cannon.js и Cannon-es: выбор версии
Обзор архитектуры библиотеки
Установка и подключение к проекту
Математические основы
Векторы и операции над ними: Vec3
Кватернионы: Quaternion
Матрицы преобразований
Локальные и мировые системы координат
Единицы измерения и масштаб сцены
Числовая точность и накопление ошибок
Мир физики: World
Создание и настройка World
Гравитация: направление и величина
Широкофазовое и узкофазовое обнаружение столкновений
Шаг симуляции: fixedStep и накопленное время
Управление временным шагом и интерполяция
Производительность World: ограничение итераций решателя
Паузы, сброс и пересоздание мира
Тела: Body
Класс Body и его параметры
Типы тел: DYNAMIC, STATIC, KINEMATIC
Масса и момент инерции
Позиция, ориентация и их инициализация
Линейная и угловая скорость
Демпфирование: linearDamping и angularDamping
Засыпание тел: sleepState и пороги засыпания
Фиксация осей перемещения и вращения
Добавление и удаление тел из мира
Формы столкновений: Shape
Архитектура Shape и привязка к телу
Sphere
Cylinder
Plane
ConvexPolyhedron: создание из произвольной геометрии
Trimesh: меш-коллайдер и его ограничения
Heightfield: ландшафт из массива высот
Составные тела: несколько форм на одном Body
Смещение и поворот формы относительно тела
Выбор формы с учётом производительности
Материалы и контакты
Класс Material
ContactMaterial: трение и упругость между двумя материалами
Коэффициент трения: статическое и динамическое
Коэффициент восстановления (restitution)
Материал по умолчанию и defaultContactMaterial
Влияние контактного материала на стабильность стека
Типичные наборы материалов для игровых сцен
Обнаружение столкновений
Широкофазовые алгоритмы: NaiveBroadphase, SAPBroadphase, GridBroadphase
Сравнение широкофазовых методов по условиям задачи
AABB и OBB
Узкофазовое обнаружение: ContactEquation
Collision groups и collision masks: фильтрация столкновений
Событие collide: подписка и данные контакта
ContactPoint: нормаль, глубина проникновения, точки контакта
Производительность при большом числе тел
Силы и импульсы
Применение постоянной силы: applyForce
Применение импульса: applyImpulse
Применение крутящего момента: applyTorque
Локальные и мировые точки приложения силы
Гравитация отдельного тела
Ветер и аэродинамическое сопротивление вручную
Очистка накопленных сил
Ограничения: Constraint
Принцип работы ограничений в Cannon.js
PointToPointConstraint: шарнир
HingeConstraint: ось вращения и пределы угла
DistanceConstraint: фиксированное расстояние
LockConstraint: жёсткое соединение
ConeTwistConstraint
Добавление и удаление ограничений
Якорные точки в локальных координатах
Решатель ограничений и число итераций
Цепи и сочленённые конструкции
Пружины и мягкие связи
Реализация пружины без встроенного класса Spring
Класс Spring в Cannon-es
Жёсткость, затухание и натуральная длина
Применение пружин к колёсным подвескам
Системы верёвок и цепей на пружинах
Мягкие тела: приближения через сетку пружин
Транспортные средства
RaycastVehicle: архитектура и принцип работы
Добавление колёс: WheelInfo
Параметры подвески: stiffness, restLength, damping
Параметры фрикциона и сцепления колеса
Управление: газ, тормоз, руль
Ограничения скольжения и антипробуксовка
Отладка геометрии колёс
Особенности поведения на неровных поверхностях
RigidVehicle как альтернатива
Решатель и стабильность симуляции
GSSolver: параметры iterations и tolerance
SplitSolver: разбиение на независимые острова
Причины нестабильности: туннелирование, взрывы, джиттер
Настройка allowSleep для снижения нагрузки
Влияние шага симуляции на стабильность
Рекомендации по массам и геометриям для устойчивого стека
Continuous Collision Detection: ограничения Cannon.js
Интеграция с Three.js
Синхронизация position и quaternion
Вспомогательный цикл: requestAnimationFrame и физический шаг
Класс-обёртка для пары Body–Mesh
Менеджер физических объектов
CannonDebugger: визуализация коллайдеров
Импорт геометрии Three.js в ConvexPolyhedron
Импорт геометрии Three.js в Trimesh
Кинематические тела и анимированные объекты
Работа с InstancedMesh и физикой множества объектов
Лучи и запросы в пространстве
Ray и RaycastResult
Режимы рейкаста: ANY, CLOSEST, ALL
Коллизионные маски при рейкасте
Рейкаст от первого лица: детектирование земли
Физический пикинг мышью
Ограничения Trimesh при рейкасте
Событийная система
Встроенные события World: postStep, addBody, removeBody
Событие Body: collide, sleep, wakeup
Самостоятельная реализация EventEmitter-паттерна
Использование событий для игровой логики
Производительность и оптимизация
Профилирование физического цикла
Снижение числа активных тел через sleep
Пулинг тел и форм
Упрощение коллайдеров относительно визуальной геометрии
Замена Trimesh на ConvexPolyhedron или примитивы
Broadphase: выбор алгоритма под конкретную сцену
Динамическое удаление далёких тел
Многопоточность: Web Workers и передача состояния
Deterministic simulation и воспроизводимость
Отладка и инструменты
Визуализация AABB и форм вручную
Cannon-es-debugger и three-cannon-debugger
Логирование контактов и сил
Пошаговая симуляция для отладки
Тестирование физических сцен без рендерера
Типичные ошибки и способы их диагностики
Cannon-es: отличия и расширения
История форка и актуальность
Изменения API относительно оригинального Cannon.js
Новые возможности: TypeScript, улучшенный Spring, исправления
Переход с Cannon.js на Cannon-es
Экосистема: плагины и расширения сообщества