THREE.JS / WEBGL / MEDIAPIPE MORPHS

Make the face move.

The pinned webcam example aligns a FaceCap glTF expression rig and a hidden webcam video in the same metric camera frame, then applies MediaPipe blendshapes, pose, and eye scores. This route uses the bundled FaceCap asset and a deterministic local video/landmark adapter; the physical camera and external MediaPipe runtime stay explicit seams.

Initializing—

Preparing the FaceCap glTF, hidden video, and morph adapter.

video
—
texture
—
source
—
morphs
—
pose
—
frame
—
sample
—
Expression weightsmorphTargetInfluences
Capture + lifecycleVideoTexture / teardown

No frame sample yet.

video → VideoTexture + FaceCap morph mesh → deterministic MediaPipe-shaped results

Selected source contractWebGLRenderer → hidden VideoTexture plane + FaceCap morph rig

Preserved boundaries: `MP_FOV = 63`, `MP_NEAR = 1`, `MP_FAR = 10000`, `VIDEO_DISTANCE = 100`, mirrored scene, registration transform, `FaceLandmarker.detectForVideo()` result shape, blendshape mapping, facial transformation matrix, and eye rotations. Physical `getUserMedia()` permission, external MediaPipe CDN/model loading, exact assets/pixels, and whole-example fidelity remain separate.

Drag to orbit · local captureStream is the default deterministic source · the physical-camera button intentionally remains unclicked during automated QA.