AR.js Studio - Realidade Aumentada na Web baseado em marcadores

Thayana Correa Mamore — Thu, 02 Jul 2020 23:07:23 +0000

Há quase 2 anos tive meu primeiro contato com A-Frame e AR.js - ferramentas fantásticas para criação de realidade virtual e realidade aumentada baseada na web. Obviamente, me tornei fã e entusiasta dessas tecnologias na minha cidade. Por conta disso, tive sede de aprender mais sobre programação e, finalmente, me encontrei no meio dev.

O AR.js deixou de fazer parte, no terceiro bimestre de 2019, do repositório pessoal de seu criador, Jeromine Etienne, para ser movido à um repositório organizacional, o AR.js Org. O AR.js em si só, já dava uma facilidade imensa na utilização dele e criação de conteúdos em RA (Realidade Aumentada), apesar de ter como pré-requisito conhecimentos em HTML e programação em Javascript. Tanto é, que no Twitter, é possível filtrar através da hashtag #arjs vários exemplos de RA incríveis compartilhados por pessoas no mundo todo. O atual mantenedor dessa organização (Nicolò Carpignoli) idealizou, convocou pessoas voluntárias, da qual faço parte, e passou a liderar uma equipe responsável por criar o AR.js Studio, uma plataforma de autoria, onde você mesmo poderá ser o próprio autor na criação de experiências em Realidade Aumentada na Web, sem precisar ter conhecimento de programação. Fazendo assim, o AR.js se tornar ainda mais fácil.

Como já havia feito o anúncio, a plataforma já está liberada na versão beta. Com ela já é possível criar um dos tipos de realidade aumentada: a baseada em marcadores. Abaixo, explicarei os passos que precisam ser seguidos para já obter sua própria experiência RA.

Acesse a página do AR.js Studio https://ar-js-org.github.io/studio/

A tela inicial acima fornece as opções de projetos baseados em localização (Location-based) ou em marcadores (Marker-based). Selecione a opção Marker-based e pressione Start building.

Utilizarei o marcador padrão, mas você pode fazer o upload da sua própria imagem. O marcador padrão poderá ser baixado do site clicando em Download marker logo abaixo da imagem dele. Não será necessário fazer mais nada neste passo.

Agora você clica em Upload file ou Click to upload. Para este experimento, vou usar um modelo 3D (de preferência do tipo GLB) gratuito em https://sketchfab.com/3d-models/robot-defender-6f40eb3af7bc495f8f30e896e9d0c537 produzido por super7 e lançado sob uma licença de creative commons no Sketchfab.

A última etapa é exportar o projeto. Duas opções

Publish on Github (Publicar no Github)
Download Package (Baixar pacote)

Meu conselho é que, se você não possui seu próprio servidor web, crie sua conta no Github e escolha essa opção, depois faça o login na sua conta.

Você precisará dar um nome ao projeto, em Name your project e pressionar em Publish para poder publicá-lo. Dependendo da sua conexão à Internet, pode demorar alguns segundos a minutos, mas vale muito a pena esperar.

Logo após a espera, você recebe de volta uma URL https://thauska.github.io/teste-roboyqpb09/. Aponte o marcador para a câmera.

Para testar, inseri esta URL em um navegador Chrome do meu smartphone Android e permiti o acesso à minha câmera (veja abaixo ou tente você mesmo, o que é mais divertido).

Como podemos ver, mesmo a versão sendo beta, ela já é muito boa, nos permitindo criar experiência RA sem precisar programar, sem códigos, somente seguindo esses passos. No momento só precisa ter atenção às extensões de arquivos, que não podem estar em letra maiúscula, e o nome sem espaços em branco.

Existe um guia de como fazer um bom marcador, que está somente em inglês. Em breve, traduzirei para pt-br.

AR.js Studio - versão beta

Thayana Correa Mamore — Thu, 18 Jun 2020 02:29:23 +0000

No dia 16 de junho de 2020, ocorreu o lançamento da versão beta do AR.js Studio, uma plataforma de criação de conteúdos em realidade aumentada para web. Foi idealizada e é liderada por Nicolò Carpignoli, atual mantenedor do AR.js, que convocou em fevereiro deste ano e montou uma equipe de desenvolvedores e designers espalhados pelo mundo para que conteúdos de Realidade Aumentada na Web possa ser criada por qualquer pessoa, sem que precise saber programar. O projeto é open source e gratuito para todos. Como a versão é beta, ela está na fase de testes e recebimento de feedbacks. Mas já está disponível ao público.

Por enquanto, a plataforma ainda está somente no idioma inglês.

Atualmente, os recursos disponíveis são:

RA baseado em marcador (imagens, vídeos, modelos 3D);
RA baseada em localização (imagens, vídeos, modelos 3D);
Deploy para o Github (é necessário ter conta) e obteção imediata da URL;
Exportação do código como arquivo ZIP.

Tudo sem precisar programar, gratuito e de código aberto.

Mais recursos e melhorias estão sendo desenvolvido e chegarão em breve!

Clique abaixo para acesso a plataforma:

AR.js Studio

DEV Community: Thayana Correa Mamore

AR.js Studio - Realidade Aumentada na Web baseado em marcadores

AR.js Studio - versão beta