Introdução

A ferramenta XR.plus tem como seu diferencial criar uma experiências de realidade aumentada (RA) no navegador sem que seja preciso baixar qualquer tipo de extensão ou aplicativo.

O XR.plus apresenta um poderoso estúdio (o qual executa diretamente no navegador) de criação de projetos de RA, ele permite construir composições complexas ou mais simples dependendo das suas necessidades. Alguns exemplos do que você será capaz de produzir com o XR.plus são: Projetos com objetos 3D, Ancorar verticalmente objetos, fazer Body tracking, Portais virtuais, 3D tracking, Detecção de movimento, dentre outras dinâmicas de RA. 

Observações: 

– Vamos contemplar nesse tutorial somente a versão free do XR.plus das funções principais dessa licença.

– A ferramenta e documentação estão em inglês

Inscrição na plataforma e criar primeiro projeto

Primeiro, é necessário fazer a inscrição pelo botão de ‘sing up’ na parte superior do site.

Após clicar, você preencherá o seu email e senha no formulário e avançará para uma página onde é preciso colocar os dados da sua instituição e mais algumas informações.

Depois disso, faça o login clicando pelo botão de ‘login’ na parte superior do site e então você será redirecionado para o XR.plus Studio onde nós iremos modelar nosso projeto de RA.

Nessa página clique no card com título ‘projects’ e depois clique no botão ‘create your first project’ que aparecerá. Em seguida escolha a opção ‘Web AR’ e clique no botão ‘OK’.

Depois, selecione o card  ‘Empty AR project’, crie um nome no campo abaixo dele e clique no botão ‘Create project’.

Importando modelos 3D

Nessa nova aba, onde iremos construir nosso cenário, clique no botão ‘Open Library’.

Nessa janela ‘project assets library’, por padrão, estarão alguns modelos 3D, imagens, vídeos, ícones, shapes e texto para usuário.

Abas com assets padrões da library

Modelos 3D externos para download

Além dos assets padrões do XR.plus, é possível importar arquivos do seu computador para usar nos projetos. 

Para conseguir os mais variados tipos de modelos, há vários repositórios  gratuitos. Indicamos a seguir alguns desses repositórios:

Free3D https://free3d.com/

Thingiverse http://www.thingiverse.com/

PinShape https://pinshape.com/

My Mini Factory https://www.myminifactory.com/ 

Cults 3D https://cults3d.com/en 

3D WareHouse https://3dwarehouse.sketchup.com/ 

GrabCad https://grabcad.com/library 

3D CadBrowser http://www.3dcadbrowser.com/ 

3D Turbo Squid http://www.turbosquid.com/

Obs.: nem todos os modelos são compatíveis com o XR.plus. Os formatos compatíveis são: .obj .fbx .glb .usdz; com tamanho máximo de 12 MB.

Para esse tutorial eu irei usar um modelo de peixe 3D do site Free3D. Link para baixar (arquivo compactado): Blue Tang v1 modelo 3D gratuito – .obj – Free3D

Ainda na janela ‘project assets library’, entre na aba ‘from computer’ e clique no botão ‘import a file’.

Ao clicar, a janela de arquivos do seu computador será aberta para que você selecione o seu modelo 3D “.obj” (13006_Blue_Tang_v1_l3.obj no caso desse tutorial).

Em seguida, deixe os botões de interruptores de  ‘import materials’ e Add to composition ‘Scene 1)’ na posição ativa e clique no botão ‘yes’.

Agora, para importar a textura do peixe, deixe, no menu à esquerda, o item 136006_blu_tang_v1_I3 selecionado e vá para a aba ‘materials’ ainda nesse menu.

Confira se o material ‘13006_Blue_Tang_v1’ está selecionado (e também a opção ‘phong’ no submenu abaixo)  e clique no ‘set texture’ ao lado do texto ‘color map’. Assim, irá abrir a janela de arquivos do seu computador e então selecione o arquivo ‘13006_Blue_Tang_v1_diff.jpg’.

Extra: – Em alguns modelos 3D há um arquivo de normal map (não nesse caso) e ele permite acrescentar pequenos detalhes ao alterar o ângulo de reflexão da luz na superfície, sem precisar de mais polígonos no modelo (codificado com vetor RGB no mapa normal).

Manipulação de objetos

Navegação

Na aba principal do studio (composition), estão localizados os nossos assets e é onde poderemos controlá-los com alguns comandos para navegação e alteração desses objetos:

Clicando com o mouse e arrastando é possível mover a visualização da cena.

Rolando o scroll do mouse é possível dar zoom ou tirar o zoom.

Nos campos ‘x’, ‘y’, ‘z’ perto do texto ‘position’ podemos setar a posição do nosso objeto em relação a origem da cena (coordenadas 0,0,0).

Uma outra alternativa para transladar as peças é colocar no modo de deslocamento no canto inferior esquerdo e clicar e arrastar os vetores da peça na direção desejada, como na figura abaixo.

Rotacionar o objeto é similar a controlar a posição, para isso é preciso selecionar o modo rotação no botão ao lado do modo posição e rotacionar pelos eixos de rotação que são disponibilizados.

Você pode também colocar o quanto você deseja rotacionar em relação a cada eixo nos campos de ‘rotation’ como o da imagem à direita.

Para alterar a escala dos objetos é preciso ajustar o  scroll do ‘size’, para a direita o objeto aumenta e para esquerda ele diminui, também é possível ajustar a escala pelo campo de numérico ao lado do scroll.

É importante observar que o retângulo branco na área de construção da cena demarca onde os objetos estarão em relação à superfície em que sua aplicação de RA será aplicada.

