Rotation-Invariant Distance Between 3D Face Landmarks in Browser Using @mediapipe/tasks-vision

[Muhammad Afshal]

Hi Team,

I'm currently working on a browser-based application using the @mediapipe/tasks-vision library to extract 3D face landmarks. I’m trying to calculate the distance between two specific landmarks: point 143 and point 372 (the outer corners of the left and right eyes, respectively).

Here’s the code I’m using with Three.js to compute the distance:
const distance = new THREE.Vector3(
  faces.faceLandmarks[0][143].x - faces.faceLandmarks[0][372].x,
  faces.faceLandmarks[0][143].y - faces.faceLandmarks[0][372].y,
  faces.faceLandmarks[0][143].z - faces.faceLandmarks[0][372].z
).length();

This approach gives reasonable results when the user is looking straight at the camera. However, when the user tilts or rolls their head, the measured distance increases noticeably, even though the physical distance between these two points on the face remains constant.

My question is:
How can I calculate a consistent, rotation-invariant distance between two facial landmarks using MediaPipe’s 3D face landmarks in a browser environment?

Any insights or recommendations would be greatly appreciated.
Best regards,
Muhammad Afshal