Face Lab 2027 - 3D Mesh Studio

\n \n \n

Parameters

\n \n \n

\n 📁 Upload Custom Mesh\n

📦

Drop 3D mesh file here

Supports OBJ, GLB, GLTF

\n \n

\n 🗂️ My Meshes\n

\n \n

\n 🎯 Face Mapping\n

\n \n \n \n

Transform

\n \n

Scale X

\n \n

Scale Y

\n \n

Scale Z

\n \n

Offset X

\n \n

Offset Y

\n \n

Offset Z

\n \n

Rot X

\n \n

Rot Y

\n \n

Rot Z

\n \n

Face Landmark Preview

\n \n

Initializing...

\n FPS: -- | \n Mesh: None\n

\n \n \n \n \n

\n\n\n\n\n\n

\n`;\n\n// ============================================================================\n// CLIENT SCRIPT\n// ============================================================================\n\nconst CLIENT = `\nconst CONFIG = ${JSON.stringify(DEFAULT_CONFIG)};\n\n// State\nlet state = {\n style: 'none',\n params: {},\n flip: true,\n meshes: [],\n activeMesh: null,\n meshVisible: true,\n wireframe: false,\n mapping: 'full_face',\n transform: {\n scale: { x: 1, y: 1, z: 1 },\n offset: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 }\n }\n};\n\n// Three.js & MindAR references\nlet THREE, GLTFLoader, OBJLoader;\nlet mindar, renderer, scene, camera, clock;\nlet videoMesh, videoMat;\nlet customMeshGroup = null;\nlet faceMeshAnchor = null;\nlet faceGeometry = null;\n\nlet frames = 0, lastFps = 0;\n\n// IndexedDB for mesh storage\nconst DB_NAME = 'FaceLabMeshes';\nconst DB_VERSION = 1;\nlet db = null;\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\nfunction toast(msg, type = '') {\n const el = document.createElement('div');\n el.className = 'toast ' + type;\n el.textContent = msg;\n document.getElementById('toasts').appendChild(el);\n setTimeout(() => el.remove(), 3000);\n}\n\nfunction setLoading(show, txt, progress) {\n document.getElementById('loading').style.display = show ? 'flex' : 'none';\n if (txt) document.getElementById('loadtxt').textContent = txt;\n if (progress !== undefined) {\n document.getElementById('progress').style.width = progress + '%';\n }\n}\n\nfunction setStatus(ok, txt) {\n document.getElementById('dot').className = 'dot' + (ok ? ' ok' : '');\n document.getElementById('status').textContent = txt;\n}\n\nfunction updateMeshStatus() {\n const el = document.getElementById('mesh-status');\n if (state.activeMesh && state.meshVisible) {\n el.textContent = state.activeMesh.name;\n el.style.color = 'var(--success)';\n } else {\n el.textContent = 'None';\n el.style.color = 'var(--text2)';\n }\n}\n\n// ============================================================================\n// INDEXEDDB STORAGE\n// ============================================================================\n\nasync function initDB() {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open(DB_NAME, DB_VERSION);\n \n request.onerror = () => reject(request.error);\n request.onsuccess = () => {\n db = request.result;\n resolve(db);\n };\n \n request.onupgradeneeded = (event) => {\n const db = event.target.result;\n if (!db.objectStoreNames.contains('meshes')) {\n db.createObjectStore('meshes', { keyPath: 'id' });\n }\n };\n });\n}\n\nasync function saveMeshToDB(mesh) {\n return new Promise((resolve, reject) => {\n const tx = db.transaction('meshes', 'readwrite');\n const store = tx.objectStore('meshes');\n const request = store.put(mesh);\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n}\n\nasync function loadMeshesFromDB() {\n return new Promise((resolve, reject) => {\n const tx = db.transaction('meshes', 'readonly');\n const store = tx.objectStore('meshes');\n const request = store.getAll();\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nasync function deleteMeshFromDB(id) {\n return new Promise((resolve, reject) => {\n const tx = db.transaction('meshes', 'readwrite');\n const store = tx.objectStore('meshes');\n const request = store.delete(id);\n request.onsuccess = () => resolve();\n request.onerror = () => reject(request.error);\n });\n}\n\n// ============================================================================\n// MESH LOADING & PARSING\n// ============================================================================\n\nasync function loadMeshFile(file) {\n const ext = file.name.split('.').pop().toLowerCase();\n const arrayBuffer = await file.arrayBuffer();\n \n let format;\n if (ext === 'obj') format = 'obj';\n else if (ext === 'glb') format = 'glb';\n else if (ext === 'gltf') format = 'gltf';\n else throw new Error('Unsupported format: ' + ext);\n \n const mesh = {\n id: 'mesh_' + Date.now(),\n name: file.name.replace(/\\\\.[^/.]+$/, ''),\n data: arrayBuffer,\n format: format,\n mapping: { ...CONFIG.meshMappings.find(m => m.id === state.mapping) },\n createdAt: Date.now()\n };\n \n return mesh;\n}\n\nasync function parseMeshData(meshData) {\n if (meshData.format === 'obj') {\n return parseOBJ(meshData.data);\n } else if (meshData.format === 'glb' || meshData.format === 'gltf') {\n return parseGLTF(meshData.data, meshData.format);\n }\n throw new Error('Unknown format');\n}\n\nfunction parseOBJ(arrayBuffer) {\n return new Promise((resolve, reject) => {\n const text = new TextDecoder().decode(arrayBuffer);\n const loader = new OBJLoader();\n try {\n const obj = loader.parse(text);\n resolve(obj);\n } catch (e) {\n reject(e);\n }\n });\n}\n\nfunction parseGLTF(arrayBuffer, format) {\n return new Promise((resolve, reject) => {\n const loader = new GLTFLoader();\n \n if (format === 'glb') {\n loader.parse(arrayBuffer, '', (gltf) => {\n resolve(gltf.scene);\n }, reject);\n } else {\n // GLTF (JSON)\n const text = new TextDecoder().decode(arrayBuffer);\n const json = JSON.parse(text);\n loader.parse(json, '', (gltf) => {\n resolve(gltf.scene);\n }, reject);\n }\n });\n}\n\n// ============================================================================\n// 3D MESH MANAGEMENT\n// ============================================================================\n\nasync function addMeshToScene(meshData) {\n if (!scene || !faceMeshAnchor) {\n toast('AR not ready', 'err');\n return;\n }\n \n // Remove existing custom mesh\n if (customMeshGroup) {\n faceMeshAnchor.group.remove(customMeshGroup);\n customMeshGroup = null;\n }\n \n try {\n setLoading(true, 'Loading mesh...', 30);\n \n const parsed = await parseMeshData(meshData);\n \n setLoading(true, 'Processing mesh...', 60);\n \n customMeshGroup = new THREE.Group();\n customMeshGroup.name = 'customMesh';\n \n // Clone and process the mesh\n parsed.traverse((child) => {\n if (child.isMesh) {\n const cloned = child.clone();\n \n // Apply default material if none\n if (!cloned.material || Array.isArray(cloned.material)) {\n cloned.material = new THREE.MeshStandardMaterial({\n color: 0x8866ff,\n metalness: 0.3,\n roughness: 0.7,\n transparent: true,\n opacity: state.params['mesh3d']?.meshOpacity ?? 1.0\n });\n } else {\n cloned.material = cloned.material.clone();\n cloned.material.transparent = true;\n cloned.material.opacity = state.params['mesh3d']?.meshOpacity ?? 1.0;\n }\n \n cloned.material.wireframe = state.wireframe;\n \n customMeshGroup.add(cloned);\n }\n });\n \n // Center the mesh\n const box = new THREE.Box3().setFromObject(customMeshGroup);\n const center = box.getCenter(new THREE.Vector3());\n const size = box.getSize(new THREE.Vector3());\n \n customMeshGroup.position.sub(center);\n \n // Normalize scale\n const maxDim = Math.max(size.x, size.y, size.z);\n const baseScale = 0.15 / maxDim; // Fit to face size\n customMeshGroup.scale.setScalar(baseScale);\n \n // Apply mapping transforms\n applyMeshTransforms();\n \n // Add to face anchor\n faceMeshAnchor.group.add(customMeshGroup);\n \n state.activeMesh = meshData;\n state.meshVisible = true;\n \n setLoading(false);\n updateMeshStatus();\n updateMeshList();\n toast('Mesh loaded!', 'ok');\n \n } catch (err) {\n console.error('Mesh load error:', err);\n setLoading(false);\n toast('Failed to load mesh: ' + err.message, 'err');\n }\n}\n\nfunction applyMeshTransforms() {\n if (!customMeshGroup) return;\n \n const mapping = CONFIG.meshMappings.find(m => m.id === state.mapping);\n if (!mapping) return;\n \n // Get current scale (preserve normalized scale)\n const currentScale = customMeshGroup.scale.x;\n \n // Apply scale\n const sx = state.transform.scale.x * mapping.scale.x;\n const sy = state.transform.scale.y * mapping.scale.y;\n const sz = state.transform.scale.z * mapping.scale.z;\n customMeshGroup.scale.set(currentScale * sx, currentScale * sy, currentScale * sz);\n \n // Apply offset\n customMeshGroup.position.set(\n state.transform.offset.x + mapping.offset.x,\n state.transform.offset.y + mapping.offset.y,\n state.transform.offset.z + mapping.offset.z\n );\n \n // Apply rotation\n customMeshGroup.rotation.set(\n state.transform.rotation.x + mapping.rotation.x,\n state.transform.rotation.y + mapping.rotation.y,\n state.transform.rotation.z + mapping.rotation.z\n );\n}\n\nfunction updateMeshMaterial() {\n if (!customMeshGroup) return;\n \n const opacity = state.params['mesh3d']?.meshOpacity ?? 1.0;\n const envIntensity = state.params['mesh3d']?.envMapIntensity ?? 0.5;\n \n customMeshGroup.traverse((child) => {\n if (child.isMesh && child.material) {\n child.material.opacity = opacity;\n child.material.wireframe = state.wireframe;\n if (child.material.envMapIntensity !== undefined) {\n child.material.envMapIntensity = envIntensity;\n }\n }\n });\n}\n\nfunction removeMesh() {\n if (customMeshGroup && faceMeshAnchor) {\n faceMeshAnchor.group.remove(customMeshGroup);\n customMeshGroup = null;\n }\n state.activeMesh = null;\n updateMeshStatus();\n}\n\n// ============================================================================\n// UI BUILDING\n// ============================================================================\n\nfunction buildUI() {\n // Tabs\n document.querySelectorAll('.tab').forEach(tab => {\n tab.onclick = () => {\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));\n tab.classList.add('active');\n document.getElementById('tab-' + tab.dataset.tab).classList.add('active');\n };\n });\n \n // Styles\n const container = document.getElementById('styles');\n CONFIG.styles.forEach(s => {\n const btn = document.createElement('button');\n btn.className = 'style-btn' + (state.style === s.id ? ' active' : '');\n btn.dataset.id = s.id;\n btn.innerHTML = \\`\n \\${s.preview}\n

