Tutorial

Como criar sua primeira experiência de AR sem código

Você pode ir do zero a um link de AR funcional e compartilhável em uma única sessão.

Criar realidade aumentada costumava significar escrever JavaScript, lidar com bibliotecas 3D e publicar um app. Não é mais assim. Com o XR Designer você compõe uma cena em um viewport ao vivo, conecta comportamentos clicando e publica em um link que abre no navegador do celular. Sem instalação, sem SDK, sem equipe de engenharia.

Este é o caminho completo, do início ao fim. Se o formato é novo para você, O que é WebAR? cobre o básico primeiro. Caso contrário, abra o editor em outra aba e acompanhe.

Os nove passos, de ponta a ponta

  1. Comece um projeto. Abra o editor e crie um novo projeto. Comece de uma cena em branco ou escolha um modelo para pular a configuração — visualizador de produto, porta-retrato, portal ou cartão de visita. Um modelo já te coloca em uma cena funcional que você pode editar, o jeito mais rápido de aprender o layout.
  2. Escolha como ela se ancora. Toda cena de AR é vinculada a algo que a câmera reconhece, então defina o tipo de rastreamento primeiro. Escolha superfícies do mundo (posicione no chão ou na mesa), uma imagem impressa (um pôster, etiqueta ou cartão), um rosto (filtros e provador na câmera frontal), o céu ou uma localização por GPS. A escolha molda tudo o que vem depois, então defina isso de cara na configuração de rastreamento do projeto.
  3. Adicione seu conteúdo. Arraste um modelo 3D (glTF, GLB ou FBX — os clipes de animação vêm junto) ou solte uma primitiva como cubo, esfera ou cilindro. Adicione texto e luzes para a cena ficar legível em condições reais. Tudo está em escala do mundo real: uma unidade é um metro, então um cubo de 0,3 tem 30 centímetros de largura na mesa.
  4. Dê um visual a ela. Solte um material PBR sobre um objeto — são mais de 40, de cromado e ouro a vidro fosco e argila. Prefere um padrão? Use uma das texturas procedurais ou um shader animado como hologram ou fresnel. Precisa de algo específico que nenhum preset oferece? Gere uma textura personalizada a partir de um prompt de texto com texturas por IA, e ela cai direto na cena.
  5. Dê vida a ela. Adicione movimento com um preset de animação — órbita, flutuar, girar, balançar e mais umas duas dúzias, cada um com velocidade, intensidade e eixo. Para um movimento exato e autoral, grave uma linha do tempo de keyframes: navegue pela trilha, capture a transformação em cada ponto, e ela interpola entre eles.
  6. Torne-a interativa. É aqui que ela deixa de ser um modelo 3D e vira uma experiência. Conecte um gatilho a uma ação — quando alguém toca, chega dentro de um raio (proximidade) ou algo colide, dispare uma ação como reproduzir um efeito, reproduzir uma animação, ir para outra tela ou definir uma pontuação. É tudo visual, sem código. Quer peso e impacto? Ative a física ou anexe um efeito único como uma explosão de confete ou uma onda de choque.
  7. Adicione um HUD 2D (opcional). Se a experiência precisa de controles ou texto na tela, adicione um canvas de UI em espaço de tela. Posicione botões, textos, listas ou um carrossel deslizável, ancorados nos cantos e nas bordas da tela. Esses elementos se conectam aos mesmos gatilhos e ações de todo o resto, então um botão pode avançar uma tela ou disparar um efeito.
  8. Teste no seu celular. Antes de publicar qualquer coisa, confira em hardware real. Gere um link QR privado e assinado para visualizar a cena não publicada em um dispositivo — ele é separado da URL publicada, então você pode iterar sem publicar. Escaneie, aponte a câmera e veja sua cena onde ela de fato vai viver.
  9. Publique. Um clique te dá um link público e um QR code. Opcionalmente, proteja a página com senha e personalize as telas de splash e de início para que ela pareça sua desde o primeiro toque. Compartilhe o link ou imprima o código, e qualquer pessoa pode abrir.

O que você vê é o que é publicado

O editor e a experiência publicada renderizam a partir da mesma descrição de cena. A física, a animação, as partículas, as texturas e os shaders rodam por uma lógica compartilhada, mantida honesta por testes de paridade — então a AR que seus visitantes veem corresponde ao editor, até o movimento e os materiais. Não existe um "build" separado que se desvie do seu preview, e nenhuma surpresa depois de publicar. Se parece certo enquanto você edita, parece certo no celular.

O jeito mais rápido de aprender isso é começar de um modelo, mudar uma coisa e publicar. O ciclo inteiro leva minutos — e depois de fazer isso uma vez, o resto é só mais do mesmo.

Esse é o fluxo inteiro

Comece um projeto, ancore-o, adicione conteúdo, dê um estilo, anime, conecte as interações, teste no celular, publique. Nove passos, sem código, uma sessão. Você não precisa planejar um roadmap nem aprender uma engine 3D para publicar algo real hoje. Se você está pensando em onde isso se encaixa em uma campanha ou em uma loja, 7 formas de a realidade aumentada fazer seu negócio crescer tem as ideias. Quando estiver pronto, abra o editor e crie a primeira.

Crie sua primeira experiência de AR

De uma cena em branco a um link compartilhável em uma única sessão. Grátis para criar e visualizar — sem app, sem código.

Comece a criar — grátis

Continue lendo

Fundamentos

O que é WebAR? Realidade aumentada que roda no navegador

6 min de leitura
Negócios

7 formas de a realidade aumentada fazer seu negócio crescer

7 min de leitura