Technical briefing

How Ghost Pose Works

Body segmentation with BodyPix

Ghost Pose captures webcam frames and runs BodyPix segmentation to separate person pixels from background. A steel-blue mask overlay makes the segmentation visible.

Data pathway

Webcam

BodyPix

Silhouette

1) Segmenter initialization

BodyPix is loaded once with MobileNetV1 options tuned for performance in the browser.

BodyPix loader

segmenterPromise = bodyPix.load({
  architecture: "MobileNetV1",
  outputStride: 16,
  multiplier: 0.75,
  quantBytes: 2,
});

2) Frame-by-frame segmentation

Each animation frame estimates person pixels, then a mask is rendered over the camera feed.

Segmentation loop

const segmentation = await segmenter.segmentPerson(video, {
  internalResolution: "medium",
  segmentationThreshold: 0.7,
  maxDetections: 1,
});
drawGhostMask(canvas, video, segmentation);
window.requestAnimationFrame(step);

3) Mask rendering

BodyPix mask output is blended over the camera feed so the segmented silhouette stays readable.

Key takeaways

Webcam + ML runs client-side.

Segmentation quality depends on lighting and camera clarity.

Visual post-processing boosts legibility.

Back to experiment Browse all experiments