\\${s.name}

\\${s.description}

\n \\`;\n btn.onclick = () => selectStyle(s.id);\n container.appendChild(btn);\n });\n \n // Controls\n document.getElementById('flip').onclick = () => {\n state.flip = !state.flip;\n if (videoMesh) videoMesh.scale.x = state.flip ? -1 : 1;\n toast(state.flip ? 'Mirrored' : 'Normal');\n };\n \n document.getElementById('snap').onclick = () => {\n if (!renderer) return;\n const link = document.createElement('a');\n link.download = 'facelab-' + Date.now() + '.png';\n link.href = renderer.domElement.toDataURL();\n link.click();\n toast('Saved!', 'ok');\n };\n \n document.getElementById('toggle-mesh').onclick = () => {\n if (!customMeshGroup) {\n toast('No mesh loaded', 'warn');\n return;\n }\n state.meshVisible = !state.meshVisible;\n customMeshGroup.visible = state.meshVisible;\n document.getElementById('toggle-mesh').classList.toggle('active', state.meshVisible);\n updateMeshStatus();\n };\n \n document.getElementById('toggle-wireframe').onclick = () => {\n state.wireframe = !state.wireframe;\n document.getElementById('toggle-wireframe').classList.toggle('active', state.wireframe);\n updateMeshMaterial();\n };\n \n // Upload zone\n const uploadZone = document.getElementById('upload-zone');\n const meshInput = document.getElementById('mesh-input');\n \n uploadZone.onclick = () => meshInput.click();\n \n uploadZone.ondragover = (e) => {\n e.preventDefault();\n uploadZone.classList.add('drag-over');\n };\n \n uploadZone.ondragleave = () => {\n uploadZone.classList.remove('drag-over');\n };\n \n uploadZone.ondrop = async (e) => {\n e.preventDefault();\n uploadZone.classList.remove('drag-over');\n const file = e.dataTransfer.files[0];\n if (file) await handleMeshUpload(file);\n };\n \n meshInput.onchange = async (e) => {\n const file = e.target.files[0];\n if (file) await handleMeshUpload(file);\n meshInput.value = '';\n };\n \n // Mapping select\n document.getElementById('mapping-select').onchange = (e) => {\n state.mapping = e.target.value;\n const mapping = CONFIG.meshMappings.find(m => m.id === state.mapping);\n if (mapping) {\n state.transform = {\n scale: { ...mapping.scale },\n offset: { ...mapping.offset },\n rotation: { ...mapping.rotation }\n };\n updateTransformInputs();\n applyMeshTransforms();\n }\n };\n \n // Transform inputs\n ['scale-x', 'scale-y', 'scale-z', 'off-x', 'off-y', 'off-z', 'rot-x', 'rot-y', 'rot-z'].forEach(id => {\n const el = document.getElementById('tx-' + id);\n el.oninput = () => {\n const val = parseFloat(el.value) || 0;\n const [type, axis] = id.split('-');\n if (type === 'scale') state.transform.scale[axis] = val;\n else if (type === 'off') state.transform.offset[axis] = val;\n else if (type === 'rot') state.transform.rotation[axis] = val;\n applyMeshTransforms();\n };\n });\n \n // Modal\n document.getElementById('modal-close').onclick = closeModal;\n document.getElementById('modal-cancel').onclick = closeModal;\n document.getElementById('mesh-modal').onclick = (e) => {\n if (e.target.id === 'mesh-modal') closeModal();\n };\n}\n\nfunction updateTransformInputs() {\n document.getElementById('tx-scale-x').value = state.transform.scale.x;\n document.getElementById('tx-scale-y').value = state.transform.scale.y;\n document.getElementById('tx-scale-z').value = state.transform.scale.z;\n document.getElementById('tx-off-x').value = state.transform.offset.x;\n document.getElementById('tx-off-y').value = state.transform.offset.y;\n document.getElementById('tx-off-z').value = state.transform.offset.z;\n document.getElementById('tx-rot-x').value = state.transform.rotation.x;\n document.getElementById('tx-rot-y').value = state.transform.rotation.y;\n document.getElementById('tx-rot-z').value = state.transform.rotation.z;\n}\n\nasync function handleMeshUpload(file) {\n try {\n setLoading(true, 'Processing file...', 10);\n \n const mesh = await loadMeshFile(file);\n \n // Save to IndexedDB\n await saveMeshToDB(mesh);\n state.meshes.push(mesh);\n \n // Add to scene\n await addMeshToScene(mesh);\n \n // Switch to mesh3d style\n selectStyle('mesh3d');\n \n } catch (err) {\n console.error('Upload error:', err);\n setLoading(false);\n toast('Upload failed: ' + err.message, 'err');\n }\n}\n\nfunction updateMeshList() {\n const list = document.getElementById('mesh-list');\n list.innerHTML = '';\n \n if (state.meshes.length === 0) {\n list.innerHTML = '

No meshes uploaded

';\n return;\n }\n \n state.meshes.forEach(mesh => {\n const item = document.createElement('div');\n item.className = 'mesh-item' + (state.activeMesh?.id === mesh.id ? ' active' : '');\n item.innerHTML = \\`\n

