diff --git a/.lovable/plan.md b/.lovable/plan.md index 649cb92..a5ca2e4 100644 --- a/.lovable/plan.md +++ b/.lovable/plan.md @@ -1,62 +1,115 @@ -## Resposta curta +# Menus dentro do passthrough + Compartilhamento que funciona em AR -Sim, é totalmente possível — hoje o app só carrega 1 modelo por vez (`model: ModelInfo | null` no store), mas a arquitetura (Three.js + R3F) suporta naturalmente múltiplas peças em uma mesma cena. Precisa migrar de "modelo único" para "lista de modelos", cada um com seu próprio transform (posição/rotação/escala) e seleção ativa. +Dois problemas distintos, duas soluções: -## O que muda +--- -### 1. Store (`useModelStore.ts`) -- Substituir `model: ModelInfo | null` por `models: SceneModel[]` (até 5 simultâneos para manter 72 FPS no Quest 3). -- Cada `SceneModel` tem: `id`, `fileName`, `url`, `fineTuning` próprio, `visible`, `color` (cor de identificação), `locked`. -- Adicionar `activeModelId: string | null` — o "modelo selecionado" recebe os controles de fine-tuning, escala e medição. -- Ações: `addModel`, `removeModel`, `duplicateModel`, `setActiveModel`, `updateModelTransform`, `toggleVisibility`. -- Compatibilidade: `model` (singular) continua exposto como getter derivado do `activeModelId` para não quebrar telas legadas. +## Problema 1 — Menus DOM somem no passthrough -### 2. Cena 3D (`ModelViewer.tsx`) -- Renderizar `models.map(m => )`. -- Cada `` aplica seu próprio transform (já existe a lógica, só vira por-instância). -- Outline/halo sutil no modelo ativo para feedback visual. -- Click em um modelo → torna-o ativo (raycaster identifica qual instância foi clicada). +**Causa:** `XRHud` é HTML/CSS sobreposto ao ``. Quando o Quest entra em `immersive-ar`, o headset para de renderizar o DOM da página — só renderiza o conteúdo WebGL do ``. Por isso lista de peças, botões, slider de opacidade etc. desaparecem dentro do óculos. -### 3. UI Desktop (`Viewer.tsx`) -- Novo painel **"Cena"** lateral listando os modelos carregados: - - Nome do arquivo, cor, ícones de visibilidade (olho), trava (cadeado), duplicar, remover. - - Item destacado = ativo. Click seleciona. -- Botão **"+ Adicionar modelo"** abre o mesmo fluxo de upload/cloud já existente, mas em modo "append" em vez de "replace". -- `FineTuningControls`, `ScaleSelector` passam a operar sobre o modelo ativo. +**Solução:** criar um HUD 3D nativo (Three.js) que vive **dentro** da cena XR, ancorado ao controlador esquerdo (estilo "smartwatch de pulso") e/ou em frente ao usuário. Toda interação acontece via raycaster do controlador direito (gatilho = clique). -### 4. UI XR/AR (`XRHud.tsx`) -- Painel flutuante com a lista de peças (mesmos botões compactos). -- Botão "Adicionar" abre o `CloudLoader` já existente em modo append. -- Gestos do controle: o grab (já implementado em `XRGrabbable`) move só o modelo ativo / o que foi pinçado diretamente. +### Componentes a criar -### 5. Funcionalidades dependentes -- **Medições**: passam a ter `modelId` opcional (de qual peça partiu o ponto). Continuam globais na cena — útil para medir GAP entre peças. -- **Checklist**: por enquanto continua global (uma inspeção por sessão). Pode-se evoluir depois para checklist por peça. -- **Screenshot/PDF**: capturam a cena inteira (todas as peças visíveis), sem mudança. -- **Compare mode**: opera sobre a cena toda, sem mudança. +**`src/components/three/XRPanel3D.tsx`** — painel 3D reutilizável: +- Quad com `Text` (drei) e fundo translúcido escuro +- Suporta hover/click via `onPointerOver` / `onClick` do react-three-fiber (já funciona com controllers XR) +- Variantes: `button`, `toggle`, `slider`, `list-item` -## Limitações conhecidas +**`src/components/three/XRWristMenu.tsx`** — menu radial preso ao controlador esquerdo: +- Usa `useXRInputSourceState('controller', 'left')` para obter a pose +- Renderiza painel ~15cm acima do controle quando o usuário gira o pulso para cima (detecta orientação) +- Conteúdo: ícones grandes para cada categoria (Cena, Ferramentas, Inspeção, Compartilhar, Ajuda) -- **Performance**: GLB grandes somados podem derrubar FPS no Quest 3. Vou impor limite de **5 modelos simultâneos** com aviso. -- **Conversão IFC**: cada arquivo passa pelo conversor cliente (`convertIFC.ts`) já existente — sem mudança. -- **Colisão física**: as peças podem se sobrepor visualmente (não há detecção de colisão). Para "empilhar" o usuário posiciona manualmente via grab/fine-tuning. Snap entre peças seria uma evolução futura. -- **Anotações em tela**: ficam vinculadas a coordenadas de mundo, não ao modelo — se você mover o modelo depois, a anotação não acompanha (limitação aceitável v1). +**`src/components/three/XRToolPanel.tsx`** — painel grande flutuante (40×30cm) que abre quando o usuário escolhe uma categoria no wrist menu: +- Posicionado a ~70cm em frente ao usuário, segue o head (com inércia leve) +- Botão "fechar" (X) no canto +- Conteúdo varia por aba aberta: + - **Cena**: lista de modelos carregados (selecionar ativo, visibilidade, lock, duplicar, remover) + botão "+ Adicionar" que dispara o picker de arquivo (file input fica oculto, ativado via `` com `download` ou via mensagem para sair do XR e abrir loader) + - **Ferramentas**: opacidade (slider 3D), modo render (Sólido/Wire/Bordas), grid on/off, medir on/off, snap on/off, escala on/off + - **Posição/Rotação**: 6 pares de botões −/+ (já existem como joystick, mas duplicar no painel ajuda quem prefere clicar) + - **Inspeção**: lista de itens do checklist, cada um com ✓/✗ + - **Compartilhar**: estado da live (ON/OFF), código da sala, contagem de viewers, botão encerrar -## Fora do escopo desta v1 +### Carregar arquivo dentro do XR +Carregar arquivos do disco local exige fileinput DOM, que não existe no passthrough. Duas alternativas: +1. **Cloud only no XR**: o painel "Cena → Adicionar" lista os modelos do Supabase Storage / cache local que já foram pré-carregados antes de entrar no AR. Para arquivo novo, mostra mensagem "saia do AR para fazer upload". +2. **Pré-carregar tudo antes**: usuário carrega todos os IFCs no Viewer 2D, marca quais quer levar, e dentro do AR só alterna entre eles. -- Snap automático/encaixe entre peças (próxima iteração) -- Detecção de colisão / física -- Agrupar peças (parent/child) -- Checklist independente por peça -- Persistência da cena multi-modelo (salvar/carregar layout) +Vou implementar (1) — mais flexível. -## Arquivos afetados +### Edits em `XRSession.tsx` +Dentro do bloco `effectiveInXR`, montar `` e ``. O `` DOM atual continua existindo para uso fora do AR (desktop preview e antes de entrar em sessão). -- `src/stores/useModelStore.ts` — refactor central -- `src/components/three/ModelViewer.tsx` — render por instância -- `src/pages/Viewer.tsx` — painel de cena + botão "Adicionar" -- `src/components/XRHud.tsx` — lista de peças no AR -- `src/components/FineTuningControls.tsx` — opera no ativo -- `src/components/ScaleSelector.tsx` — opera no ativo -- `src/components/three/XRGrabbable.tsx` — grab por instância -- novo `src/components/SceneModelList.tsx` — componente reutilizável da lista +### Edits em `XRHud.tsx` +Sem mudanças funcionais — só passa a ser ocultado via CSS quando `inXR === true` (já é, por causa do passthrough, mas garantir `display:none` evita confusão). + +--- + +## Problema 2 — Viewers veem tela preta no passthrough + +**Causa:** `canvas.captureStream()` captura o `` WebGL com `alpha: true` e `clearColor (0,0,0,0)` — ou seja, **transparente**. No headset, o compositor do sistema operacional do Quest mistura esse canvas transparente com o feed da câmera (passthrough). Mas o canvas em si, quando capturado e enviado via WebRTC, é só os modelos 3D sobre fundo transparente — viewers veem preto/transparente. + +**Pior ainda:** durante uma sessão `immersive-ar`, a cada frame WebXR o WebGL renderiza diretamente para a XR layer; o `` da página pode ficar congelado no último frame de fora do XR (o "captureStream" para de ter conteúdo novo). + +**Solução:** criar um **segundo renderer offscreen opaco** que reproduz a cena XR a cada frame, e capturar o stream desse canvas. + +### Componente: `src/components/three/XRBroadcastMirror.tsx` + +```text +useFrame((state) => { + if (!broadcasting) return; + // 1. Pega câmera XR atual (state.gl.xr.getCamera()) + // 2. Renderiza a mesma scene num WebGLRenderer offscreen + // com alpha:false, clearColor preto/cinza + // 3. O canvas do mirror tem captureStream() ativo +}); +``` + +Detalhes: +- Cria `THREE.WebGLRenderer({ canvas: offscreenCanvas, alpha: false, antialias: true })` +- Tamanho fixo: 1280×720 (boa relação qualidade/banda para WebRTC) +- Usa a câmera XR ativa (`state.gl.xr.getCamera()`) — que é a câmera estéreo combinada do Quest; pegamos a sub-câmera esquerda para gerar mono feed +- Renderiza a mesma `state.scene` +- Opcionalmente, sobrepõe um plano com cor de fundo (cinza escuro #1a1a1a) representando o que seria o passthrough — viewers entendem que é o ponto de vista do operador, sem ver a câmera real (privacidade do ambiente) + +### Mudanças em `ShareButton.tsx` / `broadcaster.ts` +Em vez de capturar `document.querySelector('canvas')` direto, usar: +1. Se não estiver em XR → comportamento atual (canvas principal). +2. Se estiver em XR → o `XRBroadcastMirror` registra seu canvas num contexto/ref global; `ShareButton.start()` lê esse canvas e chama `captureStream()` nele. + +Adicionar `src/lib/webrtc/broadcastSource.ts`: +```text +let activeCanvas: HTMLCanvasElement | null = null; +export function setBroadcastSource(c: HTMLCanvasElement | null) { activeCanvas = c; } +export function getBroadcastSource() { return activeCanvas; } +``` + +`XRBroadcastMirror` chama `setBroadcastSource` no mount/unmount. + +### Sobre câmera real do Quest +Acessar o feed real da câmera passthrough **não é possível via WebXR** (Meta bloqueia por privacidade — só apps nativos com WebView de sistema têm acesso). Então o melhor que conseguimos mostrar para os viewers é a **cena 3D do ponto de vista do operador, em fundo opaco**. Isso já é útil: o supervisor vê a peça, os ajustes, as medições, o checklist sendo marcado. + +--- + +## Limitações e fora de escopo + +- Sem captura real da câmera passthrough (limite WebXR/Meta). +- Mirror renderiza só olho esquerdo (mono) — estéreo dobraria custo de GPU e banda. +- O FPS do mirror pode cair se o headset estiver no limite — adicionar throttle (`captureStream(20)` em vez de 30). +- Wrist menu funciona com controllers; mãos (hand tracking) ficam para v2. + +## Arquivos tocados + +**Criar:** +- `src/components/three/XRPanel3D.tsx` +- `src/components/three/XRWristMenu.tsx` +- `src/components/three/XRToolPanel.tsx` +- `src/components/three/XRBroadcastMirror.tsx` +- `src/lib/webrtc/broadcastSource.ts` + +**Editar:** +- `src/pages/XRSession.tsx` — montar wrist menu, tool panel e broadcast mirror dentro do `` +- `src/components/ShareButton.tsx` — preferir `getBroadcastSource()` quando disponível +- `src/components/XRHud.tsx` — esconder via CSS quando `inXR`