diff --git a/.lovable/plan.md b/.lovable/plan.md index a5ca2e4..7ad5ab7 100644 --- a/.lovable/plan.md +++ b/.lovable/plan.md @@ -1,115 +1,46 @@ -# Menus dentro do passthrough + Compartilhamento que funciona em AR +## Contexto -Dois problemas distintos, duas soluções: +O grid vermelho/azul que aparece perto de paredes/objetos é o **Space Sense / Guardian** do Quest 3 — renderizado pelo runtime da Meta, não pelo app. O app não consegue desligá-lo por código. Porém, **a sensibilidade desse sistema aumenta** quando a WebXR session pede features como `mesh-detection`, `depth-sensing`, `anchors`, etc. Hoje o app usa `createXRStore({...})` sem lista explícita de features, então a lib `@react-three/xr` solicita o conjunto default — que inclui várias features que não usamos. ---- +## O que vou fazer (Onda 2, sem quebrar nada) -## Problema 1 — Menus DOM somem no passthrough +**Auditoria do `createXRStore` em `src/pages/XRSession.tsx`** para pedir só o que realmente usamos: -**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. +- **Manter (usado):** + - `hit-test` — usado por `XRHitTestPlacement` + - `plane-detection` — usado por `XRHitTestPlacement` (snap) e `XRPlaneOverlay` + - `local-floor` — reference space padrão + - `hand-tracking` — usado +- **Remover do request (não usado):** + - `mesh-detection` — não há leitor de meshes no código + - `anchors` — não criamos âncoras persistentes + - `depth-sensing` — não usado + - `light-estimation` — não usado -**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). +Configuração proposta (passada para `createXRStore`): -### 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 `` 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 `` e ``. O `` 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 `` 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 +```ts +const store = createXRStore({ + hand: { left: true, right: true }, + controller: { left: true, right: true }, + sessionInit: { + requiredFeatures: ['local-floor'], + optionalFeatures: ['hit-test', 'plane-detection', 'hand-tracking'], + }, }); ``` -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) +Tudo continua como `optionalFeatures`, então se o Quest não suportar algum, a sessão ainda inicia. Nenhuma ferramenta atual (hit-test, snap em planos, mãos, grip, joystick, medição, screenshot, inspeção, compartilhamento) depende das features removidas. -### 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. +## O que NÃO faço -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; } -``` +- Não mexo em `useModelStore`, `XRHud`, `XRHudInWorld`, `XRHitTestPlacement`, `XRPlaneOverlay` — comportamento das ferramentas fica igual. +- Não adiciono botão de "desligar Guardian" — impossível por código. -`XRBroadcastMirror` chama `setBroadcastSource` no mount/unmount. +## Resultado esperado -### 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. +Reduz a chance de o Space Sense ativar o grid de segurança perto de objetos, porque a sessão XR não pede mais permissões além das necessárias. Se o grid continuar aparecendo, é configuração do headset (Settings → Segurança → Space Sense) e o usuário precisa desligar lá — posso adicionar depois um painel "Ajuda" com o passo-a-passo se quiser. ---- +## Arquivo alterado -## 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` +- `src/pages/XRSession.tsx` (apenas o objeto passado para `createXRStore`) \ No newline at end of file diff --git a/src/pages/XRSession.tsx b/src/pages/XRSession.tsx index 0c69b64..86b57cb 100644 --- a/src/pages/XRSession.tsx +++ b/src/pages/XRSession.tsx @@ -32,6 +32,10 @@ if (navigator.xr) { const store = createXRStore({ hand: { left: true, right: true }, controller: { left: true, right: true }, + sessionInit: { + requiredFeatures: ['local-floor'], + optionalFeatures: ['hit-test', 'plane-detection', 'hand-tracking'], + }, }); // ─── XRModel ───────────────────────────────────────────