If you have ever worked with MediaPipe Face Mesh, you know the feeling: you need the index for the left eye corner, you know it exists somewhere in those 478 points, but finding it means scrolling through documentation or guessing until something looks right.

This page is the reference I wish existed when I started building face-controlled browser games. Every facemesh landmark number, grouped by region, with code you can copy straight into your project. Consider it a complete face mesh indices cheat sheet.

Quick Lookup: Most Searched Landmarks

These are the indices developers search for most often. If you came here from Google, this is probably what you need.

// Quick access to the most-used landmarks
const landmarks = results.faceLandmarks[0];

const leftEyeOuter  = landmarks[33];
const rightEyeOuter = landmarks[263];
const mouthLeft      = landmarks[61];
const mouthRight     = landmarks[291];
const upperLip       = landmarks[13];
const lowerLip       = landmarks[14];
const noseTip        = landmarks[4];
const chin           = landmarks[152];

Try It: Interactive Landmark Explorer

Want to see these landmarks on your own face? The explorer below lets you hover over any of the 478 points, filter by region, and copy indices straight from the interface.

Open Face Mesh Explorer in Fullscreen

All 478 Landmarks by Face Region

MediaPipe Face Mesh divides the face into 478 landmark points. Below they are grouped by region so you can find what you need without scanning the entire mesh.

Eyes (Landmarks for Eye Tracking and Blink Detection)

The eye region uses the most landmarks of any area because of the detail needed for iris and eyelid tracking.

Left Eye Contour

Right Eye Contour

Left Iris

Right Iris

// Blink detection using eye aspect ratio
function getEyeAspectRatio(landmarks, side) {
  if (side === 'left') {
    const upper = landmarks[159]; // upper eyelid center
    const lower = landmarks[145]; // lower eyelid center
    const outer = landmarks[33];  // outer corner
    const inner = landmarks[133]; // inner corner

    const vertical = Math.abs(upper.y - lower.y);
    const horizontal = Math.abs(outer.x - inner.x);
    return vertical / horizontal;
  }
  // Right eye: 386 (upper), 374 (lower), 263 (outer), 362 (inner)
  const upper = landmarks[386];
  const lower = landmarks[374];
  const outer = landmarks[263];
  const inner = landmarks[362];

  const vertical = Math.abs(upper.y - lower.y);
  const horizontal = Math.abs(outer.x - inner.x);
  return vertical / horizontal;
}

// EAR below ~0.2 typically means the eye is closed
const leftEAR = getEyeAspectRatio(landmarks, 'left');
const isBlinking = leftEAR < 0.2;

Eyebrows

Left Eyebrow

Right Eyebrow

// Eyebrow raise detection
function isEyebrowRaised(landmarks, side) {
  const eyebrowPeak = side === 'left' ? landmarks[52] : landmarks[282];
  const eyeTop = side === 'left' ? landmarks[159] : landmarks[386];

  const distance = Math.abs(eyebrowPeak.y - eyeTop.y);
  return distance > 0.04; // threshold varies per face
}

Nose

// Head direction estimation using nose tip vs face center
const noseTip = landmarks[4];
const foreheadCenter = landmarks[10];

// Horizontal: negative = looking left, positive = looking right
const horizontalAngle = noseTip.x - foreheadCenter.x;

// Vertical: negative = looking up, positive = looking down
const verticalAngle = noseTip.y - foreheadCenter.y;

Mouth and Lips

// Mouth open detection
function isMouthOpen(landmarks, threshold = 0.02) {
  const upperLip = landmarks[13];
  const lowerLip = landmarks[14];
  const mouthHeight = Math.abs(upperLip.y - lowerLip.y);
  return mouthHeight > threshold;
}

// Smile detection using mouth corner positions
function isSmiling(landmarks) {
  const leftCorner = landmarks[61];
  const rightCorner = landmarks[291];
  const mouthCenter = landmarks[13];

  // Corners rise above center when smiling
  const leftRise = mouthCenter.y - leftCorner.y;
  const rightRise = mouthCenter.y - rightCorner.y;

  return (leftRise + rightRise) / 2 > 0.01;
}

