Documentação Creativity XR

Tudo que você precisa para criar experiências de Realidade Aumentada incríveis.

O que é o Creativity XR?

O Creativity XR é uma plataforma completa para criação, publicação e gerenciamento de experiências de Realidade Aumentada (AR) e Realidade Virtual (VR) diretamente no navegador, sem necessidade de instalar aplicativos.

Com ele, você pode criar desde experiências simples com marcadores de imagem até projetos complexos com body tracking, RFID/NFC, tours virtuais 360° e muito mais.

Todas as experiências são baseadas em WebAR e funcionam em Chrome (Android) e Safari (iOS 15.4+).

Criando seu Primeiro Projeto

  1. Acesse o Dashboard e vá até a aba Templates.
  2. Escolha o tipo de projeto desejado (ex: Marker-based AR). O editor será aberto em uma nova aba.
  3. No editor, configure seus marcadores, adicione camadas (imagens, vídeos, modelos 3D).
  4. Clique em Config para definir o nome do projeto. Ao salvar, a pasta do projeto será criada.
  5. Clique em Gerar AR para publicar. Você receberá uma URL e QR Code para compartilhar.
Cada projeto tem uma URL única no formato: https://arstudio.pinhasoft.com/<seu_token>/<nome_do_projeto>

Visão Geral do Editor

O editor é dividido em três painéis:

  • Painel Esquerdo: Marcadores, configurações do tipo de projeto e ações (Documentação, Config, Gerar AR).
  • Painel Central: Pré-visualização 3D com controles de translação, rotação e escala.
  • Painel Direito: Gerenciamento de camadas (imagens, vídeos, modelos 3D, áudio) com controles de transformação.

Atalhos de Teclado

  • Q — Mover (Translate)
  • W — Rotacionar (Rotate)
  • E — Escalar (Scale)

Marker-based AR

O tipo mais comum de AR. Uma imagem impressa (marcador) é detectada pela câmera e conteúdo digital é sobreposto a ela.

Como usar

  1. No painel esquerdo, clique em Adicionar Marcador e faça upload de uma imagem (JPG/PNG).
  2. Selecione o marcador e adicione camadas no painel direito (imagem, vídeo, modelo 3D ou áudio).
  3. Ajuste a posição, rotação e escala de cada camada usando os controles de transformação ou arrastando no preview 3D.
  4. Configure a estabilização (filterMinCF, filterBeta) para ajustar a suavidade do tracking.
  5. Clique em Gerar AR para compilar os marcadores e publicar.
Use imagens com alto contraste e muitos detalhes para melhor detecção. Evite imagens muito simples ou simétricas.
Cada marcador deve ter no mínimo 300x300px. Imagens muito pequenas podem não ser detectadas.

Markerless AR

Posicione conteúdo 3D em superfícies detectadas pela câmera, sem necessidade de marcador impresso.

Como usar

  1. Adicione camadas no painel direito (modelos 3D, imagens, vídeos).
  2. Configure o target markerless (cor e imagem do indicador de posição).
  3. O usuário aponta a câmera para uma superfície plana e toca na tela para posicionar o conteúdo.

Funciona melhor em superfícies com textura. Pisos lisos e monocromáticos podem dificultar a detecção.

Location-based AR

Posicione conteúdo AR em coordenadas GPS específicas. Ideal para tours, museus e experiências urbanas.

Como usar

  1. Clique em Adicionar Localização e defina nome, latitude, longitude e raio.
  2. Adicione camadas de conteúdo para cada ponto GPS.
  3. O conteúdo será exibido quando o usuário estiver dentro do raio definido.
Requer que o dispositivo tenha GPS ativo. A precisão pode variar em ambientes internos.

Object Recognition

Reconheça objetos 3D reais e sobreponha conteúdo digital. Envie fotos de referência do objeto em múltiplos ângulos.

Como usar

  1. Faça upload de várias fotos do objeto de referência (mín. 3 ângulos diferentes).
  2. Defina o nome do objeto e ajuste a sensibilidade de reconhecimento.
  3. Adicione camadas de conteúdo que serão exibidas quando o objeto for reconhecido.

