Changes
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
+49
-105
@@ -1,118 +1,62 @@
|
||||
# Plano — Compartilhar tela do Quest 3 via link público
|
||||
## Resposta curta
|
||||
|
||||
Permitir que o inspetor no Quest gere um link tipo `tracksteelxr.lovable.app/watch/AB12CD`, mande no WhatsApp/email, e até 3 espectadores assistam ao vivo (vídeo + áudio do Quest) em qualquer celular ou PC.
|
||||
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.
|
||||
|
||||
## Como vai funcionar para o usuário
|
||||
## O que muda
|
||||
|
||||
**No Quest (broadcaster):**
|
||||
1. No HUD do `/xr` aparece novo botão **"Compartilhar"** (ícone Share/Cast)
|
||||
2. Ao clicar: app gera código de 6 caracteres, mostra QR + link encurtado
|
||||
3. Botões "Copiar link" e "Compartilhar" (Web Share API → abre WhatsApp/email do sistema)
|
||||
4. Indicador vermelho 🔴 LIVE fica visível enquanto transmite, com contador de viewers
|
||||
5. Botão "Encerrar" para parar
|
||||
### 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.
|
||||
|
||||
**No celular/PC (viewer):**
|
||||
1. Abre o link → tela cheia com vídeo da sessão XR
|
||||
2. Sem login, sem instalar nada
|
||||
3. Mostra "Aguardando inspetor…" se a sala não estiver ativa
|
||||
4. Read-only: só assiste
|
||||
### 2. Cena 3D (`ModelViewer.tsx`)
|
||||
- Renderizar `models.map(m => <GLBModel key={m.id} model={m} isActive={m.id === activeModelId} />)`.
|
||||
- Cada `<GLBModel>` 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).
|
||||
|
||||
## Arquitetura técnica
|
||||
### 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.
|
||||
|
||||
```text
|
||||
Quest 3 (broadcaster) Lovable Cloud Viewers (celular/PC)
|
||||
┌──────────────────┐ ┌─────────────────────┐ ┌──────────────────┐
|
||||
│ /xr │ │ Supabase Realtime │ │ /watch/AB12CD │
|
||||
│ - canvas WebXR │ ──SDP──▶│ (signaling channel) │◀──SDP── │ - <video> tag │
|
||||
│ - getDisplayMedia│ │ rooms table │ │ - peer connection│
|
||||
│ - RTCPeerConn x3 │◀════════ ICE candidates ═════════════▶ │ │
|
||||
└──────────────────┘ │ viewers count │ └──────────────────┘
|
||||
║ └─────────────────────┘ ▲
|
||||
╚════════ WebRTC P2P media stream (vídeo H264) ════════════════╝
|
||||
```
|
||||
### 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.
|
||||
|
||||
**Stack:**
|
||||
- **Lovable Cloud** (precisa habilitar): tabela `share_rooms` + canal Realtime para signaling
|
||||
- **WebRTC nativo do browser** (`RTCPeerConnection`) — sem libs pesadas
|
||||
- **Captura no Quest:** `navigator.mediaDevices.getDisplayMedia()` no browser do Quest captura a janela atual (inclui o canvas 3D). Em sessão XR imersiva, alternativa é usar `canvas.captureStream(30)` direto do canvas WebGL — funciona melhor e não precisa de prompt
|
||||
- **Sem servidor de mídia (SFU):** P2P 1→3 viewers, banda do Quest aguenta tranquilo (~2 Mbps por viewer)
|
||||
### 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.
|
||||
|
||||
## Estrutura de arquivos
|
||||
## Limitações conhecidas
|
||||
|
||||
**Novos:**
|
||||
- `src/pages/Watch.tsx` — página pública do viewer (rota `/watch/:code`)
|
||||
- `src/components/ShareButton.tsx` — botão + dialog com QR/link no HUD
|
||||
- `src/lib/webrtc/broadcaster.ts` — lógica do lado Quest (cria offer, gerencia múltiplos peers)
|
||||
- `src/lib/webrtc/viewer.ts` — lógica do lado viewer (recebe offer, monta `<video>`)
|
||||
- `src/lib/webrtc/signaling.ts` — wrapper sobre Supabase Realtime para troca SDP/ICE
|
||||
- **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).
|
||||
|
||||
**Editados:**
|
||||
- `src/App.tsx` — adicionar rota `/watch/:code` (pública, fora do layout XR)
|
||||
- `src/components/XRHud.tsx` — adicionar `<ShareButton />` na toolbar
|
||||
- `src/pages/XRSession.tsx` — botão também visível fora do HUD
|
||||
- `src/stores/useModelStore.ts` — estado `shareRoom: { code, viewerCount, isLive }`
|
||||
## Fora do escopo desta v1
|
||||
|
||||
## Schema do banco (Lovable Cloud)
|
||||
- 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)
|
||||
|
||||
```sql
|
||||
create table public.share_rooms (
|
||||
code text primary key, -- 6 chars, ex: 'AB12CD'
|
||||
created_at timestamptz default now(),
|
||||
expires_at timestamptz default now() + interval '4 hours',
|
||||
is_active boolean default true,
|
||||
viewer_count int default 0
|
||||
);
|
||||
## Arquivos afetados
|
||||
|
||||
-- RLS: leitura pública (viewers precisam saber se sala existe), escrita só anon controlada
|
||||
alter table public.share_rooms enable row level security;
|
||||
create policy "anyone reads active rooms" on public.share_rooms
|
||||
for select using (is_active and expires_at > now());
|
||||
create policy "anyone creates room" on public.share_rooms
|
||||
for insert with check (true);
|
||||
create policy "anyone updates count" on public.share_rooms
|
||||
for update using (true);
|
||||
```
|
||||
|
||||
Signaling propriamente dito (SDP offers/answers, ICE candidates) acontece via **Supabase Realtime broadcast channel** `room:${code}` — não persiste em tabela, é efêmero.
|
||||
|
||||
## STUN/TURN
|
||||
|
||||
- **STUN público do Google** (`stun:stun.l.google.com:19302`) — grátis, resolve ~80% dos casos (NAT comum)
|
||||
- **TURN:** se inspetor estiver atrás de NAT simétrico (raro em fábrica), conexão falha. Para v1 deixamos só STUN. Se precisar TURN depois, integramos Twilio TURN (~$0,40/GB) ou Metered.ca (free tier 50GB/mês)
|
||||
|
||||
## Captura no Quest — detalhes importantes
|
||||
|
||||
Tem dois cenários:
|
||||
1. **Fora da sessão XR** (modo viewer 2D): `canvas.captureStream(30)` — fácil, funciona já
|
||||
2. **Dentro da sessão XR imersiva** (passthrough AR): aqui o canvas é renderizado para o display do headset, não para a tela visível. Solução: usar `XRWebGLLayer.framebuffer` e renderizar uma view extra "spectator" para um canvas offscreen que vira o stream. **Esta parte tem risco** — pode precisar fallback para `getDisplayMedia()` que pede permissão do usuário no Quest
|
||||
|
||||
Plano: começar com cenário 1 (já cobre uso fora do AR imersivo), e cenário 2 numa segunda iteração se necessário.
|
||||
|
||||
## Limitações honestas
|
||||
|
||||
- **Latência:** 200-500ms (não é instantâneo, mas serve para acompanhamento)
|
||||
- **Sem áudio do microfone do Quest** na v1 (adicionar depois com `getUserMedia({audio:true})`)
|
||||
- **Sala expira em 4h** — geração de novo código se sessão durar mais
|
||||
- **Link público:** qualquer um com a URL vê. Se vazar, código pode ser revogado pelo inspetor
|
||||
- **Não grava** — só transmissão ao vivo. Gravação seria feature separada
|
||||
|
||||
## Pré-requisito
|
||||
|
||||
Precisa **habilitar Lovable Cloud** (atualmente o projeto não tem). Vou pedir confirmação antes de habilitar, pois cria infraestrutura backend.
|
||||
|
||||
## Escopo desta implementação
|
||||
|
||||
✅ Botão "Compartilhar" no HUD do XR + tela inicial
|
||||
✅ Geração de código + QR + link curto + Web Share API
|
||||
✅ Página `/watch/:code` pública com vídeo
|
||||
✅ Signaling via Supabase Realtime
|
||||
✅ WebRTC P2P 1→3 viewers
|
||||
✅ Contador de viewers em tempo real para o broadcaster
|
||||
✅ Captura via `canvas.captureStream` (cenário fora do XR imersivo)
|
||||
❌ Captura dentro da sessão XR imersiva (segunda iteração)
|
||||
❌ Áudio do mic (segunda iteração)
|
||||
❌ Chat / interação (você optou por read-only)
|
||||
❌ TURN server (só se aparecer problema de NAT)
|
||||
❌ Gravação
|
||||
|
||||
Aprovando o plano, eu habilito o Lovable Cloud e implemento.
|
||||
- `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
|
||||
|
||||
Reference in New Issue
Block a user