WebXR Virtual Try-On Platform

Write a React component that uses MediaPipe FaceMesh to track a user's face in real time and overlays a 3D glasses model anchored to the nose bridge and ears. Requirements: (1) MediaPipe setup: import @mediapipe/face_mesh, create FaceMesh({ maxNumFaces: 1, refineLandmarks: true, minDetectionConfidence: 0.5, minTrackingConfidence: 0.5 }). Connect to a Camera from @mediapipe/camera_utils pointing at a hidden <video> element. (2) On each results callback: extract landmarks[0] — specifically: nose bridge top (landmark 6), nose bridge bottom (landmark 4), left ear (landmark 234), right ear (landmark 454), left eye outer (landmark 33), right eye outer (landmark 263). Convert normalized landmark coordinates to world-space positions using the canvas dimensions and a depth estimate. (3) R3F overlay: a Canvas positioned absolutely over the video feed (pointer-events: none). In useFrame, receive the latest landmarks via a useRef (updated from the MediaPipe callback). Compute: glasses center = midpoint of left/right eye outer landmarks, glasses width = distance between ear landmarks * 0.9, glasses rotation = atan2 of the eye-to-eye vector for roll, head tilt from nose bridge vertical for pitch. Apply position/rotation/scale to the GLTF glasses model. (4) GLTF glasses: load with useGLTF, center the model at the nose bridge pivot point. (5) Export as GlassesARTryOn with prop glassesModelUrl: string. Full TypeScript. Explain the coordinate system conversion from MediaPipe normalized coords to R3F world space.

Write a Three.js / React Three Fiber occlusion system that makes a 3D glasses model appear to sit correctly on a face — with the nose piece behind the nose and the arms behind the ears. Requirements: (1) Face mesh geometry: create a simplified face mesh (use the MediaPipe FaceMesh 468 landmarks to build a BufferGeometry with the canonical face triangulation — provide the index array for the standard MediaPipe face mesh triangles). Update vertex positions each frame from live landmark data. (2) Occlusion material: MeshBasicMaterial({ colorWrite: false, depthWrite: true }) — this renders the face mesh to the depth buffer only, making it invisible but occluding anything behind it. Set renderOrder: 0. (3) Glasses model: set renderOrder: 1 so it renders after the face mesh. The depth test will correctly hide glasses parts that are behind the face geometry. (4) Render order setup: scene.overrideMaterial is NOT used — instead set renderOrder explicitly on each object. (5) Nose bridge occlusion: the nose area landmarks (1, 2, 3, 4, 5, 6, 168, 197, 195, 5) form the nose bridge — ensure these vertices are included in the occlusion mesh with correct triangulation. (6) Provide the complete MediaPipe face mesh triangle indices array (all 468 landmarks, standard triangulation). Full TypeScript with R3F.