Face Lab 2027 - 3D Mesh Studio

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_171":172,"_173":174},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_129":-5,"_20":130,"_22":131,"_132":133,"_134":135,"_25":136,"_24":-5,"_137":-5,"_138":-5,"_139":54,"_140":141,"_142":45,"_143":-5,"_144":-5,"_145":146},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","banks","name","patternlanguage","branchName","main","version","path","","project",{"_34":75,"_13":14,"_46":76,"_77":-5,"_78":54,"_79":80,"_81":80,"_82":-5,"_83":-5,"_84":85,"_86":-5,"_87":54,"_88":-5,"_89":-5,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_113":54},"tree",[66,67],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":63,"_51":64,"_53":54,"_55":-5,"_18":65},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","2b6c2712-e886-11f0-9348-42dde27851f2","styles.ts","fileId","d73570f0-e857-11f0-8c47-42dde27851f2","parentId","branchId","8db9776e-e857-11f0-bcde-42dde27851f2","branchVersion",77,"latest",true,"createdAt",["D",1767432340017],16,"fileType","script","content","const STYLES = `\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a25;\n --bg-card: #16161f;\n --bg-hover: #1e1e2a;\n \n --text-primary: #ffffff;\n --text-secondary: #a0a0b0;\n --text-muted: #606070;\n \n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #10b981;\n --accent-warning: #f59e0b;\n --accent-error: #ef4444;\n \n --border-color: #2a2a35;\n --border-radius: 12px;\n --border-radius-sm: 8px;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);\n \n --transition-fast: 150ms ease;\n --transition-normal: 250ms ease;\n \n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--font-sans);\n background: var(--bg-primary);\n color: var(--text-primary);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Layout */\n.app-container {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n.sidebar {\n width: 320px;\n min-width: 320px;\n height: 100%;\n background: var(--bg-secondary);\n border-right: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n}\n\n/* Sidebar Header */\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: var(--border-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n}\n\n.logo-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.status-bar {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n.status-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--accent-success);\n animation: pulse 2s infinite;\n}\n\n.status-dot.warning { background: var(--accent-warning); }\n.status-dot.error { background: var(--accent-error); }\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n}\n\n.tab-btn {\n flex: 1;\n padding: 12px;\n background: transparent;\n border: none;\n color: var(--text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n background: var(--bg-hover);\n}\n\n.tab-btn.active {\n color: var(--accent-primary);\n}\n\n.tab-btn.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--accent-primary);\n}\n\n/* Sidebar Content */\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.sidebar-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.sidebar-content::-webkit-scrollbar-track {\n background: var(--bg-tertiary);\n}\n\n.sidebar-content::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 3px;\n}\n\n.tab-panel {\n display: none;\n}\n\n.tab-panel.active {\n display: block;\n}\n\n/* Style Grid */\n.style-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.style-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n padding: 16px;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n overflow: hidden;\n}\n\n.style-card:hover {\n border-color: var(--accent-primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.style-card.active {\n border-color: var(--accent-primary);\n background: rgba(99, 102, 241, 0.1);\n}\n\n.style-card.locked {\n opacity: 0.6;\n}\n\n.style-card.locked::after {\n content: '🔒';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 12px;\n}\n\n.style-preview {\n font-size: 32px;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.style-name {\n font-size: 13px;\n font-weight: 600;\n text-align: center;\n margin-bottom: 4px;\n}\n\n.style-tier {\n font-size: 10px;\n text-align: center;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.style-tier.free { color: var(--accent-success); }\n.style-tier.pro { color: var(--accent-primary); }\n.style-tier.enterprise { color: var(--accent-secondary); }\n\n/* Controls */\n.control-group {\n margin-bottom: 20px;\n}\n\n.control-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.control-value {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--accent-primary);\n}\n\n/* Slider */\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--bg-tertiary);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-primary);\n border-radius: 50%;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n box-shadow: 0 0 10px var(--accent-primary);\n}\n\n/* Toggle */\n.toggle-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background: var(--bg-card);\n border-radius: var(--border-radius-sm);\n margin-bottom: 8px;\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle {\n width: 44px;\n height: 24px;\n background: var(--bg-tertiary);\n border-radius: 12px;\n position: relative;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.toggle.active {\n background: var(--accent-primary);\n}\n\n.toggle::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition-fast);\n}\n\n.toggle.active::after {\n left: 22px;\n}\n\n/* Color Picker */\n.color-picker-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.color-preview {\n width: 36px;\n height: 36px;\n border-radius: var(--border-radius-sm);\n border: 2px solid var(--border-color);\n cursor: pointer;\n}\n\n.color-input {\n flex: 1;\n padding: 8px 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 13px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius-sm);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.btn-primary {\n background: var(--accent-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--accent-secondary);\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background: var(--bg-hover);\n border-color: var(--accent-primary);\n}\n\n.btn-icon {\n width: 40px;\n height: 40px;\n padding: 0;\n border-radius: 50%;\n}\n\n/* Canvas Container */\n.canvas-container {\n flex: 1;\n position: relative;\n background: var(--bg-primary);\n overflow: hidden;\n}\n\n#render-canvas {\n width: 100%;\n height: 100%;\n}\n\n.video-hidden {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Overlay Controls */\n.overlay-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n padding: 12px 20px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 50px;\n border: 1px solid var(--border-color);\n}\n\n.overlay-btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: 1px solid var(--border-color);\n color: var(--text-primary);\n font-size: 20px;\n cursor: pointer;\n transition: var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.overlay-btn:hover {\n background: var(--accent-primary);\n border-color: var(--accent-primary);\n transform: scale(1.1);\n}\n\n.overlay-btn.recording {\n background: var(--accent-error);\n border-color: var(--accent-error);\n animation: pulse-red 1s infinite;\n}\n\n@keyframes pulse-red {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\n}\n\n/* Stats Overlay */\n.stats-overlay {\n position: absolute;\n top: 20px;\n left: 20px;\n padding: 12px 16px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-sm);\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n pointer-events: none;\n}\n\n.stats-row {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 4px;\n}\n\n.stats-row:last-child {\n margin-bottom: 0;\n}\n\n.stats-value {\n color: var(--accent-success);\n}\n\n.stats-value.warning { color: var(--accent-warning); }\n.stats-value.error { color: var(--accent-error); }\n\n/* Watermark */\n.watermark {\n position: absolute;\n bottom: 80px;\n right: 20px;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.6);\n border-radius: var(--border-radius-sm);\n font-size: 11px;\n color: var(--text-muted);\n pointer-events: none;\n}\n\n/* Settings Panel */\n.settings-section {\n margin-bottom: 24px;\n}\n\n.settings-section-title {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 12px;\n}\n\n/* License Panel */\n.license-card {\n padding: 20px;\n background: var(--bg-card);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n text-align: center;\n}\n\n.license-tier {\n font-size: 24px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.license-features {\n margin: 16px 0;\n text-align: left;\n}\n\n.license-feature {\n display: flex; align-items: center;\n gap: 8px;\n padding: 8px 0;\n font-size: 13px;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n}\n\n.license-feature:last-child {\n border-bottom: none;\n}\n\n.feature-icon {\n width: 20px;\n text-align: center;\n}\n\n.feature-icon.enabled { color: var(--accent-success); }\n.feature-icon.disabled { color: var(--text-muted); }\n\n/* Modal */\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active {\n opacity: 1;\n visibility: visible;\n}\n\n.modal {\n background: var(--bg-secondary);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow: auto;\n transform: translateY(20px);\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active .modal {\n transform: translateY(0);\n}\n\n.modal-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.modal-title {\n font-size: 18px;\n font-weight: 600;\n}\n\n.modal-close {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--transition-fast);\n}\n\n.modal-close:hover {\n background: var(--accent-error);\n color: white;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n padding: 20px;\n border-top: 1px solid var(--border-color);\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n}\n\n/* License Input */\n.license-input-wrapper {\n margin-bottom: 20px;\n}\n\n.license-input {\n width: 100%;\n padding: 16px;\n background: var(--bg-card);\n border: 2px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 14px;\n text-align: center;\n letter-spacing: 2px;\n transition: var(--transition-fast);\n}\n\n.license-input:focus {\n outline: none;\n border-color: var(--accent-primary);\n}\n\n.license-input.valid {\n border-color: var(--accent-success);\n}\n\n.license-input.invalid {\n border-color: var(--accent-error);\n}\n\n/* Toast Notifications */\n.toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 2000;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.toast {\n padding: 12px 20px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.toast.success { border-left: 3px solid var(--accent-success); }\n.toast.error { border-left: 3px solid var(--accent-error); }\n.toast.warning { border-left: 3px solid var(--accent-warning); }\n.toast.info { border-left: 3px solid var(--accent-primary); }\n\n/* Loading Spinner */\n.spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--bg-tertiary);\n border-top-color: var(--accent-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(10, 10, 15, 0.9);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n z-index: 100;\n}\n\n.loading-text {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .app-container {\n flex-direction: column;\n }\n \n .sidebar {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 50vh;\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n \n .style-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n \n .overlay-controls {\n bottom: 10px;\n padding: 8px 16px;\n }\n \n .overlay-btn {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n}\n`;\n\nexport default STYLES;","deleted",false,"label",[36],"06683b7a-e89c-11f0-9c2f-42dde27851f2","main.ts","8dbb9ad0-e857-11f0-bcde-42dde27851f2",80,["D",1767441726708],60,"http","// ============================================================================\n// FACE LAB 2027 - AI Avatar Studio\n// Edge-first, offline-capable face tracking with pattern-based customization\n// Now with Custom 3D Mesh Upload & Face Mapping\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n ui: \"slider\" | \"toggle\" | \"colorpicker\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n tier: \"free\" | \"basic\" | \"pro\";\n parameters: PatternParameter[];\n fragmentShader: string;\n preview: string;\n}\n\ninterface MeshMapping {\n id: string;\n name: string;\n type: \"full_face\" | \"eyes\" | \"nose\" | \"mouth\" | \"forehead\" | \"custom\";\n anchorPoints: number[]; // MindAR face landmark indices\n scale: { x: number; y: number; z: number };\n offset: { x: number; y: number; z: number };\n rotation: { x: number; y: number; z: number };\n}\n\ninterface CustomMesh {\n id: string;\n name: string;\n data: ArrayBuffer | string;\n format: \"obj\" | \"glb\" | \"gltf\";\n mapping: MeshMapping;\n thumbnail?: string;\n createdAt: number;\n}\n\ninterface AppConfig {\n version: string;\n styles: StyleDefinition[];\n defaultStyle: string;\n meshMappings: MeshMapping[];\n}\n\n// ============================================================================\n// DEFAULT CONFIGURATION\n// ============================================================================\n\nconst DEFAULT_MESH_MAPPINGS: MeshMapping[] = [\n {\n id: \"full_face\",\n name: \"Full Face\",\n type: \"full_face\",\n anchorPoints: [168], // Nose tip as primary anchor\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 id: \"mask\",\n name: \"Face Mask\",\n type: \"full_face\",\n anchorPoints: [168, 6, 197, 195, 5], // Multiple face landmarks for better tracking\n scale: { x: 1.2, y: 1.2, z: 0.5 },\n offset: { x: 0, y: 0, z: 0.1 },\n rotation: { x: 0, y: 0, z: 0 },\n },\n {\n id: \"glasses\",\n name: \"Glasses/Eyes\",\n type: \"eyes\",\n anchorPoints: [6], // Between eyes\n scale: { x: 1, y: 1, z: 1 },\n offset: { x: 0, y: 0, z: 0.05 },\n rotation: { x: 0, y: 0, z: 0 },\n },\n {\n id: \"nose_overlay\",\n name: \"Nose\",\n type: \"nose\",\n anchorPoints: [4], // Nose bridge\n scale: { x: 0.8, y: 0.8, z: 0.8 },\n offset: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n },\n {\n id: \"mouth_overlay\",\n name: \"Mouth\",\n type: \"mouth\",\n anchorPoints: [13], // Upper lip\n scale: { x: 1, y: 1, z: 1 },\n offset: { x: 0, y: -0.02, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n },\n {\n id: \"forehead\",\n name: \"Forehead/Crown\",\n type: \"forehead\",\n anchorPoints: [10], // Forehead\n scale: { x: 1, y: 1, z: 1 },\n offset: { x: 0, y: 0.05, z: 0 },\n rotation: { x: -0.2, y: 0, z: 0 },\n },\n];\n\nconst DEFAULT_CONFIG: AppConfig = {\n version: \"2.0.0\",\n defaultStyle: \"none\",\n meshMappings: DEFAULT_MESH_MAPPINGS,\n styles: [\n {\n id: \"none\",\n name: \"No Effect\",\n description: \"Raw camera feed\",\n tier: \"free\",\n preview: \"📷\",\n parameters: [],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n void main() {\n gl_FragColor = texture2D(map, vUv);\n }\n `,\n },\n {\n id: \"sketch\",\n name: \"Pencil Sketch\",\n description: \"Hand-drawn sketch effect with wobble\",\n tier: \"free\",\n preview: \"✏️\",\n parameters: [\n {\n id: \"edgeStrength\",\n name: \"Edge Strength\",\n type: \"float\",\n default: 1.5,\n min: 0.5,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobble\",\n name: \"Wobble\",\n type: \"float\",\n default: 0.002,\n min: 0.0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"paperWhite\",\n name: \"Paper Brightness\",\n type: \"float\",\n default: 0.95,\n min: 0.7,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float edgeStrength;\n uniform float wobble;\n uniform float paperWhite;\n \n float rand(vec2 co) {\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n }\n \n float noise(vec2 p) {\n vec2 i = floor(p);\n vec2 f = fract(p);\n float a = rand(i);\n float b = rand(i + vec2(1.0, 0.0));\n float c = rand(i + vec2(0.0, 1.0));\n float d = rand(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n }\n \n void main() {\n vec2 uv = vUv;\n \n uv += vec2(\n noise(vUv * 8.0 + time) - 0.5,\n noise(vUv * 8.0 + time + 100.0) - 0.5\n ) * wobble;\n \n vec2 texel = edgeStrength / resolution;\n \n float tl = dot(texture2D(map, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, uv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.02, 0.15, edge);\n \n float paper = paperWhite - noise(vUv * 80.0) * 0.04;\n \n vec3 color = mix(vec3(paper), vec3(0.1), edge);\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"toon\",\n name: \"Cartoon\",\n description: \"Cel-shaded cartoon effect\",\n tier: \"free\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"levels\",\n name: \"Color Levels\",\n type: \"float\",\n default: 5.0,\n min: 2.0,\n max: 10.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"outline\",\n name: \"Outline\",\n type: \"float\",\n default: 1.2,\n min: 0.0,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"saturation\",\n name: \"Saturation\",\n type: \"float\",\n default: 1.4,\n min: 0.5,\n max: 2.5,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float levels;\n uniform float outline;\n uniform float saturation;\n \n vec3 rgb2hsv(vec3 c) {\n vec4 K = vec4(0.0, -1.0/3.0, 2.0/3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 tex = texture2D(map, vUv);\n vec3 color = tex.rgb;\n \n vec3 hsv = rgb2hsv(color);\n hsv.y = clamp(hsv.y * saturation, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n color = floor(color * levels + 0.5) / levels;\n \n vec2 texel = outline / resolution;\n float c0 = dot(texture2D(map, vUv).rgb, vec3(0.33));\n float c1 = dot(texture2D(map, vUv + vec2(texel.x, 0.0)).rgb, vec3(0.33));\n float c2 = dot(texture2D(map, vUv + vec2(-texel.x, 0.0)).rgb, vec3(0.33));\n float c3 = dot(texture2D(map, vUv + vec2(0.0, texel.y)).rgb, vec3(0.33));\n float c4 = dot(texture2D(map, vUv + vec2(0.0, -texel.y)).rgb, vec3(0.33));\n \n float edge = abs(c1 - c2) + abs(c3 - c4);\n edge = smoothstep(0.05, 0.2, edge);\n \n color = mix(color, vec3(0.1), edge * step(0.1, outline));\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"mesh3d\",\n name: \"3D Mesh Overlay\",\n description: \"Custom 3D mesh mapped to face\",\n tier: \"pro\",\n preview: \"🎭\",\n parameters: [\n {\n id: \"meshOpacity\",\n name: \"Mesh Opacity\",\n type: \"float\",\n default: 1.0,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"meshScale\",\n name: \"Scale\",\n type: \"float\",\n default: 1.0,\n min: 0.5,\n max: 2.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"wireframe\",\n name: \"Wireframe\",\n type: \"float\",\n default: 0.0,\n min: 0.0,\n max: 1.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"envMapIntensity\",\n name: \"Reflection\",\n type: \"float\",\n default: 0.5,\n min: 0.0,\n max: 2.0,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n void main() {\n gl_FragColor = texture2D(map, vUv);\n }\n `,\n },\n ],\n};\n\n// ============================================================================\n// STYLES\n// ============================================================================\n\nconst STYLES = `\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\n:root {\n --bg: #0d0d12;\n --bg2: #161620;\n --bg3: #1e1e2a;\n --text: #fff;\n --text2: #8888aa;\n --accent: #6366f1;\n --accent2: #8b5cf6;\n --border: #2a2a3a;\n --success: #22c55e;\n --error: #ef4444;\n --warning: #f59e0b;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n}\n\n.app {\n display: flex;\n height: 100%;\n}\n\n.sidebar {\n width: 280px;\n background: var(--bg2);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n}\n\n.header {\n padding: 14px 16px;\n border-bottom: 1px solid var(--border);\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 700;\n font-size: 16px;\n}\n\n.status {\n margin-top: 8px;\n font-size: 11px;\n color: var(--text2);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--error);\n}\n\n.dot.ok { background: var(--success); }\n\n.tabs {\n display: flex;\n border-bottom: 1px solid var(--border);\n}\n\n.tab {\n flex: 1;\n padding: 10px;\n background: transparent;\n border: none;\n color: var(--text2);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.tab:hover { color: var(--text); }\n.tab.active {\n color: var(--accent);\n border-bottom: 2px solid var(--accent);\n margin-bottom: -1px;\n}\n\n.tab-content {\n display: none;\n flex: 1;\n overflow-y: auto;\n}\n\n.tab-content.active {\n display: flex;\n flex-direction: column;\n}\n\n.styles {\n flex: 1;\n overflow-y: auto;\n padding: 10px;\n}\n\n.style-btn {\n width: 100%;\n padding: 10px 12px;\n background: var(--bg3);\n border: 1px solid var(--border);\n border-radius: 8px;\n margin-bottom: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 10px;\n color: var(--text);\n text-align: left;\n transition: all 0.12s;\n}\n\n.style-btn:hover {\n border-color: var(--accent);\n}\n\n.style-btn.active {\n border-color: var(--accent);\n background: rgba(99, 102, 241, 0.15);\n}\n\n.style-icon { font-size: 20px; }\n.style-name { font-weight: 500; font-size: 13px; }\n.style-desc { font-size: 10px; color: var(--text2); }\n\n.params {\n border-top: 1px solid var(--border);\n padding: 12px;\n max-height: 220px;\n overflow-y: auto;\n}\n\n.params-title {\n font-size: 10px;\n text-transform: uppercase;\n color: var(--text2);\n margin-bottom: 10px;\n letter-spacing: 0.5px;\n}\n\n.param {\n margin-bottom: 12px;\n}\n\n.param-head {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n margin-bottom: 4px;\n}\n\n.param-val {\n color: var(--accent);\n font-family: monospace;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 4px;\n -webkit-appearance: none;\n background: var(--bg);\n border-radius: 2px;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 12px;\n height: 12px;\n background: var(--accent);\n border-radius: 50%;\n cursor: pointer;\n}\n\n/* Mesh Upload Section */\n.mesh-section {\n padding: 12px;\n}\n\n.section-title {\n font-size: 11px;\n text-transform: uppercase;\n color: var(--text2);\n margin-bottom: 10px;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.upload-zone {\n border: 2px dashed var(--border);\n border-radius: 10px;\n padding: 24px 16px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n margin-bottom: 12px;\n}\n\n.upload-zone:hover {\n border-color: var(--accent);\n background: rgba(99, 102, 241, 0.05);\n}\n\n.upload-zone.drag-over {\n border-color: var(--accent);\n background: rgba(99, 102, 241, 0.1);\n}\n\n.upload-icon {\n font-size: 32px;\n margin-bottom: 8px;\n}\n\n.upload-text {\n font-size: 12px;\n color: var(--text2);\n margin-bottom: 4px;\n}\n\n.upload-hint {\n font-size: 10px;\n color: var(--text2);\n opacity: 0.7;\n}\n\n.mesh-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.mesh-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n background: var(--bg3);\n border: 1px solid var(--border);\n border-radius: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n transition: all 0.12s;\n}\n\n.mesh-item:hover {\n border-color: var(--accent);\n}\n\n.mesh-item.active {\n border-color: var(--accent);\n background: rgba(99, 102, 241, 0.15);\n}\n\n.mesh-thumb {\n width: 36px;\n height: 36px;\n background: var(--bg);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n}\n\n.mesh-info {\n flex: 1;\n min-width: 0;\n}\n\n.mesh-name {\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.mesh-meta {\n font-size: 10px;\n color: var(--text2);\n}\n\n.mesh-actions {\n display: flex;\n gap: 4px;\n}\n\n.mesh-btn {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n border: none;\n background: var(--bg);\n color: var(--text2);\n cursor: pointer;\n font-size: 11px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mesh-btn:hover {\n background: var(--accent);\n color: var(--text);\n}\n\n.mesh-btn.delete:hover {\n background: var(--error);\n}\n\n/* Mapping Controls */\n.mapping-section {\n padding: 12px;\n border-top: 1px solid var(--border);\n}\n\n.mapping-select {\n width: 100%;\n padding: 8px 10px;\n background: var(--bg3);\n border: 1px solid var(--border);\n border-radius: 6px;\n color: var(--text);\n font-size: 12px;\n margin-bottom: 10px;\n}\n\n.mapping-select option {\n background: var(--bg2);\n}\n\n.transform-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n margin-bottom: 10px;\n}\n\n.transform-item {\n text-align: center;\n}\n\n.transform-label {\n font-size: 9px;\n color: var(--text2);\n text-transform: uppercase;\n margin-bottom: 4px;\n}\n\n.transform-input {\n width: 100%;\n padding: 6px;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 4px;\n color: var(--text);\n font-size: 11px;\n text-align: center;\n}\n\n.transform-input:focus {\n outline: none;\n border-color: var(--accent);\n}\n\n/* Face Mesh Preview */\n.face-preview {\n background: var(--bg);\n border-radius: 8px;\n padding: 10px;\n margin-top: 10px;\n}\n\n.face-preview-title {\n font-size: 10px;\n color: var(--text2);\n margin-bottom: 8px;\n}\n\n.face-preview-canvas {\n width: 100%;\n height: 120px;\n background: var(--bg3);\n border-radius: 4px;\n}\n\n.main {\n flex: 1;\n position: relative;\n background: #000;\n}\n\n#container {\n width: 100%;\n height: 100%;\n}\n\n.loading {\n position: absolute;\n inset: 0;\n background: rgba(13, 13, 18, 0.95);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 50;\n}\n\n.spinner {\n width: 36px;\n height: 36px;\n border: 3px solid var(--bg3);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.7s linear infinite;\n}\n\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.loading-text {\n margin-top: 14px;\n color: var(--text2);\n font-size: 13px;\n}\n\n.progress-bar {\n width: 200px;\n height: 4px;\n background: var(--bg3);\n border-radius: 2px;\n margin-top: 12px;\n overflow: hidden;\n}\n\n.progress-fill {\n height: 100%;\n background: var(--accent);\n transition: width 0.3s;\n}\n\n.stats {\n position: absolute;\n top: 10px;\n left: 10px;\n background: rgba(0,0,0,0.7);\n padding: 8px 12px;\n border-radius: 6px;\n font-family: monospace;\n font-size: 11px;\n color: var(--text2);\n}\n\n.stats span { color: var(--success); }\n\n.controls {\n position: absolute;\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 8px;\n background: rgba(0,0,0,0.6);\n padding: 8px 14px;\n border-radius: 24px;\n}\n\n.ctrl {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 1px solid var(--border);\n background: var(--bg2);\n color: var(--text);\n font-size: 16px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ctrl:hover {\n background: var(--accent);\n border-color: var(--accent);\n}\n\n.ctrl.active {\n background: var(--accent);\n border-color: var(--accent);\n}\n\n.toast-box {\n position: fixed;\n top: 12px;\n right: 12px;\n z-index: 999;\n}\n\n.toast {\n background: var(--bg2);\n border: 1px solid var(--border);\n padding: 10px 14px;\n border-radius: 6px;\n margin-bottom: 6px;\n font-size: 12px;\n animation: fadeIn 0.2s;\n}\n\n.toast.ok { border-left: 3px solid var(--success); }\n.toast.err { border-left: 3px solid var(--error); }\n.toast.warn { border-left: 3px solid var(--warning); }\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateX(20px); }\n to { opacity: 1; transform: translateX(0); }\n}\n\n/* Modal */\n.modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.8);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.modal-overlay.active {\n display: flex;\n}\n\n.modal {\n background: var(--bg2);\n border: 1px solid var(--border);\n border-radius: 12px;\n width: 90%;\n max-width: 500px;\n max-height: 80vh;\n overflow: hidden;\n}\n\n.modal-header {\n padding: 14px 16px;\n border-bottom: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.modal-title {\n font-weight: 600;\n font-size: 14px;\n}\n\n.modal-close {\n background: none;\n border: none;\n color: var(--text2);\n cursor: pointer;\n font-size: 18px;\n}\n\n.modal-body {\n padding: 16px;\n overflow-y: auto;\n}\n\n.modal-footer {\n padding: 12px 16px;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n\n.btn {\n padding: 8px 16px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: var(--bg3);\n color: var(--text);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.btn:hover {\n border-color: var(--accent);\n}\n\n.btn-primary {\n background: var(--accent);\n border-color: var(--accent);\n}\n\n.btn-primary:hover {\n background: var(--accent2);\n border-color: var(--accent2);\n}\n\n/* Hidden file input */\n#mesh-input {\n display: none;\n}\n\n@media (max-width: 700px) {\n .app { flex-direction: column-reverse; }\n .sidebar {\n width: 100%;\n max-height: 45%;\n border-right: none;\n border-top: 1px solid var(--border);\n }\n .params { max-height: 120px; }\n .mesh-list { max-height: 120px; }\n}\n`;\n\n// ============================================================================\n// HTML\n// ============================================================================\n\nconst HTML = `\n

