Realidade Aumentada fácil e rápida com AR.js - Gincana de Páscoa com AR

Oi pessoal, eu programei um app bem simples pra uma ‘gincana de páscoa’, e o pessoal curtiu, então queria compartilhar com vcs
Marcadores https://github.com/romuloctba/arhunt/tree/master/_markers
APP para jogar https://romuloctba.github.io/arhunt
Codigo Fonte https://github.com/romuloctba/arhunt

A Demanda

A idéia era criar uma forma de ‘caçada aos ovos’ com AR.

Funciona Assim

  • 10 marcadores são impressos e espalhados pelo escritório
  • O usuário abre o APP e ‘captura’ os marcadores com a câmera
  • Cada marcador traz uma letra, ou nenhuma
  • Ao coletar todas as letras, o usuário recebe um aviso
  • WIN

WIN: No nosso caso, o usuário mostrava que capturou as pistas necessárias, e advinhava a senha e ganhava uns chocolates heheh

(Obs: No dia da gincana, o APP estava apenas em pt-BR. Adicionei a internacionalização depois)

Stack

  • Webpack
  • Templates pug
  • Sass (mal usei, vai)
  • i18n - Internacionalização
  • Ar.JS
  • jQuery

Eis as razões:

Webpack

Dizem que ele é um gerador de Bundles -e não tá errado, mas na prática, ele é um importante gerenciador de tarefas, é isso que ele é.

Permite gerar ‘bundles’ otimizados, processar os arquivos, minificar CSS e JS, e por aí vai… Além de ser usado durante o desenvolvimento, com o live-reload.

Templates pug

Ora conhecido por jade, os templates pug são uma maneira legal de escrever menos código para template.
Permite usar variáveis, includes, blocos e mixins, reutilizar código, e escrever HTML quase como se fossem ‘seletores CSS’.

Sass

Nesse projeto eu mal usei o potencial do Sass, mas gosto das variáveis e includes - que permitem modularizar legal o projeto, deixando tudo bem organizadinho

i18n - Internacionalização

Foi bem fácil implementar uma i18n engine do 0, e bastante divertido. Ficou simples, mas fiz por remorso (no dia em que o APP foi usado LIVE, não tinha internacionalizado ainda, e ficou só em pt-BR. Alguns colegas e visitantes de fora precisaram de ajuda pra jogar :( ))

Ar.JS

É a grande estrela do projeto, e promete 60fps até em dispositivos antigos.
Ele basicamente une o Three.js - conhecido framework 3D para Javascript com o a-frame - Framework de realidade virtual e o ARToolkit (buildaram do C pro JS usando emscripten e asm.js)

O projeto está disponível no Github e cheio de exemplos por aí. Aqui tem um excelente GithubPages com Exemplos do AR.js

jQuery

Nossa Rômulo, usando jQuery em 2019?

É, ué.

Implementação
Marcadores https://github.com/romuloctba/arhunt/tree/master/_markers

Achei bem interessante como usar o AR.js. Fiz com imagens PNG, mas usar modelos 3d é relativamente fácil tb, porém só encontrei uns arquivos pesados, e ficaria ruim pro pessoal baixar na internet móvel.

Procurei manter a UI mais enxuta possível. Ficou um pouco parecido com Pokemon GO, mas nada proposital :)

O “segredo” está neste trecho:

Main-scene.pug
https://github.com/romuloctba/arhunt/blob/master/src/_partials/_main-scene.pug

1
2
3
4
5
a-scene(embedded, vr-mode-ui="enabled: false", arjs="trackingMethod: best; sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: false; changeMatrixMode: cameraTransformMatrix")
  a-entity(camera)
    a-marker#marker1.game-marker(type="barcode", data-code="1", value="1", registerevents="true")
      a-image(src="./images/clues/dracula.png", width="3", height="3" rotation="-90 0 0", position="0 0 -1.5 -5", scale="2 2 2 2", transparent=true)
    a-marker#marker2.game-marker(type="barcode", data-code="2", value="2", registerevents="true")

O a-scene contém as configurações necessárias. Peguei do DEMO do AR.js, basicamente dizemos que a detectionMode seria mono_and_matrix; com matrixCodeType: 3x3

É importante notar que todos os marcadores estão dentro de uma única a-entity(camera). Isso é importante, e evita erros de renderização.

E, conforme dá pra perceber no código, cada marcador é um a-marker e tem seu valor definido pelo data-code e value.

O conteúdo de está dentro do marcador (aqui uso apenas uma a-image, em PNG, com o personagem) ficará visível enquanto o marcador for lido pela câmera.
Além de exibir o conteúdo, um evento 'markerFound', que leio e uso para adicionar na lista de pistas encontradas, etc… O event listener está no main.js e chama o GAME_API.markerFound.

Toda lógica restante ficou no GAME API. Apesar de não ser a melhor prática… Eu avisei que escolhas foram feitas hehe

Bom, por hoje é isso. Se quiserem que eu explique algum detalhe específico do APP, por favor, avisa aí :)