Класс DebugDraw и его интерфейс

Класс DebugDraw предназначен для визуализации физической сцены в библиотеке Oimo.js. Он обеспечивает отладочную прорисовку объектов, соединений и столкновений, что позволяет наблюдать внутренние процессы симуляции без необходимости создавать полноценный рендеринг с использованием сторонних графических движков.

DebugDraw не влияет на физику сцены, его задача исключительно визуальная.

Основные возможности

  • Визуализация тел (RigidBodies): отображение положений и ориентаций всех тел в мире.
  • Контроль столкновений: показ контактных точек и норм столкновения.
  • Прямое управление цветом и стилем объектов: позволяет выделять разные типы тел разными цветами.
  • Интеграция с WebGL и Canvas: поддержка рендеринга через контекст HTML5 <canvas> или WebGL.

Создание экземпляра DebugDraw

Для работы с DebugDraw необходим доступ к объекту мира OIMO.World. Экземпляр создается с указанием контекста рисования:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const debugDraw = new OIMO.DebugDraw(ctx);

Параметры конструктора:

  • context — объект контекста Canvas или WebGL, куда будут отрисовываться объекты.
  • scale — коэффициент масштабирования координат (по умолчанию 1).
  • color — базовый цвет отрисовки объектов, может быть переопределен на уровне отдельных тел.

Настройка и методы

1. Привязка к миру

После создания экземпляра DebugDraw необходимо привязать его к физическому миру:

debugDraw.setWorld(world);

Где world — экземпляр OIMO.World. Привязка позволяет DebugDraw автоматически получать список тел и столкновений.

2. Отрисовка сцены

Метод draw() выполняет полный проход по всем телам и контактам сцены:

debugDraw.draw();

Внутри draw() происходит:

  • перебор всех тел RigidBody;
  • получение их позиции и ориентации;
  • выбор цвета для визуализации на основе типа или состояния;
  • прорисовка контактов и норм столкновения.

3. Настройка цвета и прозрачности

Для выделения разных тел применяются методы:

debugDraw.setColor(body, color);
debugDraw.setAlpha(body, alpha);
  • body — экземпляр RigidBody;
  • color — строка цвета ("#ff0000" или "rgba(255,0,0,0.5)");
  • alpha — уровень прозрачности (0.0–1.0).

Это позволяет визуально различать динамические, статические и кинематические объекты.

4. Визуализация контактных точек

DebugDraw может показывать точки контакта между телами. Для этого используется метод:

debugDraw.drawContacts();

Визуализируются:

  • положение контакта;
  • нормаль столкновения;
  • глубина проникновения.

Цвет и размер контактов можно настраивать отдельно для упрощения анализа столкновений.

Интеграция с анимационным циклом

Для динамического обновления сцены DebugDraw должен вызываться после шага физического мира:

function animate() {
    world.step();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    debugDraw.draw();
    requestAnimationFrame(animate);
}

animate();

Порядок вызовов важен: сначала шаг физики, затем очистка холста, после чего отрисовка всех объектов через DebugDraw.

Работа с различными типами тел

DebugDraw автоматически определяет форму тела и использует соответствующий метод визуализации:

  • Box — прорисовка прямоугольного параллелепипеда;
  • Sphere — окружность или сфера;
  • Cylinder — цилиндр;
  • Cone — конус.

Для каждого типа реализованы внутренние методы:

_debugDrawBox(body);
_debugDrawSphere(body);
_debugDrawCylinder(body);
_debugDrawCone(body);

Эти методы учитывают позицию, ориентацию и масштаб тела.

Расширение и кастомизация

Можно расширять класс DebugDraw для создания уникальных визуальных эффектов:

  • изменение цветов по скорости или массе тел;
  • подсветка тел при столкновении;
  • визуализация сил и импульсов, действующих на тела.

Пример добавления подсветки при столкновении:

world.bodies.forEach(body => {
    if(body.contacts.length > 0) {
        debugDraw.setColor(body, "#ff0000");
    }
});
debugDraw.draw();

Практические рекомендации

  • Использовать DebugDraw только для отладки, так как постоянная прорисовка всех объектов может снижать производительность.
  • Масштабировать координаты, если сцена слишком большая или маленькая для холста.
  • Обновлять контекст холста каждый кадр для корректного отображения движения.
  • Разделять цветовую маркировку тел по типу или физическим свойствам для удобства анализа.

Класс DebugDraw является мощным инструментом для понимания поведения физических тел в Oimo.js, предоставляя полный контроль над визуальной диагностикой сцены и взаимодействиями между объектами.

Оглавление