📦

\\${mesh.name}

\\${mesh.format.toUpperCase()} • \\${formatDate(mesh.createdAt)}

\n \n \n

\n \\`;\n \n item.onclick = (e) => {\n if (e.target.closest('.mesh-btn')) return;\n addMeshToScene(mesh);\n };\n \n item.querySelector('.edit').onclick = () => openMeshEditor(mesh);\n item.querySelector('.delete').onclick = () => deleteMesh(mesh);\n \n list.appendChild(item);\n });\n}\n\nfunction formatDate(ts) {\n const d = new Date(ts);\n return d.toLocaleDateString();\n}\n\nasync function deleteMesh(mesh) {\n if (!confirm('Delete ' + mesh.name + '?')) return;\n \n await deleteMeshFromDB(mesh.id);\n state.meshes = state.meshes.filter(m => m.id !== mesh.id);\n \n if (state.activeMesh?.id === mesh.id) {\n removeMesh();\n }\n \n updateMeshList();\n toast('Mesh deleted', 'ok');\n}\n\nfunction openMeshEditor(mesh) {\n document.getElementById('mesh-modal').classList.add('active');\n document.getElementById('modal-body').innerHTML = \\`\n

\n Name\n

\n \n

Mapping

\n \n \\`;\n \n document.getElementById('modal-apply').onclick = async () => {\n mesh.name = document.getElementById('edit-name').value;\n mesh.mapping = CONFIG.meshMappings.find(m => m.id === document.getElementById('edit-mapping').value);\n await saveMeshToDB(mesh);\n updateMeshList();\n closeModal();\n toast('Mesh updated', 'ok');\n };\n}\n\nfunction closeModal() {\n document.getElementById('mesh-modal').classList.remove('active');\n}\n\n// ============================================================================\n// STYLE MANAGEMENT\n// ============================================================================\n\nfunction selectStyle(id) {\n state.style = id;\n document.querySelectorAll('.style-btn').forEach(b => {\n b.classList.toggle('active', b.dataset.id === id);\n });\n \n const style = CONFIG.styles.find(s => s.id === id);\n if (!style) return;\n \n if (!state.params[id]) {\n state.params[id] = {};\n style.parameters.forEach(p => state.params[id][p.id] = p.default);\n }\n \n buildParams(style);\n updateShader(style);\n \n // Show/hide custom mesh based on style\n if (id === 'mesh3d' && customMeshGroup) {\n customMeshGroup.visible = state.meshVisible;\n }\n \n toast(style.name, 'ok');\n}\n\nfunction buildParams(style) {\n const container = document.getElementById('params');\n if (!style.parameters.length) {\n container.innerHTML = '

No parameters

';\n return;\n }\n \n container.innerHTML = '';\n const p = state.params[style.id];\n \n style.parameters.forEach(param => {\n const div = document.createElement('div');\n div.className = 'param';\n div.innerHTML = \\`\n