Projection Mapping

Projete conteúdo digital sobre superfícies reais como paredes, pisos e mesas.

Como usar

  1. Selecione o tipo de superfície (chão, parede, mesa ou personalizado).
  2. Defina as dimensões da área de projeção (largura × altura em metros).
  3. Configure cor de fundo e opacidade.
  4. Adicione camadas de conteúdo a ser projetado.

Superimposition AR

Substitua ou sobreponha objetos reais por versões virtuais. Ideal para try-on de óculos, roupas, mobília.

Como usar

  1. Faça upload da foto ou modelo 3D do objeto real a ser substituído.
  2. Selecione o tipo de objeto (rosto, corpo, mão, pés, mobília, etc.).
  3. Escolha o modo de alinhamento (automático, manual ou âncora).
  4. Adicione as camadas virtuais que substituirão o objeto real.

Face Tracking

Crie filtros e efeitos faciais em tempo real, similares aos filtros do Instagram e Snapchat.

Como usar

  1. Adicione camadas de conteúdo (imagens, modelos 3D) no painel direito.
  2. Posicione e dimensione o conteúdo relativo ao rosto usando o preview 3D.
  3. O conteúdo seguirá automaticamente os movimentos faciais do usuário.

Hand Tracking

Interações gestuais com rastreamento de mãos. Ideal para controle sem toque.

Como usar

  1. Adicione camadas de conteúdo que responderão aos gestos das mãos.
  2. Configure quais gestos ativarão cada ação (apontar, pinçar, abrir, fechar).

Body Tracking

Rastreamento corporal completo para experiências imersivas. Requer webcam ou Kinect.

Como usar

  1. Configure os pontos de rastreamento corporal desejados.
  2. Associe conteúdo digital a partes específicas do corpo.
  3. Para maior precisão, use o Kinect Bridge Server (veja Ferramentas).

Kinect Tracking

Rastreamento avançado via Microsoft Kinect com skeleton tracking de alta precisão.

Requisitos

  • Microsoft Kinect v2 conectado ao computador
  • Kinect Bridge Server rodando localmente (veja Ferramentas)
  • Plano Agency para uso completo

RFID / NFC

Ative experiências AR com tags RFID e NFC. Ideal para eventos, crachás e pulseiras inteligentes.

Como usar

  1. Configure as tags RFID/NFC com seus UIDs no editor.
  2. Associe conteúdo AR a cada tag.
  3. Use o RFID/NFC Bridge Server para conectar o leitor (veja Ferramentas).
  4. Quando uma tag é lida, o conteúdo associado é exibido automaticamente.

Photo Booth

Cabine de fotos virtual com filtros, molduras e efeitos AR. Perfeito para eventos.

Como usar

  1. Configure molduras e overlays de imagem.
  2. Adicione filtros faciais ou efeitos AR opcionais.
  3. Os usuários podem capturar fotos e compartilhar diretamente.

Tour Virtual 360°

Crie tours imersivos em 360 graus com hotspots interativos.

Como usar

  1. Faça upload de imagens 360° (equiretangulares) para cada ponto do tour.
  2. Adicione hotspots interativos para navegação entre cenas.
  3. Configure transições e informações em cada ponto.

AR Video Chat

Videochamadas com elementos de AR sobrepostos em tempo real.

VR Chat

Ambiente de chat em realidade virtual com avatares e espaços 3D personalizáveis.

Indoor Mapping

Mapeamento e navegação indoor com pontos de interesse e rotas AR.

Como usar

  1. Defina a planta baixa ou mapa do ambiente interno.
  2. Adicione pontos de interesse (lojas, salas, banheiros, etc.).
  3. Configure rotas de navegação com setas AR.

Virtual Showcase

Vitrine virtual de produtos 3D. Exiba produtos em AR antes da compra.

Magic Book

Livros interativos com conteúdo AR. Cada página do livro pode ter conteúdo 3D diferente.