Alterando propriedades do material

No menu com as abas – | items | scenes | materials | lighten | – selecione a aba ‘materials’ e onde há as abas – | Phong | Unit | PBR | Toon | Vídeo | – escolha o tipo Phong (que é um material básico com cor e uma textura normal).

O scroll do ‘opacity’ controla a transparência do objeto (0 – transparente; entre 0 e 1 – translúcido; 1 – opaco).

O scroll do  ‘shininess’ altera o brilho que seu objeto irá emitir.

O scroll do ‘reflectivity’ determina o quanto o seu objeto irá refletir a luz do ambiente que você configurar.

Para mais informações sobre o estilo dos materiais veja esse link Materials | XR+ documentation da documentação oficial do XR.plus.

Obs: 

– Para mudar a skin do seu objeto navegue até o menu do lado direito ‘meshes’ e clique na caixa com um número e altere a skin que será aplicada no modelo.

Luz

Para alterar a luz da cena, clique na aba ‘lighten’ (verifique se o botão “interruptor” está na posição ligada, se não estiver clique nele).

Há três losangos que representam os pontos de luz no cena e, para controlar a luminosidade que cada um emite, selecione no menu esquerdo a ‘light’ (1, 2 ou 3) que você quer ajustar (selecione a opção que tem mesma cor do losango que representa o ponto a ser alterado).

Cada ‘light’ tem um scroll de ‘intensity’, que altera a força da luz no objeto, e um de ‘distance’, o qual simula uma alteração na posição de distância de onde a luz estará.

Caso queira alterar a luz no geral selecione o ‘ambient light’ e posicione seu scroll ‘intensity’ de acordo com a claridade que você preferir.

Caso queira fazer com que reflexo do ambiente em que a RA será aplicada combine mais com reflexo criado artificialmente você pode testar algumas opções que a ferramenta oferece.

Colocando uma ação interativa na cena

Para colocar uma ação interativa no seu projeto, clique na aba ‘scenes’, do menu esquerdo, e crie uma nova cena apertando em ‘add a scene’.

Após isso, selecione a ‘Scene 2’ e importe um cubo (dos assets padrões) para essa nova cena.

Clique no botão com logo de raio no menu direito e assim então abrirá uma janela com várias possíveis ações, em seguida selecione a opção ‘go to previous scene’ e clique em ‘ok’.

Agora, volte para a ‘Scene 1’ (é possível voltar pela aba ‘scenes’, ou pelo botão de selecionar cenas na aba ‘items’).

A seguir, depois de selecionar o peixe,  clique no botão com raio e escolha a opção ‘go to previous scene’ na janela de interações e clique em ‘ok’.

Dessa forma, na sua aplicação, quando alguém clicar no peixe, irá passar para a próxima cena com o cubo que ao ser clicado volta para a cena com o peixe.

Tracking (rastreamento)

Clicando na aba ‘tracking’, do menu mais à esquerda, abrirá um catálogo com várias opções de rastreamento para o seu projeto de RA, as quais são:

Keep composition in center (deixa a imagem fixa no centro da tela);

SLAM surface tracking – 6DOF (coloca a composição no ambiente real ancorada em uma superfície plana);

Floating – 3DOF (método de rastreamento mais simples – não faz rastreamento de superfície – coloca sua composição virtual flutuando em relação a posição da câmera);

Image tracking (coloca sua composição em marcadores físicos – saiba mais em AR image markers | XR+ documentation );

Face tracking (rastreamento da cabeça);

Body tracking (função paga – rastreamento de partes do corpo).

Para esse tutorial selecione a opção ‘SLAM surface tracking – 6DOF’ (não é necessário alterar as configurações padrões).

Para entender mais sobre o rastreamento ‘SLAM surface tracking – 6DOF’ e em quais navegadores e smartphones ele funciona, consulte a seção de ‘Tracking’ da  documentação do XR.plus Tracking modes | XR+ documentation.  Caso você queira se aprofundar mais na questão do rastreamento em RA, leia o capítulo “2.5 Fundamentos da RA: Rastreamento (Tracking)” do livro gratuito – Introdução a Realidade Virtual e Aumentada – link para download: Livro “Introdução a Realidade Virtual e Aumentada” (esemd.org).

Desse jeito, o seu aplicativo já estará funcional e você pode mandar um link ou um QR code para os seus usuários.

Link para testar o projeto do tutorial: xr.plus/uft (ou veja pelo QR code acima)

Extra

Modules

Nessa aba há várias funcionalidades adicionais (algumas pagas). Nela vale a pena analisar a opção ‘advanced interactions’ onde você terá acesso para controlar o estado dos modelos e, a partir de alguma interação do usuário, realizar animações/ vídeos/áudios, esconder/mostrar composições, colocar funcionalidades dos botões, dentre outros recursos complementares para o seu projeto.

Statistics

Na aba ‘statistics’  você pode visualizar os acessos a sua aplicação de RA e criar estratégias a partir dos gráficos oferecidos.

Publish settings

Editar o cover do projeto

Você pode customizar a imagem de cover do projeto indo em ‘Publish settings’ > ‘Project cover’. Nesse ambiente, é possível customizar o background e ajustar posição e tamanho dos componentes 3D no seu cover. Além disso, você pode importar uma imagem do seu computador para usar no background. Depois de concluir, pressione o botão ‘save cover’ para salvar seu novo cover.

Créditos

Imagens utilizadas no tutorial foram retiradas da página do site do XR.plus, documentação oficial da ferramenta e produzidas no estúdio de criação do site.