Skip to content

feat: implement real MediaPipe face mesh landmarks for improved glasses fitting (Fixes #2) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT] - #134

Open
waterWang wants to merge 2 commits into
mergeos-bounties:masterfrom
waterWang:feat/mediapipe-real-landmarks
Open

feat: implement real MediaPipe face mesh landmarks for improved glasses fitting (Fixes #2) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT]#134
waterWang wants to merge 2 commits into
mergeos-bounties:masterfrom
waterWang:feat/mediapipe-real-landmarks

Conversation

@waterWang

@waterWang waterWang commented Aug 2, 2026

Copy link
Copy Markdown

Summary

This PR implements real MediaPipe Face Mesh landmarks for glasses fitting, moving beyond the 2-point geometric fallback to use the full 478-point mesh from MediaPipe.

What changed

packages/tryon-js/src/fit.js

  • Added MP_LANDMARKS and MP_LANDMARK_GROUPS constants with landmark indices
  • Added faceMetricsFromMesh() — computes face metrics from full 478-point mesh:
    • Eye centers: average of iris + inner/outer corners (6 landmarks per eye)
    • Nose bridge: landmark 168 for vertical centering (more accurate than eye midpoint)
    • Face width: cheek-to-cheek distance for better overlay sizing
    • Face height: forehead-to-chin for head pose estimation
    • Confidence score: based on iris landmark detection

packages/tryon-js/src/overlay.js

  • drawGlassesOverlay() now prefers mesh-based metrics when full landmarks are available
  • Falls back gracefully to the 2-point geometric method

packages/web/assets/app.js

  • MediaPipe onResults stores the full landmarks array on the face object
  • Landmarks are cleared when switching to demo/geometric modes
  • Tracking badge shows landmark count (e.g. tracking: mediapipe - 478 pts)
  • Hint text updated to indicate real landmarks are active

Geometric fallback still works

When MediaPipe is unavailable (offline/CDN blocked), the app falls back to the existing geometric method with no changes.

Acceptance

  • Desktop screenshots (camera + demo)
  • Fallback works offline (no MediaPipe CDN)

Closes #2

waterWang added 2 commits July 25, 2026 02:01
- Add PD calibration wizard modal with credit card reference measurement
- Add calibrateFromReference() and estimatePd() math functions
- Add visual calibration UI with measure-from-face button
- Add 7 unit tests for calibration math (all pass)
- Add REFERENCE_CARD_WIDTH_MM constant (85.6mm, ISO/IEC 7810)

Fixes mergeos-bounties#7
…es fitting (Fixes mergeos-bounties#2)

- Add faceMetricsFromMesh() using 478 MediaPipe landmarks vs 2-point fallback
- Use iris center, inner/outer eye corners, nose bridge, and face contour
- Store full landmarks array on face object for mesh-based metrics
- Update overlay.js to prefer mesh-based metrics when available
- Clear landmarks on demo/geometric fallback transitions
- Show landmark count in tracking badge (e.g. 'tracking: mediapipe · 478 pts')
- Keep geometric fallback working offline
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[50 MRG] Web: MediaPipe Face Mesh real landmarks

1 participant