Como usar

  1. Adicione as páginas do livro como marcadores de imagem.
  2. Associe conteúdo AR (animações, vídeos, modelos 3D) a cada página.
  3. O leitor aponta a câmera para a página e o conteúdo ganha vida.

Interactive Quiz

Quizzes interativos gamificados com AR. Perfeito para educação e treinamento.

Business Card AR

Cartões de visita com realidade aumentada. Aponte a câmera para o cartão e veja informações interativas.

Como usar

  1. Faça upload da imagem do seu cartão de visita como marcador.
  2. Adicione camadas com seu portfólio, links, vídeos de apresentação.
  3. Compartilhe o QR Code junto com o cartão físico.

OCR Recognition

Reconhecimento de texto em tempo real com sobreposição de conteúdo AR.

Audio-Reactive

Visuais reativos a áudio e música em tempo real. Perfeito para shows e eventos musicais.

3D Character Painting

Pintura em personagens e modelos 3D em realidade aumentada.

Draw-to-Animation

Transforme desenhos 2D em animações 3D que ganham vida com AR.

Emotion-Reactive

Conteúdo que reage a expressões faciais do usuário em tempo real.

Sound-to-Visual Tunnel

Túnel visual imersivo gerado proceduralmente a partir de som e música.

Kinect Bridge Server

Servidor local que conecta o Microsoft Kinect à plataforma Creativity XR, permitindo Body Tracking e interações gestuais em tempo real via WebSocket.

Instalação

  1. Baixe o Kinect Bridge Server na aba Ferramentas do Dashboard.
  2. Escolha entre o código-fonte (Python) ou o executável Windows (.exe).
  3. Conecte o Kinect v2 ao computador via USB 3.0.
  4. Execute o servidor. Ele abrirá uma conexão WebSocket na porta 8765.
  5. No editor, projetos do tipo Kinect Tracking se conectarão automaticamente.

Requisitos

  • Windows 10/11
  • Microsoft Kinect v2
  • Kinect for Windows SDK 2.0
  • USB 3.0

RFID / NFC Bridge Server

Servidor local que conecta leitores RFID e NFC à plataforma, permitindo ativar experiências AR com crachás, pulseiras e tags físicas.

Instalação

  1. Baixe o RFID/NFC Bridge Server na aba Ferramentas do Dashboard.
  2. Conecte o leitor RFID/NFC ao computador (USB ou serial).
  3. Execute o servidor. Ele abrirá uma conexão WebSocket na porta 8766.
  4. Configure as tags no editor com os UIDs corretos.

Leitores Compatíveis

  • ACR122U (NFC/RFID USB)
  • Leitores HID compatíveis com protocolo PC/SC
  • Leitores seriais genéricos (configurável)

PWA & App Móvel

Todo projeto publicado é automaticamente um Progressive Web App (PWA). Isso significa que os usuários podem "instalar" a experiência na tela inicial do celular como um app nativo.

Configuração

Nas Configurações do Projeto (botão Config no editor), você pode personalizar:

  • Ícone do App: Faça upload de uma imagem PNG/SVG para o ícone.
  • Cor de Fundo: Cor exibida ao abrir o app.
  • Cor do Tema: Cor da barra de status do navegador.
  • Tamanho do Logo: Ajuste o tamanho do ícone dentro do quadrado.

Analytics

Disponível nos planos Pro e Agency. Acompanhe visualizações, dispositivos, localização dos usuários e tempo de engajamento de cada projeto.

Os dados são acessíveis no Dashboard, na seção de cada projeto.

API

A API do Creativity XR permite integração programática com seus projetos.

Autenticação

Todas as requisições autenticadas devem incluir o header:

Authorization: Bearer <seu_token_jwt>

Endpoints Principais

  • POST /api/auth/login — Autenticação
  • GET /api/auth/check — Verificar sessão
  • GET /api/user/projects — Listar projetos
  • POST /api/create-folder — Criar projeto
  • POST /api/save-file — Upload de arquivo
  • GET /api/user/team — Listar membros da equipe