EXP-001Lab / Experiment
Spatial HUD
Uma camada de interface que acompanha o olhar do usuário em ambientes 3D, mantendo dados críticos legíveis sem poluir o campo de visão.
Code
EXP-001
Status
Prototype
Technologies
WebXR / Three.js
Temas
WebXRSpatialInterface
Objetivo
Descobrir quanta informação um HUD pode carregar em uma cena 3D antes de competir com o próprio ambiente — e qual ancoragem mantém o dado legível sem virar obstáculo.
Abordagem
- 01Três modos de ancoragem comparados no mesmo cenário: fixo à cabeça, fixo ao mundo e híbrido (aparece sob demanda e depois solta no mundo).
- 02Tipografia testada em três faixas de distância, ajustando tamanho angular em vez de tamanho em pixels.
- 03Painéis divididos por prioridade: estado crítico sempre visível, detalhe só ao focar.
Arquitetura
- Cena
- Three.js com câmera XR e um grupo dedicado só à camada de interface.
- Layout
- Posições descritas em ângulo e distância, convertidas para coordenadas da cena.
- Estado
- Store única de UI compartilhada entre a versão em tela e a versão espacial.
- Render
- Painéis como texturas de texto atualizadas apenas quando o dado muda.
Resultados
- O modo híbrido foi o único que sobreviveu a sessões longas: menos elementos permanentes, mais contexto sob demanda.
- Dimensionar tipografia por ângulo eliminou o texto que sumia ao longe e gritava de perto.
- Saiu daqui um conjunto inicial de tokens de UI espacial (escala, distância confortável, contraste) reaproveitado nos experimentos seguintes.
What is being tested
- Ancoragem de painéis em relação à cabeça e ao mundo
- Legibilidade tipográfica em profundidade variável
- Hierarquia de informação com foco em leitura periférica
Learnings / next steps
- Menos elementos fixos e mais contexto sob demanda reduz fadiga.
- Próximo passo: tokens de UI espacial reutilizáveis entre projetos.