Ao nos preparar para o Google I/O, queríamos destacar as possibilidades empolgantes da realidade aumentada (RA) na Web. O Chacmool é uma demonstração educativa de experiência na Web que criamos para mostrar como a RA baseada na Web pode ajudar os usuários a interagir com experiências. A Web torna a RA conveniente e acessível em qualquer lugar.
Já ativamos essa demonstração no
Chrome Canary
em
dispositivos Android compatíveis com ARCore com o Android O ou mais recente. Você também precisará
instalar o ARCore.
Esse trabalho depende de uma nova proposta do WebXR (a
API WebXR Hit Test).
Portanto, ela está sob sinalização e deve permanecer na versão Canary enquanto testamos e refinamos a
nova proposta de API com outros membros do Immersive Web Community Group. Na
verdade, para acessar a demonstração, é necessário ativar duas sinalizações 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 Chacmool AR é centrada na educação, aproveitando a natureza imersiva e interativa da RA para ajudar os usuários a aprender sobre esculturas antigas de Chacmool. Os usuários podem colocar uma estátua em tamanho real na realidade deles e se mover para vê-la de vários ângulos e distâncias diferentes. A natureza imersiva da RA permite que os usuários explorem, descubram e brinquem com conteúdo livremente, assim como fazem 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: andando ao redor do objeto e se aproximando fisicamente ou mais perto. Além disso, nessa experiência, há anotações colocadas diretamente na escultura. Isso permite que os usuários conectem diretamente o que está descrito no texto e onde esses recursos estão na escultura.
Essa demonstração foi criada ao longo de aproximadamente um mês, aproveitando alguns 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 pela parceira do Google Arts & Culture, CyArk. Para preparar o modelo 3D para a Web, uma combinação de Meshlab e Mesh foi usada para reparar o modelo e afirmar a malha dele 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 usada para reduzir o tamanho do arquivo do modelo de 44,3 megabytes para apenas 225 kilobytes. Por fim, um web worker é 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 causa instabilidade e impede que a página seja rolada.
Como estávamos desenvolvendo no computador e implantando em um smartphone, o uso das ferramentas de depuração remota do Chrome para ajudar a inspecionar a experiência cria um grande ciclo de iteração rápido entre mudanças de código, e há ferramentas para desenvolvedores incríveis no Chrome para depurar e verificar o desempenho.
Práticas recomendadas para experiências de RA/RV
A maioria das diretrizes de design e engenharia para projetar para experiências de RA nativas se aplica à criação de experiências de RA baseadas na Web. Se você quiser saber mais sobre as práticas recomendadas gerais, confira as diretrizes de design de RA que lançamos recentemente.
Particularmente, ao projetar experiências de RA baseadas na Web, é melhor usar a tela inteira (ou seja, entrar em tela cheia da mesma forma que os players de vídeo em tela cheia em dispositivos móveis) com RA. Isso evita que os usuários rolem a visualização ou se distraiam com outros elementos da página. A transição para a RA precisa ser suave e contínua, mostrando a visualização da câmera antes da integração da RA (por exemplo, desenhando um retículo). O que é importante observar sobre a RA baseada na Web é que, ao contrário da versão nativa, os desenvolvedores não têm acesso ao quadro da câmera, à estimativa de iluminação, Âncoras ou planos (ainda). Por isso, é importante que designers e desenvolvedores tenham em mente essas limitações ao projetar uma experiência de RA baseada na Web.
Além disso, devido à variedade de dispositivos usados para experiências na Web, é importante que a performance seja otimizada para criar a melhor experiência do usuário. Portanto, mantenha as contagens de polígonos baixas, tente usar o mínimo de luzes possível, pré-calcule as sombras, se possível, e minimize as chamadas de desenho. Ao exibir texto em RA, use técnicas de renderização de texto modernas (baseadas em campos de distância assinados) para garantir que o texto esteja claro e legível de todas as distâncias e ângulos. Ao colocar anotações, pense no olhar do usuário como outra entrada e só mostre as anotações quando elas forem relevantes, ou seja, anotações com base 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 também aplicar práticas gerais recomendadas de design para a Web. Confira se o site oferece uma boa experiência em todos os 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ê estiver interessado em desenvolver suas próprias experiências de RA baseadas na Web, temos uma postagem complementar aqui que apresenta mais detalhes sobre como começar a criar RA na Web por conta própria. Você também pode conferir o código na demonstração do Chacmool. A API WebXR Device está em desenvolvimento. Queremos seu feedback para garantir que ela permita todos os tipos de aplicativos e casos de uso. Por isso, acesse o GitHub e participe da conversa.