\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 };",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":72,"_17":62,"_49":63,"_51":64,"_53":54,"_55":-5,"_69":73,"_18":74},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_69":70,"_18":71},["D",1767432340017],"children",[],[36],["D",1767441726708],[],[58],"8db936b4-e857-11f0-bcde-42dde27851f2",["D",1767412318598],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019b43e2-aa14-727d-9d22-4c67294d95f4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_128":124},"org",{"_11":12,"_122":-5,"_123":124,"_84":85,"_125":126,"_127":54},"branch",{"_17":60,"_13":16,"_34":41,"_114":75,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":75,"_13":14,"_46":167,"_77":-5,"_78":54,"_79":80,"_81":80,"_82":-5,"_83":-5,"_84":85,"_86":-5,"_87":54,"_88":-5,"_89":-5,"_90":91,"_92":93,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":168,"_109":169,"_111":170,"_113":54},[161,162],"files",[161,162],"counts",{"_151":91,"_152":153,"_154":91,"_31":155,"_156":157},[147,148],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":63,"_51":64,"_53":54,"_55":-5,"_18":150},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":149},[36],[58],"pulls","branches",1,"forks",{"_158":91,"_160":91},"connections",{"_158":91,"_159":91},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":72,"_17":62,"_49":63,"_51":64,"_53":54,"_55":-5,"_69":165,"_18":166},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":68,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_69":163,"_18":164},[],[36],[],[58],["D",1767412318598],{"_11":12,"_128":124},{"_11":12,"_122":-5,"_123":124,"_84":85,"_125":126,"_127":54},{"_17":60,"_13":16,"_34":41,"_114":75,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"ctx",{"_107":-5,"_144":204,"_205":206,"_207":208,"_209":54,"_210":54,"_211":54,"_212":45,"_213":-5,"_214":-7,"_215":-7,"_216":91,"_217":54,"_218":54,"_219":-5,"_220":54,"_221":54,"_222":54,"_223":-5},"ENV",{"_175":176,"_177":178,"_179":16,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]