\n \\${param.name}\n \\${fmt(p[param.id], param)}\n

\n \n \\`;\n container.appendChild(div);\n \n div.querySelector('input').oninput = e => {\n const v = parseFloat(e.target.value);\n p[param.id] = v;\n document.getElementById('v-' + param.id).textContent = fmt(v, param);\n if (videoMat && videoMat.uniforms[param.id]) videoMat.uniforms[param.id].value = v;\n \n // Handle mesh-specific parameters\n if (style.id === 'mesh3d') {\n if (param.id === 'meshOpacity' || param.id === 'envMapIntensity') {\n updateMeshMaterial();\n }\n if (param.id === 'meshScale' && customMeshGroup) {\n applyMeshTransforms();\n }\n if (param.id === 'wireframe') {\n state.wireframe = v > 0.5;\n updateMeshMaterial();\n }\n }\n };\n });\n}\n\nfunction fmt(v, p) {\n return p.step >= 1 ? Math.round(v) : v.toFixed(p.step < 0.01 ? 3 : 2);\n}\n\nfunction updateShader(style) {\n if (!videoMat) return;\n \n videoMat.fragmentShader = style.fragmentShader;\n videoMat.needsUpdate = true;\n \n const p = state.params[style.id] || {};\n style.parameters.forEach(param => {\n if (!videoMat.uniforms[param.id]) {\n videoMat.uniforms[param.id] = { value: p[param.id] };\n } else {\n videoMat.uniforms[param.id].value = p[param.id];\n }\n });\n}\n\n// ============================================================================\n// FACE MESH GEOMETRY - Maps AR face landmarks to 3D mesh\n// ============================================================================\n\nfunction createFaceMeshGeometry(faceGeometryData) {\n // MindAR provides 468 face landmarks\n // We create a mesh that deforms based on these landmarks\n \n const geometry = new THREE.BufferGeometry();\n \n // Face mesh triangulation indices (MediaPipe face mesh topology)\n // This is a simplified version - full mesh has 468 vertices\n const indices = getFaceTriangles();\n \n geometry.setIndex(indices);\n \n return geometry;\n}\n\nfunction getFaceTriangles() {\n // Simplified face triangulation for key facial features\n // Based on MediaPipe Face Mesh topology\n return [\n // Forehead\n 10, 338, 297,\n 10, 297, 332,\n 10, 332, 284,\n 10, 284, 251,\n 10, 251, 389,\n 10, 389, 356,\n 10, 356, 454,\n 10, 454, 323,\n 10, 323, 361,\n 10, 361, 288,\n 10, 288, 397,\n 10, 397, 365,\n 10, 365, 379,\n 10, 379, 378,\n 10, 378, 400,\n 10, 400, 377,\n 10, 377, 152,\n 10, 152, 148,\n 10, 148, 176,\n 10, 176, 149,\n 10, 149, 150,\n 10, 150, 136,\n 10, 136, 172,\n 10, 172, 58,\n 10, 58, 132,\n 10, 132, 93,\n 10, 93, 234,\n 10, 234, 127,\n 10, 127, 162,\n 10, 162, 21,\n 10, 21, 54,\n 10, 54, 103,\n 10, 103, 67,\n 10, 67, 109,\n 10, 109, 10,\n \n // Nose\n 168, 6, 197,\n 168, 197, 195,\n 168, 195, 5,\n 6, 168, 198,\n 198, 168, 5,\n \n // Left eye\n 33, 246, 161,\n 161, 160, 159,\n 159, 158, 157,\n 157, 173, 133,\n 33, 7, 163,\n 163, 144, 145,\n 145, 153, 154,\n 154, 155, 133,\n \n // Right eye\n 362, 398, 384,\n 384, 385, 386,\n 386, 387, 388,\n 388, 466, 263,\n 362, 382, 381,\n 381, 380, 374,\n 374, 373, 390,\n 390, 249, 263,\n \n // Mouth outer\n 61, 146, 91,\n 91, 181, 84,\n 84, 17, 314,\n 314, 405, 321,\n 321, 375, 291,\n 61, 185, 40,\n 40, 39, 37,\n 37, 0, 267,\n 267, 269, 270,\n 270, 409, 291,\n \n // Mouth inner\n 78, 95, 88,\n 88, 178, 87,\n 87, 14, 317,\n 317, 402, 318,\n 318, 324, 308,\n 78, 191, 80,\n 80, 81, 82,\n 82, 13, 312,\n 312, 311, 310,\n 310, 415, 308,\n \n // Cheeks\n 116, 123, 50,\n 50, 101, 36,\n 36, 142, 126,\n 345, 352, 280,\n 280, 330, 266,\n 266, 371, 355,\n ];\n}\n\n// ============================================================================\n// FACE LANDMARK PREVIEW\n// ============================================================================\n\nfunction drawFacePreview(landmarks) {\n const canvas = document.getElementById('face-preview');\n if (!canvas) return;\n \n const ctx = canvas.getContext('2d');\n const w = canvas.width = canvas.offsetWidth * 2;\n const h = canvas.height = canvas.offsetHeight * 2;\n \n ctx.fillStyle = '#1e1e2a';\n ctx.fillRect(0, 0, w, h);\n \n if (!landmarks || landmarks.length === 0) {\n ctx.fillStyle = '#8888aa';\n ctx.font = '12px system-ui';\n ctx.textAlign = 'center';\n ctx.fillText('No face detected', w/2, h/2);\n return;\n }\n \n // Draw connections\n ctx.strokeStyle = '#4444ff';\n ctx.lineWidth = 1;\n \n const connections = [\n // Face oval\n [10, 338], [338, 297], [297, 332], [332, 284], [284, 251], [251, 389],\n [389, 356], [356, 454], [454, 323], [323, 361], [361, 288], [288, 397],\n [397, 365], [365, 379], [379, 378], [378, 400], [400, 377], [377, 152],\n [152, 148], [148, 176], [176, 149], [149, 150], [150, 136], [136, 172],\n [172, 58], [58, 132], [132, 93], [93, 234], [234, 127], [127, 162],\n [162, 21], [21, 54], [54, 103], [103, 67], [67, 109], [109, 10],\n // Eyes\n [33, 133], [133, 157], [157, 158], [158, 159], [159, 160], [160, 161], [161, 246], [246, 33],\n [362, 263], [263, 388], [388, 387], [387, 386], [386, 385], [385, 384], [384, 398], [398, 362],\n // Nose\n [168, 6], [6, 197], [197, 195], [195, 5], [5, 4],\n // Mouth\n [61, 146], [146, 91], [91, 181], [181, 84], [84, 17], [17, 314], [314, 405], [405, 321], [321, 375], [375, 291],\n [61, 185], [185, 40], [40, 39], [39, 37], [37, 0], [0, 267], [267, 269], [269, 270], [270, 409], [409, 291],\n ];\n \n connections.forEach(([i, j]) => {\n if (landmarks[i] && landmarks[j]) {\n const x1 = landmarks[i].x * w;\n const y1 = landmarks[i].y * h;\n const x2 = landmarks[j].x * w;\n const y2 = landmarks[j].y * h;\n \n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.stroke();\n }\n });\n \n // Draw key anchor points\n const mapping = CONFIG.meshMappings.find(m => m.id === state.mapping);\n if (mapping) {\n ctx.fillStyle = '#ff4466';\n mapping.anchorPoints.forEach(idx => {\n if (landmarks[idx]) {\n const x = landmarks[idx].x * w;\n const y = landmarks[idx].y * h;\n ctx.beginPath();\n ctx.arc(x, y, 4, 0, Math.PI * 2);\n ctx.fill();\n }\n });\n }\n \n // Draw all points\n ctx.fillStyle = '#6366f1';\n landmarks.forEach((lm, i) => {\n if (lm) {\n const x = lm.x * w;\n const y = lm.y * h;\n ctx.beginPath();\n ctx.arc(x, y, 1.5, 0, Math.PI * 2);\n ctx.fill();\n }\n });\n}\n\n// ============================================================================\n// MINDAR AR INITIALIZATION\n// ============================================================================\n\nasync function initAR() {\n setLoading(true, 'Loading libraries...', 5);\n \n try {\n // Import Three.js and loaders\n THREE = await import('three');\n const gltfModule = await import('three/addons/loaders/GLTFLoader.js');\n const objModule = await import('three/addons/loaders/OBJLoader.js');\n GLTFLoader = gltfModule.GLTFLoader;\n OBJLoader = objModule.OBJLoader;\n \n setLoading(true, 'Loading face tracking...', 20);\n \n const { MindARThree } = await import('mindar-face-three');\n \n clock = new THREE.Clock();\n \n setLoading(true, 'Starting camera...', 35);\n \n const container = document.getElementById('container');\n mindar = new MindARThree({ container });\n \n renderer = mindar.renderer;\n scene = mindar.scene;\n camera = mindar.camera;\n \n // Add ambient light\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n \n // Add directional light\n const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\n dirLight.position.set(0, 1, 2);\n scene.add(dirLight);\n \n // Add environment map for reflections\n const pmremGenerator = new THREE.PMREMGenerator(renderer);\n const envTexture = pmremGenerator.fromScene(new THREE.Scene()).texture;\n scene.environment = envTexture;\n \n await mindar.start();\n \n setLoading(true, 'Setting up effects...', 60);\n \n const video = mindar.video;\n const vTex = new THREE.VideoTexture(video);\n vTex.minFilter = THREE.LinearFilter;\n vTex.magFilter = THREE.LinearFilter;\n \n const style = CONFIG.styles.find(s => s.id === state.style) || CONFIG.styles[0];\n \n videoMat = new THREE.ShaderMaterial({\n uniforms: {\n map: { value: vTex },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(640, 480) }\n },\n vertexShader: \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: style.fragmentShader,\n transparent: true\n });\n \n // Add style params\n style.parameters.forEach(p => {\n videoMat.uniforms[p.id] = { value: state.params[style.id]?.[p.id] ?? p.default };\n });\n \n const aspect = video.videoWidth / video.videoHeight || 4/3;\n const geo = new THREE.PlaneGeometry(2.5 * aspect, 2.5);\n videoMesh = new THREE.Mesh(geo, videoMat);\n videoMesh.position.z = -2;\n if (state.flip) videoMesh.scale.x = -1;\n \n // Create face anchor for mesh overlay\n faceMeshAnchor = mindar.addAnchor(168); // Nose tip\n faceMeshAnchor.group.add(videoMesh);\n \n // Also add anchors for other face regions\n const eyeAnchor = mindar.addAnchor(6); // Between eyes\n const mouthAnchor = mindar.addAnchor(13); // Mouth\n \n setLoading(true, 'Loading saved meshes...', 80);\n \n // Load saved meshes from IndexedDB\n await initDB();\n state.meshes = await loadMeshesFromDB();\n updateMeshList();\n \n setStatus(true, 'Tracking active');\n setLoading(false);\n toast('Ready!', 'ok');\n \n // Face landmark tracking for preview\n let lastLandmarks = null;\n \n // Render loop\n function render() {\n requestAnimationFrame(render);\n \n videoMat.uniforms.time.value = clock.getElapsedTime();\n \n if (video.videoWidth) {\n videoMat.uniforms.resolution.value.set(video.videoWidth, video.videoHeight);\n }\n \n // Update face preview occasionally\n if (mindar.faceMesh && mindar.faceMesh.landmarks) {\n lastLandmarks = mindar.faceMesh.landmarks;\n }\n \n // FPS counter\n frames++;\n const now = performance.now();\n if (now - lastFps > 500) {\n document.getElementById('fps').textContent = Math.round(frames * 1000 / (now - lastFps));\n frames = 0;\n lastFps = now;\n \n // Update face preview (less frequently)\n if (lastLandmarks) {\n drawFacePreview(lastLandmarks);\n }\n }\n \n renderer.render(scene, camera);\n }\n \n render();\n \n } catch (err) {\n console.error(err);\n setLoading(false);\n setStatus(false, 'Error');\n toast('Failed: ' + err.message, 'err');\n }\n}\n\n// ============================================================================\n// INITIALIZATION\n// ============================================================================\n\ndocument.addEventListener('DOMContentLoaded', async () => {\n buildUI();\n \n const style = CONFIG.styles.find(s => s.id === state.style) || CONFIG.styles[0];\n state.style = style.id;\n state.params[style.id] = {};\n style.parameters.forEach(p => state.params[style.id][p.id] = p.default);\n buildParams(style);\n \n document.querySelector('.style-btn[data-id=\"' + style.id + '\"]')?.classList.add('active');\n \n // Initialize mapping transform\n const mapping = CONFIG.meshMappings.find(m => m.id === state.mapping);\n if (mapping) {\n state.transform = {\n scale: { ...mapping.scale },\n offset: { ...mapping.offset },\n rotation: { ...mapping.rotation }\n };\n updateTransformInputs();\n }\n \n await initAR();\n});\n`;\n\n// ============================================================================\n// HANDLER\n// ============================================================================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/config\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n if (url.pathname === \"/api/meshes\" && req.method === \"GET\") {\n // In a real app, this would return saved meshes from a database\n return Response.json({ meshes: [] });\n }\n\n const html = `\n\n\n Face Lab 2027 - 3D Mesh Studio\n \n \n \n \n\n\n${HTML}\n\n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\nexport { DEFAULT_CONFIG, DEFAULT_MESH_MAPPINGS };","deleted","label",[99],"permalink","https://www.val.town/x/banks/patternlanguage/code/main.ts","extension","actionData","errors"]