Realidade aumentada com visualizador de modelos

Em fevereiro, lançamos o componente da Web <model-viewer>, que permite adicionar um modelo 3D de maneira declarativa a uma página da Web, enquanto o modelo é hospedado no seu próprio site. Ele não ofereceu suporte à realidade aumentada. Ou seja, não é possível renderizar a imagem de origem do componente sobre o feed da câmera de um dispositivo.

Para isso, adicionamos suporte ao Magic Leap e ao Quick Look no iOS. Agora, estamos anunciando o suporte para RA no Android com a adição do atributo ar. Esse atributo é criado em um novo recurso do ARCore chamado Scene Viewer, um app externo para visualização de modelos 3D. Para saber mais sobre o Scene Viewer, consulte Como visualizar modelos 3D em RA em um navegador Android.

Sonda em Marte

Vamos aprender a usar a realidade aumentada com o <model-viewer>.

O atributo

Um componente da Web, como você deve se lembrar, não requer conhecimento especial para usar. Ele se comporta como um elemento HTML padrão, com uma tag exclusiva, bem como propriedades e métodos. Depois de instalá-lo com uma tag <script>, use-o como qualquer outro elemento HTML.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

Isso é muito parecido com o que eu tinha no meu artigo anterior. Observe o que eu destaquei no final do slide. Esse é o novo atributo.

Como instalar a nova versão

Se você já usa <model-viewer>, provavelmente está importando o componente usando as tags <script> exatamente como mostrado na documentação. Estamos sempre fazendo melhorias. Se você quiser testar novos recursos antes de fazer upgrade e implantar deliberadamente, instale uma versão específica de <model-viewer>. Para fazer isso, adicione o número da versão aos URLs do arquivo, conforme mostrado abaixo. Em seguida, acesse a página de versões para conferir as atualizações.

<script type="module"
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

Conclusão

Teste a nova versão de <model-viewer> e nos conte o que achou. É possível receber problemas e feedback no GitHub (em inglês).