SteelXR/.lovable/plan.md

Menus dentro do passthrough + Compartilhamento que funciona em AR

Dois problemas distintos, duas soluções:

---

Problema 1 — Menus DOM somem no passthrough

Causa: XRHud é HTML/CSS sobreposto ao <canvas>. Quando o Quest entra em immersive-ar, o headset para de renderizar o DOM da página — só renderiza o conteúdo WebGL do <XR>. Por isso lista de peças, botões, slider de opacidade etc. desaparecem dentro do óculos.

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).

Componentes a criar

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

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)

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 <a> 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

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.

Vou implementar (1) — mais flexível.

Edits em XRSession.tsx

Dentro do bloco effectiveInXR, montar <XRWristMenu /> e <XRToolPanel />. O <XRHud> DOM atual continua existindo para uso fora do AR (desktop preview e antes de entrar em sessão).

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 <canvas> 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 <canvas> 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

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:

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 <XR>
• src/components/ShareButton.tsx — preferir getBroadcastSource() quando disponível
• src/components/XRHud.tsx — esconder via CSS quando inXR