Структура данных: skeleton и keypoints

Библиотека ml5.js предоставляет удобный интерфейс для работы с моделями машинного обучения в браузере, включая работу с позами человека через модель PoseNet. Основными структурами данных, используемыми для представления скелета и ключевых точек тела, являются объекты skeleton и keypoints. Их понимание критично для точного анализа и визуализации данных о позах.


Keypoints

Keypoints — это массив объектов, каждый из которых описывает отдельную ключевую точку человеческого тела, обнаруженную моделью PoseNet. Каждая точка содержит несколько важных свойств:

  • part — строка, указывающая на часть тела. Возможные значения: "nose", "leftEye", "rightEye", "leftEar", "rightEar", "leftShoulder", "rightShoulder", "leftElbow", "rightElbow", "leftWrist", "rightWrist", "leftHip", "rightHip", "leftKnee", "rightKnee", "leftAnkle", "rightAnkle".

  • position — объект с координатами точки:

    • x — координата по горизонтали.
    • y — координата по вертикали.
  • score — числовое значение уверенности модели в обнаружении данной точки (0–1). Чем выше значение, тем точнее предсказание.

Пример структуры одного ключевого элемента:

{
  part: "leftWrist",
  position: { x: 320, y: 240 },
  score: 0.92
}

Особенности использования keypoints:

  • Позволяют визуализировать каждую отдельную точку тела на холсте с помощью методов ellipse, circle или point.
  • Используются для анализа движений и вычисления углов между суставами.
  • Могут фильтроваться по score, чтобы исключить низкоуверенные предсказания.

Skeleton

Skeleton — это массив пар ключевых точек, которые соединяются для визуализации структуры скелета. Каждый элемент массива представляет собой пару точек [part1, part2], где каждая точка — объект из массива keypoints.

Пример структуры элемента skeleton:

[
  { part: "leftShoulder", position: { x: 150, y: 200 }, score: 0.95 },
  { part: "leftElbow", position: { x: 180, y: 250 }, score: 0.9 }
]

Особенности работы с skeleton:

  • Обеспечивает визуальное соединение ключевых точек для создания каркаса фигуры.
  • Используется для анимации движения и отслеживания поз.
  • Часто применяется вместе с keypoints для расчета длины сегментов тела и углов между суставами.

Взаимосвязь keypoints и skeleton

  1. Генерация скелета: skeleton формируется на основе заранее определенных связей между keypoints. Например, соединяются:

    • Левое плечо — левый локоть
    • Левый локоть — левое запястье
    • Правое бедро — правое колено
    • Нос — левое/правое глазо
  2. Управление визуализацией: при отрисовке на холсте сначала выводятся все keypoints, затем соединяются линии между ними согласно skeleton. Такой порядок позволяет создавать точную и информативную визуализацию позы.

  3. Фильтрация по уверенности: линии в skeleton обычно рисуются только если обе точки пары имеют score выше заданного порога, что исключает ошибки в отображении.


Практические аспекты

  • Оптимизация: для реального времени рекомендуется отрисовывать только ключевые сегменты скелета или фильтровать keypoints по score.
  • Аналитика движений: вычисление углов между сегментами скелета позволяет создавать метрики для спорта, йоги или физиотерапии.
  • Интерактивные приложения: keypoints и skeleton используются в играх, интерфейсах управления жестами и генерации анимаций персонажей.

Пример использования

poseNet.on('pose', (results) => {
  if (results.length > 0) {
    const pose = results[0].pose;
    const keypoints = pose.keypoints;
    const skeleton = results[0].skeleton;

    // Отрисовка keypoints
    keypoints.forEach(point => {
      if (point.score > 0.5) {
        ellipse(point.position.x, point.position.y, 10, 10);
      }
    });

    // Отрисовка skeleton
    skeleton.forEach(bone => {
      line(
        bone[0].position.x, bone[0].position.y,
        bone[1].position.x, bone[1].position.y
      );
    });
  }
});

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