7. WebXR: A Alternativa Baseada em Navegador

O WebXR permite aos programadores criar experiências imersivas que correm diretamente no Meta Quest Browser. É construído com base em tecnologias web padrão, tornando a "VR na web" tão fácil de aceder quanto um site.

Por que escolher o WebXR?

• Acesso Sem Atritos: Os utilizadores não precisam de descarregar ficheiros grandes da Meta Store; simplesmente clicam num URL e carregam em "Enter VR."
• Frameworks: Utiliza poderosas bibliotecas JavaScript como Three.js, A-Frame (baseado em HTML) ou Babylon.js.
• Multiplataforma: Uma única aplicação WebXR pode frequentemente correr num Quest 3, num telemóvel Android (modo AR) ou num PC de secretária.
  
  

7.1 Análise da Biblioteca

Three.js (O Motor de Renderização)

Three.js trata do trabalho pesado do WebGL. Gere a Cena, a Câmara e o Renderizador. No teu código, o renderizador está definido como alfa: true, o que é vital para a RA, pois permite que as partes "vazias" do navegador se tornem uma janela para o mundo real.

TensorFlow.js & COCO-SSD

COCO-SSD (Common Objects in Context - Single Shot MultiBox Detector) é um modelo treinado para reconhecer 80 classes de objetos. A beleza do TF.js está no seu backend WebGL, que garante que os cálculos de IA são feitos na GPU do Quest em vez da CPU, evitando que o dispositivo sobreaqueça.

7.2 Projeção Matemática (2D para 3D)

Esta é a parte mais técnica do guião. O modelo de IA devolve uma bbox (caixa delimitadora) em pixels (por exemplo, x=100, y=200).

A função detectionTo3D realiza a desprojeção:

• Normalização: Converte as coordenadas do ecrã para um intervalo de $-1$ para $+1$.
• Cálculo do FOV: Tem em conta o campo de visão da câmara.
• Raio Vetorial: Cria um vetor direcional a partir da posição da cabeça do utilizador em direção ao objeto.
• Colocação: Coloca a etiqueta 3D nesse vetor a uma distância definida (DIST).

7.3 Implementação do Teste de Acerto

O teste de acerto permite à aplicação "disparar" um raio invisível (raycast) para o espaço real para detetar interseções com pisos ou mesas. Quando o hitTestSource devolve um resultado, o cursor (anel verde) é encaixado nessa pose (posição e orientação).

7.4 Pipeline de IA: Deteção e Rotulagem

No código, a deteção não é feita a cada frame (o que faria o headset atrasar), mas sim a cada $2000ms$ (DETECT_INTERVAL_MS).

• Label Sprite: Como não Three.js não pode renderizar fontes HTML padrão diretamente numa cena 3D, usamos uma CanvasTexture. "Desenhamos" o texto numa tela invisível de HTML 2D e aplicamo-lo como textura a um Sprite 3D que está sempre virado para o utilizador (outdoors).

7.5 A Necessidade do HTTPS

WebXR e o acesso à câmara (getUserMedia) são classificados como "Funcionalidades Poderosas" pelos fornecedores de navegadores. Só funcionam num Contexto Seguro .

• Exceção Localhost: Pode testar no seu PC usando http://localhost, mas assim que tenta aceder a esse servidor a partir do seu headset Quest 3, o navegador bloqueia as funcionalidades XR porque detecta um IP de rede inseguro (por exemplo, http://192.168.1.10).
• A Solução: Deve usar um Serviço de Tunelamento ou Alojamento Seguro.

7.6 Meta Quest Link & Modo Desenvolvedor

Para executar e depurar o seu código de forma eficiente, o seu Quest 3 deve ser reconhecido como um dispositivo de programação.

Ativação Passo a Passo:

• Conta do Desenvolvedor: Registe-se no dashboard.oculus.com. Terá de criar uma "Organização" (pode ser qualquer nome).
• Aplicação Móvel: Abra a aplicação Meta Quest no seu telemóvel, vá ao Menu > Dispositivos > Definições do Headset > Modo Desenvolvedor e ative-a.
• O Link: Ligue o seu Quest 3 ao seu PC usando um cabo USB-C 3.0 de alta qualidade ou via Air Link (Wi-Fi 6 de alta velocidade).

7.7 A Fundação Three.js (O Boilerplate)

Antes de entrar em AR, temos de inicializar um ambiente 3D padrão. No entanto, para Quest 3, dois cenários são inegociáveis:

• Alfa & Antialias:
   

• Ativação XR:
   

Isto diz-Three.js para ouvir os dados de head-tracking do Quest ($6DOF$) e aplicá-los automaticamente ao objeto 'câmara'.

7.8 Gerir a Sessão AR (O Ciclo de Vida)

O botão "Enter AR" ativa o navigator.xr.requestSession. É aqui que definimos quais os "superpoderes" que a nossa aplicação precisa do hardware do Quest 3.

Funcionalidades Obrigatórias e Opcionais:

• local-andar: Isto diz ao Quest para definir a coordenada $Y=0$ no nível físico do piso real.
• hit-test: Permite a capacidade de lançar raios contra geometria do mundo real.
• deteção de planos: Solicita os dados "semânticos" (sabendo qual a malha que é uma 'tabela' ou uma 'parede').