Como desejar alguém feliz aniversário usando realidade aumentada

Desejar aniversários aos seus amigos não é tão fácil ?

Eu tenho um amigo cujo aniversário estava chegando, então eu queria fazer algo especial para ela. Como ela é uma TechGeek como eu, não posso simplesmente conseguir um simples presente de aniversário como um ursinho de pelúcia ou chocolates. Então, comecei a procurar formas únicas de lhe desejar um feliz aniversário na web.

Acabei assistindo a um vídeo em que um cara estava propondo uma garota usando VR. Então, eu decidi – foi isso! Foi assim que eu ia fazer isso. Não a parte da proposta embora. ? ?

Bem, é muito caro criar uma cena AR, até agora…

Enquanto eu estava contribuindo para o Mozilla, eu criei alguns pequenos projetos de realidade virtual usando o A-Frame o framework web do Mozilla para construir experiências de realidade virtual. E acredite em mim, mesmo que você não saiba muito sobre VR ou AR, você pode facilmente criar uma cena de RV usando A-Frame. O único pré-requisito é o HTML, que você pode aprender facilmente aqui . Para um melhor entendimento, recomendo que você passe pela A-Frame School , que é uma ótima coleção de tutoriais destinados a iniciantes.

Então, eu decidi que usaria A-Frame, mas queria mais do que apenas uma simples cena de realidade virtual exibindo “Happy Birthday”. No final, optei por criar uma cena AR. Eu encontrei um grande projeto chamado AR.js . Se você quer começar com AR.js, aqui está um ótimo artigo para iniciantes .

Construindo um aplicativo web AR básico

Cena AR, criada usando AR.js

Para assistir a cena AR, você precisa:

  • Abra esta imagem do marcador HIRO no navegador da área de trabalho.
  • Abra este aplicativo da Web AR no navegador do seu telefone e aponte-o para a tela.

Quando você digitaliza um marcador (aqui, um marcador HIRO), ele exibe uma cena AR em seu telefone, assim como na imagem acima. Eu usei um marcador simples HIRO, mas você também pode criar seu próprio marcador .

Então, depois de adicionar todas essas bibliotecas, meu código ficou assim:

