Documentação xr/studio
Image Tracking
Mostre conteúdo sobre uma imagem real, como um cartaz ou uma caixa de produto. Escolha uma imagem que funcione bem, defina a largura impressa e inicie ações quando a câmara a encontra.
O que faz o image tracking
O image tracking mostra conteúdo sobre uma imagem real, como um cartaz, um folheto, uma caixa de produto ou uma imagem num ecrã. O espectador aponta o telemóvel para a imagem. O conteúdo aparece sobre a imagem e mantém-se nela enquanto o telemóvel se move.
Criar uma cena de image tracking
- Abra a faixa Scenes na parte inferior do editor.
- Clique em + Add Scene.
- Selecione Image Tracking.
A nova cena contém:
- um Image Target com uma imagem marcadora incluída e um cubo de exemplo por cima;
- luzes e um HDR, para que os modelos 3D tenham reflexos;
- um skybox, como fundo enquanto edita. Os espectadores não o veem. Veem a imagem da câmara.
No viewport, arraste para orbitar à volta da imagem e use a roda do rato para fazer zoom, como numa cena Model Viewer.
Escolher a imagem
Selecione o Image Target. Na secção Asset, selecione a imagem para onde os espectadores vão apontar. Use o mesmo ficheiro que imprime ou mostra num ecrã. Imagens JPEG, PNG e WebP funcionam. As zonas transparentes contam como branco, como no papel.
Verificar a qualidade do tracking
A secção Image Target mostra Tracking quality. Dá uma classificação em estrelas, o número de pontos característicos e quanto da imagem os pontos cobrem. O xr/studio encontra os pontos com o mesmo detetor que o player usa, por isso a classificação corresponde ao que o telemóvel do espectador vê.
Ative Show feature points para ver os pontos sobre a imagem no viewport. A câmara procura estes pontos.
![]()
| Classificação | O que esperar |
|---|---|
| ★★★★★ Excellent, ★★★★ Good | A câmara encontra a imagem depressa e segue-a, também em ângulo. |
| ★★★ Fair | A câmara encontra a imagem quando esta ocupa uma boa parte da vista. |
| ★★ Weak, ★ Poor | A câmara encontra a imagem raramente, ou nunca. Use outra imagem. |
Uma boa imagem tem:
- Muito detalhe. Fotografias e ilustrações com textura, arestas e cantos funcionam melhor.
- Nenhuma zona lisa grande. Logótipos simples, fundos lisos e texto sozinho dão poucos pontos.
- Nenhum padrão repetido. Grelhas, azulejos e riscas tornam os pontos difíceis de distinguir.
- Detalhe em toda a imagem. Se os pontos estiverem todos num canto, a imagem perde-se quando esse canto sai da vista.
- Contraste forte. O contraste ajuda mais do que muitas cores.
Definir a largura impressa
Em Printed width (cm), introduza a largura real da imagem, impressa ou mostrada no ecrã.
Em AR, o xr/studio usa esta largura para saber a que distância está a imagem. Se a largura estiver errada, o conteúdo parece deslizar quando o espectador se move. No Android, o player mede o tamanho real quando o espectador move um pouco o telemóvel, e corrige o conteúdo.
A largura impressa é a escala do target. O conteúdo dentro do target cresce e encolhe com ela.
Adicionar conteúdo à imagem
Coloque o conteúdo dentro do Image Target na hierarquia. Nesta cena, o novo conteúdo 3D entra no target, com cerca de 10 cm de largura, sobre a imagem.
O conteúdo dentro do target usa a imagem como unidade: 1 é a largura da imagem. A imagem fica deitada, e o eixo para cima (Y) aponta para fora da imagem.
Pode mover o target no viewport, mas não o pode rodar. A posição serve apenas para o editor: no player, a câmara coloca o target sobre a imagem. Pode apagá-lo e adicionar um novo em Add Entities, na secção Advanced.
Seguir várias imagens
Uma cena pode ter mais de um Image Target. Cada target tem a sua imagem, o seu conteúdo e as suas ações. Para adicionar um target, abra Add Entities e arraste Image Target da secção Advanced para a cena. Depois selecione a imagem.
Um novo target fica à direita dos outros targets. Afaste os targets se ficarem sobrepostos, para que possa editar o conteúdo de cada um. No player, a câmara coloca cada target sobre a sua imagem.
A câmara pode mostrar até três imagens ao mesmo tempo. No iPhone, até quatro. O guia mostra todas as imagens dos targets e diz ao espectador para apontar para uma delas.
Seguir um rótulo numa lata ou garrafa
Um Cylinder Target segue uma imagem que dá a volta a uma lata, uma garrafa ou um copo com lados direitos. Para adicionar um, abra Add Entities e arraste Cylinder Target da secção Advanced para a cena. Também pode selecionar um Image Target e mudar Shape para Cylinder.
Defina dois valores no inspector:
- Label width: o comprimento do rótulo impresso à volta do cilindro.
- Diameter: o diâmetro da lata, garrafa ou copo.
Um Cylinder Target novo tem o tamanho do rótulo da frente de uma garrafa de vinho: um rótulo de 9 cm numa garrafa de 7,5 cm. Mude os dois valores para o tamanho do seu objeto.
O inspector mostra quanto o rótulo dá a volta ao cilindro. A imagem que seleciona tem de ser o rótulo inteiro, plano, como era antes de ser colocado no objeto.
No viewport, o cilindro está de pé. O eixo para cima (Y) é o eixo do cilindro, e o centro do rótulo aponta para a frente (Z). Coloque o conteúdo à frente do rótulo ou por cima dele. O conteúdo no centro fica dentro do objeto.
O Android e o Meta Quest seguem cylinder targets em AR. O iPhone e o iPad só seguem imagens planas, por isso não mostram o conteúdo de um cylinder target.
Extended tracking
O Extended tracking define o que acontece quando a câmara perde a imagem.
- Desligado: o conteúdo esconde-se até a câmara voltar a encontrar a imagem.
- Ligado: o conteúdo fica onde a imagem estava.
Com o extended tracking ligado:
- Em AR (iPhone, Android, Meta Quest), o dispositivo segue a sala. O conteúdo fica no lugar enquanto o espectador anda à volta.
- Num browser de telemóvel sem AR, o giroscópio mantém o conteúdo quando o espectador roda o telemóvel. Andar move-o. O iPhone pede uma vez autorização para usar o movimento.
Iniciar ações quando a imagem é encontrada ou perdida
Selecione o Image Target e abra Actions. Use os event types On Target Found e On Target Lost. Por exemplo, reproduza um vídeo quando a câmara encontra a imagem e pause-o quando a câmara perde a imagem. Veja Actions.
O que os espectadores veem
![]()
- A história mostra um cartão com a imagem e um botão Start AR.
- Depois de o espectador tocar em Start AR, a câmara abre. Uma cópia transparente da imagem aparece no centro, como guia.
- Quando a câmara encontra a imagem, o guia desaparece e o conteúdo aparece sobre a imagem.
Dispositivos
| Dispositivo | Como funciona o image tracking |
|---|---|
| iPhone e iPad | Start AR abre a App Clip da Cyango. A App Clip segue a imagem com ARKit. |
| Telemóveis Android com ARCore (Chrome) | AR no browser. |
| Meta Quest 3 e 3S | AR imersiva no Quest Browser. Na primeira vez, olhe para a imagem de vários ângulos durante cerca de 20 segundos. O headset mede onde está a sua câmara e guarda essa medida. |
| Computadores e outros telemóveis | A imagem da câmara aparece na página, com o conteúdo por cima. |
Os espectadores têm de permitir o acesso à câmara. O image tracking também funciona offline: quando o espectador descarrega a história para uso offline, os ficheiros do tracker são incluídos.
Dicas
- Ilumine a imagem de forma uniforme. Evite reflexos e sombras fortes.
- Use uma imagem maior para espectadores que ficam mais longe. Uma impressão de 20 cm funciona bem entre cerca de 30 cm e 1 m.
- No Android em AR, o foco da câmara é fixo. Imagens muito próximas podem ficar desfocadas. Use uma imagem maior e afaste-se um pouco.
- As imagens em ecrãs funcionam, mas uma impressão dá o resultado mais estável.