Ao nos prepararmos para o Google I/O, queríamos destacar as possibilidades incríveis da realidade aumentada (RA) na Web. O Chacmool é uma demonstração de experiência educacional na Web que criamos para mostrar como a RA baseada na Web pode ajudar os usuários a interagir com experiências de RA. A Web torna a RA conveniente e acessível em qualquer lugar.
Agora, ativamos essa demonstração no
Chrome Canary
em
dispositivos Android compatíveis com o ARCore com o Android O ou versões mais recentes. Também será necessário
instalar o ARCore.
Esse trabalho depende de uma nova proposta do WebXR (a
API WebXR Hit Test),
então está sob uma flag e tem como objetivo permanecer no Canary enquanto testamos e refinamos a
nova proposta de API com outros membros do grupo da comunidade da Web imersiva. Na
verdade, para acessar a demonstração, você precisa ativar duas flags em chrome://flags:
#webxr e #webxr-hit-test. Depois de ativar esses dois recursos e reiniciar o
Canary, confira a demonstração do Chacmool.
A experiência de RA do Chacmool é centrada na educação, aproveitando a natureza imersiva e interativa da RA para ajudar os usuários a aprender sobre esculturas antigas do Chacmool. Os usuários podem colocar uma estátua em tamanho natural na realidade e se movimentar para ver a escultura de vários ângulos e distâncias. A natureza imersiva da RA permite que os usuários explorem, descubram e interajam com o conteúdo livremente, assim como no mundo real. Ao visualizar um objeto em RA, em vez de em uma tela 2D plana, podemos ter uma compreensão profunda do que estamos vendo porque podemos vê-lo de muitos ângulos e distâncias diferentes usando um modelo de interação muito intuitivo: caminhar ao redor do objeto e se aproximar ou se afastar fisicamente. Além disso, nessa experiência, há anotações colocadas diretamente na escultura. Isso permite que os usuários conectem diretamente o que é descrito no texto e onde esses recursos estão na escultura.
Essa demonstração foi criada ao longo de um mês, usando alguns dos componentes da primeira demonstração de RA baseada na Web da equipe do WebXR, WebAR-Article. As informações sobre a escultura foram extraídas da página Google Arts & Culture e o modelo 3D foi fornecido pelo parceiro do Google Arts & Culture, CyArk. Para preparar o modelo 3D para a Web, uma combinação de Meshlab e Mesh Mixer foi usada para reparar o modelo e decimar a malha para diminuir o tamanho do arquivo. Em seguida, o Draco, uma biblioteca para compactar e descompactar malhas geométricas 3D e nuvens de pontos foi usado para reduzir o tamanho do arquivo do modelo de 44,3 megabytes para apenas 225 quilobytes. Por fim, um worker da Web é usado para carregar o modelo em uma linha de execução em segundo plano para que a página permaneça interativa enquanto o modelo é carregado e descompactado, uma operação que normalmente causaria instabilidade e impediria que a página fosse rolada.
Não podemos enfatizar o suficiente que, como estávamos desenvolvendo no computador e implantando em um smartphone, o uso de ferramentas de depuração remota do Chrome para ajudar a inspecionar a experiência cria um ciclo de iteração rápido entre as mudanças de código, e há ferramentas incríveis para desenvolvedores no Chrome para depurar e verificar a performance.
Práticas recomendadas para experiências de RA/RV
A maioria das diretrizes de design e engenharia para experiências de RA nativas se aplica a experiências de RA baseadas na Web. Se você quiser saber mais sobre práticas recomendadas gerais, confira as diretrizes de design de RA que lançamos recentemente.
Em particular, ao projetar experiências de RA baseadas na Web, é melhor usar a tela inteira (ou seja, ir para tela cheia de maneira semelhante à maneira como os players de vídeo vão para tela cheia em dispositivos móveis) ao usar RA. Isso impede que os usuários rolem a visualização ou se distraiam com outros elementos na página da Web. A transição para a RA precisa ser suave e perfeita, mostrando a visualização da câmera antes de entrar na integração da RA (por exemplo, desenhando uma retícula). É importante observar que, ao contrário da realidade aumentada nativa, os desenvolvedores não têm acesso ao frame da câmera, à estimativa de iluminação, âncoras ou planos (ainda). Portanto, é importante que designers e desenvolvedores considerem essas limitações ao projetar uma experiência de RA baseada na Web.
Além disso, devido à variedade de dispositivos usados para experiências da Web, é importante otimizar a performance para criar a melhor experiência do usuário. Portanto, mantenha a contagem de polígonos baixa, tente usar o menor número possível de luzes, pré-calcule sombras, se possível, e minimize as chamadas de exibição. Ao mostrar texto em RA, use técnicas modernas de renderização de texto (por exemplo, baseadas em campo de distância assinado) para garantir que o texto seja claro e legível em todas as distâncias e ângulos. Ao colocar anotações, pense no olhar do usuário como outra entrada e mostre apenas as anotações quando elas forem relevantes (ou seja, anotações baseadas na proximidade que aparecem quando um usuário está focado em uma área de interesse).
Por fim, como esse conteúdo é baseado na Web, é importante aplicar as práticas de design gerais para a Web. Verifique se o site oferece uma boa experiência em vários dispositivos (computador, tablet, smartphone, fone de ouvido etc.). O suporte ao aprimoramento progressivo significa também projetar para dispositivos que não são compatíveis com RA (ou seja, mostrar um visualizador de modelos 3D em dispositivos que não são de RA).
Se você tem interesse em desenvolver suas próprias experiências de RA baseadas na Web, temos um post complementar que oferece mais detalhes sobre como começar a criar RA na Web. Você também pode conferir a fonte da demonstração do Chacmool. A API WebXR Device está em desenvolvimento ativo, e adoraríamos receber feedback para garantir que ela ative todos os tipos de aplicativos e casos de uso. Acesse o GitHub e participe da conversa.