3D AR Hairstyle Try-On

3D AR hairstyle try-on is a browser tool that overlays real 3D hair meshes onto your face using MediaPipe Face Landmarker and Three.js. The 478-point face mesh returns a full 4×4 head transformation matrix every frame — your hair follows head turns, tilts, and distance changes. Twelve cuts ship by default and any color is supported. Last updated April 2026.

How 3D AR hair tracking works

Each video frame is sent to Google MediaPipe Face Landmarker, which returns 478 3D landmarks plus a transformation matrix that describes head rotation and translation in real-world units. A Three.js scene mirrors that matrix onto the hair mesh, so the cut sits anchored to your skull. Forehead landmarks set the base ring of the hair; the bridge of the nose anchors the front fringe. Because rotation is read straight from the matrix, hair stays glued through full head turns up to about 70 degrees off-axis.

Hairstyles included

Twelve cuts: buzz, crew cut, fade, side part, comb over, classic pompadour, textured quiff, slick back, messy crop, curly top, man bun, and shoulder length. Buzz and fade suit round and oval faces. Side part and comb over balance round faces by adding height. Pompadour and quiff add height for shorter or square faces. Slick back lengthens round faces. Curly top and messy crop work for textured hair. Man bun and shoulder length suit longer faces. Use the size slider to scale 60–160%, the forward slider to push hair onto your forehead, and the up/down slider for skull fit. Color picker covers natural blacks, browns, blondes, reds, and fashion shades.

Webcam vs photo mode

Webcam mode runs the live face tracker — pick a cut, turn your head, watch hair move. Photo mode runs the same model on a still upload, so you can try cuts on a head shot, profile photo, or even a friend with their permission. Snapshot saves the composite (your face + the rendered 3D hair) as a PNG. Photo mode produces a high-resolution snapshot at full image size, useful for sharing before–after comparisons. Both modes mirror the webcam preview so you see yourself like a mirror; saved snapshots are restored to natural orientation.

Try-on tips for an accurate fit

Sit at arm's length from the camera with light coming from the front, not behind. Tie up or pull back existing hair so the face mesh reads cleanly — current long hair can confuse forehead landmarks. Look straight at the lens when judging fit, then turn 30 degrees left and right to check the side profile. The forward slider compensates for low or high hairlines. The size slider scales the whole mesh so a small head fits a large cut and vice versa. For curly textures and the pompadour, add slight forward push so volume sits above the brow.

Privacy and offline

The MediaPipe model loads from CDN once, then is cached by your browser. After that, every frame is processed locally via WebAssembly — your camera feed and uploaded photos never reach a server. Snapshots are generated on a hidden canvas inside this tab; the file only touches your disk when you press Download. The whole experience works offline once cached, including the Three.js renderer and procedural hair meshes.