Aplicativo web básico para AR [Demo: https://bit.ly/2KecNxQ ]

Por favor, note que ao acessar qualquer aplicativo web AR, se você receber qualquer solicitação pedindo permissão para acessar a webcam, por favor permita. Caso contrário, o aplicativo não funcionará.

Adicionar modelos e fontes 3D

Então, agora temos o aplicativo web AR simples trabalhando em nosso dispositivo. Mas o que é um aniversário sem bolo ?! Felizmente, o A-Frame suporta três tipos de modelos 3D: glTF , OBJ e COLLADA . Saiba mais sobre modelos 3D no A-Frame aqui .

Eu baixei alguns arquivos de modelo 3D de bolo do Google Poly . Você pode importar qualquer arquivo de ativo no A-Frame usando a tag <a-assets> . Você também pode importar fontes separadas, caso queira usar uma fonte diferente.

Eu estava bem convencido de que A-Frame não poderia ser mais incrível. Mas espere…

Adicionar áudio

Aniversários também não estão completos sem a música de aniversário, certo? E o A-Frame também suporta arquivos de áudio. Você pode usar a tag <audio> para importar seus arquivos, sob a tag <a-assets>.

Importar arquivos de ativos

Adicione partículas

Qual é a coisa que vem à sua mente quando você ouve sobre um aniversário – depois do bolo, é claro? Uma festa, certo? Então, vamos adicionar confetes à nossa cena AR, usando o componente de sistema de partículas da A-Frame .

Adicione bibliotecas para confetes e texto 3D

Vamos juntar tudo

Modelos 3D

Este código irá exibir o modelo 3D do bolo. Mas, como você pode ver, adicionei alguns valores nos campos de rotação e escala . Então, vamos discutir isso. De acordo com a página do GitHub da A-frame:

  • Rotação : o componente de rotação define a orientação de uma entidade em graus. Ele toma o pitch ( x ), yaw ( y ) e roll ( z ) como três números delimitados por espaço, indicando graus de rotação.
  • Escala : o componente de escala define uma transformação de encolhimento, alongamento ou inclinação de uma entidade. São necessários três fatores de escala para os eixos X, Y e Z.
  • MTL: significa Arquivo de biblioteca de materiais ( .mtl ) Os arquivos de biblioteca de materiais contêm uma ou mais definições de material, cada uma das quais inclui a cor, a textura e o mapa de reflexão de materiais individuais. Estes são aplicados às superfícies e vértices dos objetos. Os arquivos de material são armazenados no formato ASCII e possuem o arquivo . extensão mtl .
  • OBJ : um formato de arquivo que foi criado como uma maneira simples de importar e exportar geometria de diferentes aplicativos 3D. Este é um tipo de arquivo comum usado por muitas soluções de design 3D.
  • Sugestão : se você não vir seu modelo, tente reduzi-lo. Os modelos OBJ geralmente possuem escalas extremamente grandes em comparação com a escala do A-Frame.

Se você está se perguntando como eu sabia os valores exatos de rotação, bem, eu não sabia. Eu usei uma ferramenta incrível criada pela equipe da Mozilla chamada A-Frame Inspector , construída apenas para este propósito.

Para saber mais sobre <a-obj-model>, visite este link .

Exibir modelo 3D do Cake

Partículas

Bem, este código pode parecer avassalador à primeira vista, mas acredite em mim, não é. Discutimos Rotation anteriormente, mas vamos falar sobre outros campos também:

  • Posição : coloca entidades em determinados pontos no espaço 3D. A posição usa um valor de coordenada como três números delimitados por espaço.
  • Preset : configuração predefinida. Os valores possíveis são: default , dust , snow , rain . Aqui nós escolhemos o padrão para exibir o início.
  • Cor : descreve a cor de uma partícula. Essa propriedade é uma propriedade de “valor ao longo da vida”, o que significa que uma matriz de valores pode ser fornecida para descrever alterações de valor específicas durante a vida útil de uma partícula.
  • Valor de aceleração : descreve a aceleração base deste emissor.
  • Contagem de Partículas : o número total de partículas que este emissor irá armazenar.
  • Direção : a direção do emissor. Se o valor for 1 , o emissor começará no início do ciclo de vida da partícula. Se o valor for -1 , o emissor começará no final do ciclo de vida da partícula e voltará ao normal.
  • Eixo de Rotação : Descreve o eixo de rotação deste emissor. Os valores possíveis são x , y e z .

Para saber mais sobre Sistema de Componentes de Partículas da A-Frame , visite este link .

Texto e áudio

Bem, você pode usar <a-text> também, mas eu decidi usar o Text Geometry Component para mais opções. É usado para gerar texto como uma única geometria.

  • Material : O componente de geometria de texto define apenas a geometria. Podemos aplicar qualquer material de três.js à geometria.
 <a-entity text = "valor: HELLO" material = "cor: vermelho; src: #texture"> </ a-entity> 

Para mais detalhes, visite a documentação do three.js.

  • Text Geometry : string e valor da fonte. (você deve editar o texto nesta parte, senão você vai querer feliz aniversário para o meu amigo ??)
  • Som : define a entidade como fonte de som ou áudio.
  • Reprodução automática : descreve se deve reproduzir automaticamente o som depois de definido.
  • Loop : descreve se o som será repetido quando o som terminar de tocar.
  • Ligado : um evento para a entidade ouvir antes de reproduzir o som.

Recursos:

Sim, você fez isso ? ? ?. Você criou seu primeiro aplicativo de AR . Se você fez tudo corretamente, você deve ver algo como a imagem abaixo:

Finalmente, feliz aniversario Krupa!

Se você gosta do meu trabalho, por favor, me siga no Medium @ Pratik Parmar ou me adicione LinkedIn . Sinta-se à vontade para entrar em contato comigo pelo Twitter: Pratik Parmar ou comente abaixo, caso precise de ajuda.

Além das contribuições de código aberto na Mozilla, sou Microsoft Student Partner e membro da comunidade no GDG Baroda. Gostaria de agradecer à Mozilla e à comunidade MozillaIN por me darem uma chance e os recursos para aprender sobre VR / AR e Open Source.

Esta sou eu, Pratik Parmar dando o sinal até a próxima aventura tecnológica. Mais e mais …

Texto original em inglês.