Jawline and Face Oval

The face oval defines the outer boundary of the face mesh. These landmarks trace the contour from the right temple, down the jaw, and up to the left temple.

Forehead

MediaPipe Face Mesh does not have dense forehead coverage. The available points sit along the hairline and between the eyebrows.

**Note: **The forehead has the sparsest landmark coverage of any face region. If your application needs precise forehead tracking (for example, measuring wrinkles or placing virtual accessories), consider interpolating between the available points or combining face mesh data with a separate detection model.

Cheeks

**Note: **Cheek landmarks primarily trace the surface contour and cheekbone ridge. The interior cheek area has limited coverage. For applications like blush placement or cheek-puff detection, you may need to interpolate between the listed surface points and the mouth/jaw landmarks.

Landmark Distribution by Face Region

Understanding how the 478 landmarks are distributed helps you know where the mesh is most and least detailed.

Interactive component: faceMeshChart - Landmark count per face region out of 478 total points

The eyes and mouth have the densest coverage because they carry the most expression data. The forehead is sparse, which matters if you are trying to detect forehead wrinkles or headband-style accessory placement.

How to Access Landmarks in JavaScript

If you are setting up MediaPipe Face Mesh for the first time, check out my step-by-step tutorial on MediaPipe hand and face tracking. The code below assumes you already have the detection pipeline running.

Using the MediaPipe Tasks API (recommended)

import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';

async function setupFaceLandmarker() {
  const vision = await FilesetResolver.forVisionTasks(
    'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
  );

  const faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task',
      delegate: 'GPU',
    },
    runningMode: 'VIDEO',
    numFaces: 1,
    outputFaceBlendshapes: true,
  });

  return faceLandmarker;
}

function detectLandmarks(faceLandmarker, video) {
  const result = faceLandmarker.detectForVideo(video, performance.now());

  if (result.faceLandmarks.length > 0) {
    const landmarks = result.faceLandmarks[0];

    // Each landmark has x, y, z (normalized 0-1)
    const noseTip = landmarks[4];
    console.log(`Nose tip: x=${noseTip.x}, y=${noseTip.y}, z=${noseTip.z}`);
  }
}

Drawing Landmarks on Canvas

function drawLandmarks(ctx, landmarks, width, height) {
  ctx.clearRect(0, 0, width, height);

  landmarks.forEach((point, index) => {
    const x = point.x * width;
    const y = point.y * height;

    ctx.beginPath();
    ctx.arc(x, y, 1.5, 0, 2 * Math.PI);
    ctx.fillStyle = '#00ff00';
    ctx.fill();
  });
}

// Draw specific region with different color
function drawRegion(ctx, landmarks, indices, color, width, height) {
  indices.forEach((index) => {
    const point = landmarks[index];
    const x = point.x * width;
    const y = point.y * height;

    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
  });
}

Practical Examples

Detect if Someone is Looking Left or Right

function getHeadDirection(landmarks) {
  const noseTip = landmarks[4];
  const leftCheek = landmarks[234];
  const rightCheek = landmarks[454];

  const leftDist = Math.abs(noseTip.x - leftCheek.x);
  const rightDist = Math.abs(noseTip.x - rightCheek.x);

  const ratio = leftDist / rightDist;

  if (ratio > 1.4) return 'looking right';
  if (ratio < 0.6) return 'looking left';
  return 'looking forward';
}

Calculate Face Tilt Angle

function getFaceTilt(landmarks) {
  const leftEye = landmarks[33];
  const rightEye = landmarks[263];

  const deltaY = rightEye.y - leftEye.y;
  const deltaX = rightEye.x - leftEye.x;

  const angleRad = Math.atan2(deltaY, deltaX);
  const angleDeg = angleRad * (180 / Math.PI);

  return angleDeg; // 0 = level, positive = tilted right
}

