MediaPipe Face Mesh: All 478 Landmark Points

Sander de Snaijer — Fri, 15 May 2026 13:43:43 +0000

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.

Landmark	Index	Common Use
Left eye outer corner	33	Blink detection, eye tracking
Right eye outer corner	263	Blink detection, eye tracking
Left eye inner corner	133	Eye width calculation
Right eye inner corner	362	Eye width calculation
Mouth left corner	61	Smile detection
Mouth right corner	291	Smile detection
Upper lip center	13	Mouth open detection
Lower lip center	14	Mouth open detection
Nose tip	4	Face direction, head pose
Chin	152	Jaw tracking, face height
Left eyebrow outer	70	Eyebrow raise detection
Right eyebrow outer	300	Eyebrow raise detection
Forehead center	10	Face bounding, head tilt
Left cheek	234	Face width calculation
Right cheek	454	Face width calculation

// 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.

MediaPipe Face Mesh Explorer - 478 Point Demo

Interactive tool to explore all 478 MediaPipe Face Mesh landmark indices on your own face. Hover to inspect, click to pin, search by index or region.

demos.sanderdesnaijer.com

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

Part	Indices
Upper eyelid	246, 161, 160, 159, 158, 157, 173
Lower eyelid	33, 7, 163, 144, 145, 153, 154, 155, 133
Outer corner	33
Inner corner	133

Right Eye Contour

Part	Indices
Upper eyelid	466, 388, 387, 386, 385, 384, 398
Lower eyelid	263, 249, 390, 373, 374, 380, 381, 382, 362
Outer corner	263
Inner corner	362

Left Iris

Part	Indices
Center	468
Ring	469, 470, 471, 472

Right Iris

Part	Indices
Center	473
Ring	474, 475, 476, 477

// 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

Part	Indices
Full contour	70, 63, 105, 66, 107, 55, 65, 52, 53, 46
Outer point	70
Inner point	107
Peak (highest)	52

Right Eyebrow

Part	Indices
Full contour	300, 293, 334, 296, 336, 285, 295, 282, 283, 276
Outer point	300
Inner point	336
Peak (highest)	282

// 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

Part	Indices
Tip (pronasale)	4
Bridge	6, 197, 195, 5, 168
Columella	1
Left nostril	102, 49, 48, 115
Right nostril	331, 279, 278, 344
Left alar (wing)	129, 198, 217, 209, 131
Right alar (wing)	358, 429, 437, 420, 360
Subnasale (bottom center)	2, 326, 97

// 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

Part	Indices
Upper lip outer	61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291
Upper lip inner	78, 191, 80, 81, 82, 13, 312, 311, 310, 415, 308
Lower lip outer	61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291
Lower lip inner	78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308
Left corner	61
Right corner	291
Upper center	13
Lower center	14
Center of lips (closed)	0

// 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.

Part	Indices
Face oval (full)	10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288, 397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136, 172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109
Chin point	152
Left jaw	234, 93, 132, 58, 172, 136, 150, 149, 176, 148
Right jaw	454, 323, 361, 288, 397, 365, 379, 378, 400, 377
Left temple	21, 54, 103, 67, 109, 10
Right temple	251, 284, 332, 297, 338, 10

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.

Part	Indices
Center top	10
Between eyebrows (glabella)	9, 151
Left side	21, 54, 67, 68, 69, 71, 103, 104, 108, 109
Right side	251, 284, 297, 298, 299, 301, 332, 333, 337, 338

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.

Part	Indices
Left cheek surface	36, 205, 206, 207, 187, 123, 116, 117, 118, 119, 100, 47
Right cheek surface	266, 425, 426, 427, 411, 352, 345, 346, 347, 348, 329, 277
Left cheek bone	234, 127, 162
Right cheek bone	454, 356, 389

Landmark Distribution by Face Region

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

Region	Approximate Count	Detail Level
Eyes + Iris	~90	Very high
Mouth + Lips	~60	Very high
Nose	~30	High
Eyebrows	~22	Medium
Jawline + Face oval	~36	Medium
Cheeks	~24	Medium
Forehead	~23	Low
Tessellation (mesh fill)	~193	Internal mesh

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

DEV Community: Sander de Snaijer