Mini-Projecto · Experiência AR web publicada

Do conceito ao QR code com AR no browser

⏱ Duração estimada: 6 horas (≈ 4 aulas) ↗ Referencial SNQ

Índice

Contexto
Requisitos
Fases
Critérios de avaliação
Reflexão

Contexto

Cada par/trio cria uma experiência AR web publicada (URL + QR code) para um caso de uso real: embalagem interactiva, museu/escola (apontar para um póster), carta de visita AR, menu de restaurante, cartaz de evento. Sem app — abrir no telemóvel via QR. Foco em A-Frame + AR.js (marker) ou MindAR (image), conteúdo 3D otimizado, UX adequada.

Requisitos

Funcionais

Caso de uso definido + público + porquê de AR.
AR web funcional num browser mobile (iOS Safari ou Android Chrome).
Tracking marker ou image (escolher um) — marker impresso ou imagem-âncora.
Conteúdo 3D (modelo GLTF/GLB) + texto/UI.
Pelo menos 1 animação (rotação, escala, idle).
Áudio ou som opcional (botão para tocar).
Onboarding — instruções claras antes de pedir câmara.
Publicado em HTTPS (Vercel/Netlify) com QR code gerado.

Não-funcionais

Modelo < 5 MB (otimizado: < 50k polígonos, texturas comprimidas).
Repositório Git com README.
Plano B sem AR (vídeo ou foto do que aparece).

Fases

Fase 1 · 0.5h

Conceito + marker/imagem

Caso de uso; decidir marker fiducial ou imagem âncora; criar marker.

Conceito + marker/imagem impressa.

Fase 2 · 1.5h

Modelo 3D

Modelar/baixar; otimizar Blender; export GLB; testar tamanho.

GLB otimizado.

Fase 3 · 2h

AR.js / MindAR + A-Frame

Cena A-Frame; integrar marker; carregar modelo; animação.

AR funcional em localhost (HTTPS via ngrok).

Fase 4 · 1h

Onboarding + UX

Página de entrada; instruções; permissão câmara; fallback.

UX completa.

Fase 5 · 0.5h

Publicar + QR

Deploy Vercel/Netlify HTTPS; gerar QR code; README.

URL público + QR.

Fase 6 · 0.5h

Defesa

Demo ao vivo com QR + telemóvel; 3-5 min.

Apresentação.

Critérios de avaliação

Item	Peso
Conceito (caso, porquê AR)	10%
Tracking funcional (marker/imagem)	20%
Modelo 3D + otimização	20%
Animação + interação	10%
Onboarding + UX	15%
Publicação HTTPS + QR	10%
Plano B + acessibilidade	5%
Defesa	10%

Reflexão

Em meia página: que decisão de otimização fez mais diferença no tamanho/performance final? Que parte da UX falhou mais em testes? Se tivesses de fazer este projecto em app nativa (Unity + AR Foundation) em vez de web, o que mudarias?