[{"_1":2,"_171":-5,"_172":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","96591c8dbfc078fdbadefbda462961392fdd9880","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_148":149,"_168":169,"_170":-5},"handle","banks","name","facelab","path","app.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","ff28b2e4-e4e6-11f0-8e11-42dde27851f2","createdAt",["D",1767034122291],"deletedAt","legacyEnvVars","privacy","unlisted","description","imageUrl","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019b43e2-aa14-727d-9d22-4c67294d95f4","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","org",{"_94":95,"_133":130,"_12":112},"avatar","branch",{"_136":137,"_96":44,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":97,"_146":95},"version",70,"ff28fbd2-e4e6-11f0-8e11-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":150,"_96":99,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":158,"_104":159,"_136":160,"_161":162,"_163":164,"_165":20,"_166":-5,"_98":167},"78f42216-e537-11f0-bae0-42dde27851f2","fileId","db22e52a-e4e8-11f0-874c-42dde27851f2","parentId","branchId","branchVersion",59,"latest",true,["D",1767068686364],5,"fileType","script","content","/** @facelab/app.ts */\n\nimport * as THREE from \"https://unpkg.com/three@0.160.0/build/three.module.js\";\nimport { MindARThree } from \"https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-face-three.prod.js\";\n\nimport { configStore, useConfig } from \"./core/config.ts\";\nimport { DEFAULT_CONFIG } from \"./core/constants.ts\";\nimport type { AppConfig } from \"./core/types.ts\";\n\nimport { createSceneContext, type SceneContext } from \"./engine/scene.ts\";\nimport { VideoFrameBuffer } from \"./engine/frame-buffer.ts\";\nimport {\n createCelMaterial,\n createOutlineMaterial,\n createStandardMaterial,\n updateCelMaterialColor,\n updateOutlineMaterial,\n} from \"./engine/materials.ts\";\n\nimport {\n projectLandmarks,\n render2DOverlay,\n resetRenderer,\n} from \"./renderers/canvas-2d.ts\";\nimport { getTeethAssets, loadTeethAssets } from \"./renderers/teeth.ts\";\n\nimport {\n bindWizardNavigation,\n createWizardController,\n createWizardUpdater,\n queryWizardElements,\n} from \"./ui/wizard.ts\";\nimport { createBindingManager } from \"./ui/bindings.ts\";\nimport { toast } from \"./ui/toast.ts\";\n\n// ═══════════════════════════════════════════════════════════════════════════\n// APPLICATION CLASS\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport class FaceLabApp {\n private mindAR!: MindARThree;\n private sceneCtx!: SceneContext;\n private frameBuffer!: VideoFrameBuffer;\n private bindingManager!: ReturnType;\n\n private faceMesh!: THREE.Mesh;\n private outlineMesh!: THREE.Mesh;\n private celMaterial!: THREE.ShaderMaterial;\n private outlineMaterial!: THREE.ShaderMaterial;\n private standardMaterial!: THREE.MeshStandardMaterial;\n\n private overlayCanvas!: HTMLCanvasElement;\n private overlayCtx!: CanvasRenderingContext2D;\n private delayedVideoCanvas!: HTMLCanvasElement;\n private delayedVideoCtx!: CanvasRenderingContext2D;\n\n private frameCounter = 0;\n private lastFpsTime = performance.now();\n private frameCount = 0;\n private currentFps = 60;\n\n private wizardCleanup?: () => void;\n\n async initialize(): Promise {\n // Pre-load assets\n await loadTeethAssets();\n\n // Initialize MindAR\n const container = document.querySelector(\"#container\") as HTMLElement;\n this.mindAR = new MindARThree({ container });\n\n const { renderer, scene, camera: arCamera } = this.mindAR;\n\n // Create scene context\n this.sceneCtx = createSceneContext({\n renderer,\n scene,\n arCamera,\n initialConfig: useConfig(),\n });\n\n // Create materials\n const config = useConfig();\n this.celMaterial = createCelMaterial({ color: config.face.skinColor });\n this.outlineMaterial = createOutlineMaterial({\n color: config.face.outlineColor,\n width: config.face.outlineWidth,\n });\n this.standardMaterial = createStandardMaterial();\n\n // Create face mesh\n this.faceMesh = this.mindAR.addFaceMesh();\n this.faceMesh.material = this.celMaterial;\n scene.add(this.faceMesh);\n\n // Create outline mesh\n this.outlineMesh = new THREE.Mesh(\n this.faceMesh.geometry,\n this.outlineMaterial,\n );\n this.outlineMesh.scale.multiplyScalar(1.02);\n scene.add(this.outlineMesh);\n\n // Setup canvases\n this.setupCanvases(container);\n\n // Setup frame buffer\n this.frameBuffer = new VideoFrameBuffer({ maxFrames: 15 });\n\n // Setup UI bindings\n this.setupBindings();\n\n // Setup wizard\n this.setupWizard();\n\n // Start MindAR\n await this.mindAR.start();\n\n // Insert delayed video canvas after MindAR creates video element\n this.insertDelayedVideoCanvas(container);\n\n // Handle resize\n this.handleResize();\n\n // Show loaded toast\n if (localStorage.getItem(\"facelab-2027-config\")) {\n toast.info(\"Configuration loaded\");\n }\n\n // Start render loop\n this.startRenderLoop();\n }\n\n private setupCanvases(container: HTMLElement): void {\n // Overlay canvas (for 2D rendering on top)\n this.overlayCanvas = document.getElementById(\n \"overlay-canvas\",\n ) as HTMLCanvasElement;\n this.overlayCtx = this.overlayCanvas.getContext(\"2d\", {\n alpha: true,\n desynchronized: true,\n })!;\n\n // Delayed video canvas\n this.delayedVideoCanvas = document.createElement(\"canvas\");\n this.delayedVideoCanvas.id = \"delayed-video-canvas\";\n this.delayedVideoCanvas.style.cssText = `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n transform: scaleX(-1);\n `;\n this.delayedVideoCtx = this.delayedVideoCanvas.getContext(\"2d\")!;\n }\n\n private insertDelayedVideoCanvas(container: HTMLElement): void {\n const video = container.querySelector(\"video\");\n const threeCanvas = this.sceneCtx.renderer.domElement;\n\n if (video) {\n video.after(this.delayedVideoCanvas);\n threeCanvas.style.position = \"absolute\";\n threeCanvas.style.zIndex = \"2\";\n this.updateVideoVisibility();\n }\n }\n\n private handleResize(): void {\n const dpr = window.devicePixelRatio;\n const w = 640;\n const h = 480;\n\n this.sceneCtx.renderer.setSize(w, h);\n this.sceneCtx.renderer.setPixelRatio(dpr);\n\n this.overlayCanvas.width = w * dpr;\n this.overlayCanvas.height = h * dpr;\n\n this.delayedVideoCanvas.width = w;\n this.delayedVideoCanvas.height = h;\n }\n\n private setupBindings(): void {\n this.bindingManager = createBindingManager();\n\n // Face bindings\n this.bindingManager\n .color({\n inputId: \"skin-color\",\n previewId: \"skin-color-preview\",\n hexId: \"skin-color-hex\",\n section: \"face\",\n key: \"skinColor\",\n onChange: (color) => updateCelMaterialColor(this.celMaterial, color),\n })\n .color({\n inputId: \"outline-color\",\n previewId: \"outline-color-preview\",\n hexId: \"outline-color-hex\",\n section: \"face\",\n key: \"outlineColor\",\n onChange: (color) =>\n updateOutlineMaterial(this.outlineMaterial, { color }),\n })\n .slider({\n sliderId: \"outline-width\",\n valueId: \"outline-width-value\",\n section: \"face\",\n key: \"outlineWidth\",\n format: (v) => v.toFixed(3),\n onChange: (width) =>\n updateOutlineMaterial(this.outlineMaterial, { width }),\n })\n .slider({\n sliderId: \"lerp-factor\",\n valueId: \"lerp-value\",\n section: \"system\",\n key: \"lerpFactor\",\n })\n .slider({\n sliderId: \"frame-delay\",\n valueId: \"frame-delay-value\",\n section: \"system\",\n key: \"frameDelay\",\n format: (v) => v.toFixed(0),\n onChange: (delay) => {\n document.getElementById(\"delay-pill\")!.textContent =\n `Delay: ${delay}f`;\n },\n })\n .toggle({\n elementId: \"toggle-delayed-video\",\n section: \"system\",\n key: \"showDelayedVideo\",\n onChange: () => this.updateVideoVisibility(),\n })\n .toggle({\n elementId: \"toggle-dev-view\",\n section: \"system\",\n key: \"devMode\",\n onChange: (enabled) => {\n this.sceneCtx.setDevMode(enabled);\n document.getElementById(\"stats-panel\")!.classList.toggle(\n \"visible\",\n enabled,\n );\n\n const container = document.getElementById(\"container\")!;\n const video = container.querySelector(\"video\");\n if (video) {\n video.style.opacity = enabled\n ? \"0.05\"\n : (useConfig().system.showDelayedVideo ? \"0\" : \"1\");\n }\n },\n });\n\n // Eye bindings\n this.bindingManager\n .color({\n inputId: \"eye-color\",\n previewId: \"eye-color-preview\",\n hexId: \"eye-color-hex\",\n section: \"eyes\",\n key: \"irisColor\",\n })\n .slider({\n sliderId: \"eye-size\",\n valueId: \"eye-size-value\",\n section: \"eyes\",\n key: \"size\",\n })\n .slider({\n sliderId: \"pupil-size\",\n valueId: \"pupil-size-value\",\n section: \"eyes\",\n key: \"pupilSize\",\n })\n .slider({\n sliderId: \"eyelash-opacity\",\n valueId: \"eyelash-value\",\n section: \"eyes\",\n key: \"eyelashOpacity\",\n format: (v) => v.toFixed(1),\n })\n .slider({\n sliderId: \"eyebrow-opacity\",\n valueId: \"eyebrow-value\",\n section: \"eyes\",\n key: \"eyebrowOpacity\",\n format: (v) => v.toFixed(1),\n })\n .presetGroup<\"Cartoon\" | \"Natural\" | \"Anime\">({\n selector: \"[data-eye-style]\",\n dataAttribute: \"eyeStyle\",\n section: \"eyes\",\n key: \"style\",\n });\n\n // Mouth bindings\n this.bindingManager\n .slider({\n sliderId: \"lip-opacity\",\n valueId: \"lip-opacity-value\",\n section: \"mouth\",\n key: \"lipOpacity\",\n })\n .toggle({\n elementId: \"toggle-tongue\",\n section: \"mouth\",\n key: \"tongue.visible\",\n })\n .color({\n inputId: \"tongue-color\",\n previewId: \"tongue-color-preview\",\n hexId: \"tongue-color-hex\",\n section: \"mouth\",\n key: \"tongue.color\",\n })\n .slider({\n sliderId: \"tongue-depth\",\n valueId: \"tongue-depth-value\",\n section: \"mouth\",\n key: \"tongue.depth\",\n });\n\n // Teeth bindings\n this.bindingManager\n .slider({\n sliderId: \"teeth-scale\",\n valueId: \"teeth-scale-value\",\n section: \"teeth\",\n key: \"scale\",\n })\n .toggle({\n elementId: \"toggle-top-teeth\",\n section: \"teeth\",\n key: \"top.visible\",\n })\n .slider({\n sliderId: \"top-teeth-width\",\n valueId: \"top-teeth-width-value\",\n section: \"teeth\",\n key: \"top.width\",\n })\n .slider({\n sliderId: \"top-teeth-height\",\n valueId: \"top-teeth-height-value\",\n section: \"teeth\",\n key: \"top.height\",\n })\n .slider({\n sliderId: \"top-teeth-x\",\n valueId: \"top-teeth-x-value\",\n section: \"teeth\",\n key: \"top.offset.x\",\n })\n .slider({\n sliderId: \"top-teeth-y\",\n valueId: \"top-teeth-y-value\",\n section: \"teeth\",\n key: \"top.offset.y\",\n })\n .slider({\n sliderId: \"top-teeth-depth\",\n valueId: \"top-teeth-depth-value\",\n section: \"teeth\",\n key: \"top.depth\",\n })\n .toggle({\n elementId: \"toggle-bottom-teeth\",\n section: \"teeth\",\n key: \"bottom.visible\",\n })\n .slider({\n sliderId: \"bottom-teeth-width\",\n valueId: \"bottom-teeth-width-value\",\n section: \"teeth\",\n key: \"bottom.width\",\n })\n .slider({\n sliderId: \"bottom-teeth-height\",\n valueId: \"bottom-teeth-height-value\",\n section: \"teeth\",\n key: \"bottom.height\",\n })\n .slider({\n sliderId: \"bottom-teeth-x\",\n valueId: \"bottom-teeth-x-value\",\n section: \"teeth\",\n key: \"bottom.offset.x\",\n })\n .slider({\n sliderId: \"bottom-teeth-y\",\n valueId: \"bottom-teeth-y-value\",\n section: \"teeth\",\n key: \"bottom.offset.y\",\n })\n .slider({\n sliderId: \"bottom-teeth-depth\",\n valueId: \"bottom-teeth-depth-value\",\n section: \"teeth\",\n key: \"bottom.depth\",\n });\n\n // Lighting bindings\n this.bindingManager\n .slider({\n sliderId: \"ambient-intensity\",\n valueId: \"ambient-value\",\n section: \"lighting\",\n key: \"ambient.intensity\",\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n })\n .slider({\n sliderId: \"light-intensity\",\n valueId: \"light-intensity-value\",\n section: \"lighting\",\n key: \"directional.intensity\",\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n })\n .color({\n inputId: \"light-color\",\n previewId: \"light-color-preview\",\n hexId: \"light-color-hex\",\n section: \"lighting\",\n key: \"directional.color\",\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n })\n .slider({\n sliderId: \"light-x\",\n valueId: \"light-x-value\",\n section: \"lighting\",\n key: \"directional.position.x\",\n format: (v) => v.toFixed(1),\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n })\n .slider({\n sliderId: \"light-y\",\n valueId: \"light-y-value\",\n section: \"lighting\",\n key: \"directional.position.y\",\n format: (v) => v.toFixed(1),\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n })\n .slider({\n sliderId: \"light-z\",\n valueId: \"light-z-value\",\n section: \"lighting\",\n key: \"directional.position.z\",\n format: (v) => v.toFixed(1),\n onChange: () => this.sceneCtx.updateLighting(useConfig().lighting),\n });\n\n // Quick actions\n this.setupQuickActions();\n }\n\n private setupQuickActions(): void {\n document.getElementById(\"save-config\")!.onclick = () => {\n configStore.save();\n toast.success(\"Configuration saved\");\n };\n\n document.getElementById(\"reset-config\")!.onclick = () => {\n configStore.reset();\n toast.info(\"Resetting...\");\n setTimeout(() => location.reload(), 800);\n };\n\n document.getElementById(\"export-config\")!.onclick = () => {\n const json = configStore.export();\n const blob = new Blob([json], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"facelab-config.json\";\n a.click();\n URL.revokeObjectURL(url);\n toast.success(\"Config exported\");\n };\n\n document.getElementById(\"toggle-bg\")!.onclick = () => {\n configStore.set(\"system\", {\n videoHidden: !useConfig().system.videoHidden,\n });\n this.updateVideoVisibility();\n toast.info(\n useConfig().system.videoHidden\n ? \"Background hidden\"\n : \"Background visible\",\n );\n };\n\n document.getElementById(\"finish-wizard\")!.onclick = () => {\n configStore.save();\n toast.success(\"All done!\");\n };\n\n // Render mode toggle\n document.querySelectorAll(\".view-option\").forEach((el) => {\n (el as HTMLElement).onclick = () => {\n document.querySelectorAll(\".view-option\").forEach((e) =>\n e.classList.remove(\"active\")\n );\n el.classList.add(\"active\");\n\n const mode = (el as HTMLElement).dataset.mode;\n configStore.set(\"face\", {\n renderMode: mode === \"cel\" ? \"cel-shaded\" : \"standard\",\n });\n\n if (mode === \"cel\") {\n this.faceMesh.material = this.celMaterial;\n this.outlineMesh.visible = true;\n } else {\n this.faceMesh.material = this.standardMaterial;\n this.outlineMesh.visible = false;\n }\n };\n });\n\n // Texture upload\n document.getElementById(\"file-input\")!.addEventListener(\"change\", (e) => {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (!file) return;\n\n const url = URL.createObjectURL(file);\n const loader = new THREE.TextureLoader();\n\n loader.load(url, (texture) => {\n texture.colorSpace = THREE.SRGBColorSpace;\n this.standardMaterial.map = texture;\n this.standardMaterial.opacity = 1.0;\n this.standardMaterial.needsUpdate = true;\n this.faceMesh.material = this.standardMaterial;\n this.outlineMesh.visible = false;\n\n configStore.set(\"face\", { renderMode: \"standard\" });\n toast.success(\"Texture applied\");\n URL.revokeObjectURL(url);\n });\n });\n }\n\n private setupWizard(): void {\n const wizard = createWizardController();\n const elements = queryWizardElements();\n\n const updater = createWizardUpdater(elements, {\n devMode: () => useConfig().system.devMode,\n });\n\n wizard.subscribe(updater);\n\n this.wizardCleanup = bindWizardNavigation(wizard, elements, {\n onFinish: () => {\n configStore.save();\n toast.success(\"Configuration complete!\");\n },\n });\n }\n\n private updateVideoVisibility(): void {\n const config = useConfig();\n const container = document.getElementById(\"container\")!;\n const video = container.querySelector(\"video\");\n\n if (video) {\n if (config.system.videoHidden) {\n video.style.opacity = \"0\";\n this.delayedVideoCanvas.style.display = \"none\";\n } else if (config.system.showDelayedVideo) {\n video.style.opacity = \"0\";\n this.delayedVideoCanvas.style.display = \"block\";\n } else {\n video.style.opacity = \"1\";\n this.delayedVideoCanvas.style.display = \"none\";\n }\n }\n }\n\n private startRenderLoop(): void {\n const { renderer, scene } = this.sceneCtx;\n\n renderer.setAnimationLoop(() => {\n const config = useConfig();\n const face = this.mindAR.faceMeshes[0];\n this.frameCounter++;\n\n // Capture video frame for delay buffer\n const container = document.getElementById(\"container\")!;\n const video = container.querySelector(\"video\");\n if (video?.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {\n this.frameBuffer.capture(video);\n }\n\n // Draw delayed video frame\n if (\n config.system.showDelayedVideo && !config.system.videoHidden && video\n ) {\n const delayed = this.frameBuffer.getDelayed(config.system.frameDelay);\n if (delayed?.canvas) {\n this.delayedVideoCtx.clearRect(\n 0,\n 0,\n this.delayedVideoCanvas.width,\n this.delayedVideoCanvas.height,\n );\n this.delayedVideoCtx.drawImage(\n delayed.canvas,\n 0,\n 0,\n this.delayedVideoCanvas.width,\n this.delayedVideoCanvas.height,\n );\n }\n }\n\n // Update dev mode camera target\n if (config.system.devMode && face?.visible) {\n const target = new THREE.Vector3();\n this.faceMesh.getWorldPosition(target);\n this.sceneCtx.controls.target.copy(target);\n this.sceneCtx.controls.update();\n }\n\n // Update outline mesh transform\n if (face?.visible) {\n this.outlineMesh.position.copy(this.faceMesh.position);\n this.outlineMesh.quaternion.copy(this.faceMesh.quaternion);\n this.outlineMesh.scale.copy(this.faceMesh.scale).multiplyScalar(1.02);\n this.outlineMesh.visible = config.face.renderMode === \"cel-shaded\";\n }\n\n // Render 3D scene\n renderer.render(scene, this.sceneCtx.getActiveCamera());\n\n // Render 2D overlay\n const w = this.overlayCanvas.width;\n const h = this.overlayCanvas.height;\n const scale = w / 1080;\n\n if (face?.visible) {\n const positions = face.geometry.attributes.position\n .array as Float32Array;\n const points = projectLandmarks(\n positions,\n face.matrixWorld,\n this.sceneCtx.getActiveCamera(),\n w,\n h,\n config.system.lerpFactor,\n );\n\n render2DOverlay({\n ctx: this.overlayCtx,\n width: w,\n height: h,\n points,\n config,\n scale,\n });\n\n document.getElementById(\"tracking-status\")!.textContent = \"Tracking\";\n } else {\n this.overlayCtx.clearRect(0, 0, w, h);\n document.getElementById(\"tracking-status\")!.textContent =\n \"Searching...\";\n }\n\n // Update FPS counter\n this.updatePerformanceMetrics(config);\n });\n }\n\n private updatePerformanceMetrics(config: AppConfig): void {\n this.frameCount++;\n const now = performance.now();\n\n if (now - this.lastFpsTime >= 1000) {\n this.currentFps = this.frameCount;\n const frameTime = (1000 / this.currentFps).toFixed(1);\n const delayMs = (config.system.frameDelay * (1000 / this.currentFps))\n .toFixed(1);\n const bufferState = this.frameBuffer.getState(config.system.frameDelay);\n const teethLoaded = getTeethAssets() !== null;\n\n document.getElementById(\"fps-pill\")!.textContent =\n `${this.currentFps} FPS`;\n document.getElementById(\"delay-pill\")!.textContent =\n `Delay: ${config.system.frameDelay}f (${delayMs}ms)`;\n\n document.getElementById(\"stats-panel\")!.innerHTML = `\n FPS: ${this.currentFps} | Frame: ${frameTime}ms
\n SVG Teeth: ${teethLoaded ? \"OK\" : \"...\"}
\n Mode: ${config.system.devMode ? \"DEV\" : \"LIVE\"}
\n ── Frame Sync ──
\n Current Frame: ${this.frameCounter}
\n Displayed Frame: ${bufferState.displayedFrame || \"N/A\"}
\n Buffer: ${bufferState.bufferSize}/15
\n Delay: ${config.system.frameDelay}f = ${delayMs}ms\n `;\n\n this.frameCount = 0;\n this.lastFpsTime = now;\n }\n }\n\n dispose(): void {\n this.bindingManager.dispose();\n this.wizardCleanup?.();\n this.frameBuffer.dispose();\n this.sceneCtx.dispose();\n resetRenderer();\n }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// BOOTSTRAP\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport async function bootstrap(): Promise {\n const app = new FaceLabApp();\n await app.initialize();\n return app;\n}\n\n// Auto-init\nif (typeof window !== \"undefined\") {\n bootstrap().catch(console.error);\n}","deleted","label",[99],"permalink","https://www.val.town/x/banks/facelab/code/app.ts","extension","actionData","errors"]