Measure Distance Between Any Two Landmarks

function landmarkDistance(landmarks, indexA, indexB) {
  const a = landmarks[indexA];
  const b = landmarks[indexB];

  return Math.sqrt(
    (a.x - b.x) ** 2 +
    (a.y - b.y) ** 2 +
    (a.z - b.z) ** 2
  );
}

// Example: eye width
const leftEyeWidth = landmarkDistance(landmarks, 33, 133);

Real-World Example: Face-Controlled Browser Games

I use these exact landmarks in several browser projects where your face and hands become the controller:

• Eyebrow Tetris - Raising your eyebrows (landmarks 52 and 282) rotates the pieces, and tilting your head (landmarks 33 and 263) moves them left and right.
• Map Gesture Controls - Hand tracking to pan and zoom OpenLayers maps without touching the screen. I wrote about the implementation in Gesture Controls with OpenLayers and MediaPipe.
• Pug's Hunt - A webcam-controlled Duck Hunt clone using MediaPipe hand tracking to aim and shoot.

You can also try the interactive landmark explorer I built to go with this article. It lets you hover over any point on your own face to see its index, region, and coordinates.

The key insight: you do not need all 478 landmarks for most applications. Pick 5 to 10 strategic points and build your interaction from there.

Tips for Working with Face Mesh Landmarks

Coordinate system: All coordinates are normalized between 0 and 1. Multiply by your canvas width and height to get pixel positions. The z coordinate represents depth relative to the face center, with negative values meaning the point is closer to the camera.

Performance: Reading all 478 landmarks every frame is cheap. The expensive part is the model inference, not the data access. Once you have the landmarks array, index lookups are essentially free.

Mirroring: Webcam feeds are typically mirrored. If your landmark positions seem flipped, check whether your video element or canvas has a CSS transform: scaleX(-1). The landmark data itself is based on the raw video, not the mirrored display.

Threshold tuning: Every threshold in this article (0.02 for mouth open, 0.2 for blink, etc.) is a starting point. Faces vary. Build in a calibration step or let users adjust sensitivity.

Multiple faces: Set numFaces in the FaceLandmarker options to detect more than one face. Each face gets its own landmark array in the results.

FAQ

How many landmarks does MediaPipe Face Mesh have?

MediaPipe Face Mesh detects 478 landmarks on each face. This includes 468 face surface points and 10 additional iris points (5 per eye). The iris landmarks were added in a later update to the original 468-point model.

What are landmarks 33 and 263 in MediaPipe Face Mesh?

Landmark 33 is the outer corner of the left eye and landmark 263 is the outer corner of the right eye. These two points are commonly used for blink detection, eye tracking, and calculating face tilt angle.

What are landmarks 13 and 14 used for?

Landmark 13 is the center of the upper lip and landmark 14 is the center of the lower lip. The vertical distance between these two points is the simplest way to detect whether someone's mouth is open. A distance greater than roughly 0.02 (in normalized coordinates) usually indicates an open mouth.

What are landmarks 61 and 291?

Landmark 61 is the left mouth corner and landmark 291 is the right mouth corner. Together they define the width of the mouth and are used for smile detection by measuring whether the corners rise above the center of the lips.

What coordinate system does MediaPipe Face Mesh use?

All landmark coordinates are normalized between 0 and 1 relative to the image dimensions. The x axis runs left to right, y runs top to bottom, and z represents depth relative to the center of the face. To convert to pixel coordinates, multiply x by image width and y by image height.

Can MediaPipe Face Mesh track multiple faces?

Yes. Set the numFaces option to the number of faces you want to detect (up to 4 is practical for real-time performance). Each detected face returns its own separate array of 478 landmarks.

Is MediaPipe Face Mesh free to use?

Yes. MediaPipe is open source under the Apache 2.0 license. It runs entirely in the browser using WebAssembly and WebGL, so no data is sent to any server. This makes it suitable for privacy-sensitive applications.

Originally posted on sanderdesnaijer.com