Realidade aumentada para a Web

Joe medley
Joe Medley

No Chrome 67, anunciamos a API WebXR Device para realidade aumentada (RA) e realidade virtual (RV), mas apenas os recursos de RV estavam ativados. A RV é uma experiência baseada apenas no que há em um dispositivo de computação. Por outro lado, a RA permite renderizar objetos virtuais no mundo real. Para permitir a inserção e o rastreamento desses objetos, acabamos de adicionar a API WebXR Hit Test ao Chrome Canary, um novo método que ajuda o código da Web imersivo a posicionar objetos no mundo real.

Onde posso conseguir isso?

Essa API deve continuar no Canary por um tempo. Recomendamos um período de teste prolongado, porque essa é uma proposta de API muito nova e queremos garantir que ela seja robusta e adequada para os desenvolvedores.

Além do Chrome Canary, você também vai precisar de:

  • Um smartphone compatível com Android O ou versão mais recente.
  • Para instalar o ARCore.
  • Duas sinalizações do Chrome (chrome://flags): API WebXRDevice (#webxr) e teste de hit do WebXR (#webxr-hit-test)

Com elas, você pode acessar as demonstrações ou testar nosso codelab.

É apenas a Web

No Google I/O deste ano, demonstramos a realidade aumentada com uma versão inicial do Chrome. Eu disse algo repetidamente a desenvolvedores e não desenvolvedores durante esses três dias que eu gostaria de ter postado no meu artigo imersivo sobre a Web: "É só a Web".

"Qual extensão do Chrome eu preciso instalar?" "Não há uma prorrogação. É apenas a Web."

"Eu preciso de um navegador especial?" "É só a Web."

"Qual app preciso instalar?" "Não há um app especial. É apenas a Web."

Isso pode ficar óbvio para você, já que está lendo isso em um site dedicado à Web. Se você criar demonstrações com essa nova API, prepare-se para essa pergunta. Você vai aprender bastante.

Falando em I/O, se você quiser saber mais sobre a Web imersiva em geral, onde ela está e onde vai, confira este vídeo.

Para que ela é útil?

A realidade aumentada será um complemento valioso para muitas páginas da Web existentes. Por exemplo, ele pode ajudar as pessoas a aprender em sites educacionais e permitir que compradores em potencial visualizem objetos em sua casa enquanto fazem compras.

Nossas demonstrações ilustram isso. Eles permitem que os usuários coloquem uma representação em tamanho real de um objeto como se fosse real. Depois de colocada, a imagem permanece na superfície selecionada, aparece do tamanho que teria se o item real estivesse nessa superfície e permite que o usuário se movimente para mais perto ou mais longe dela. Isso oferece aos espectadores uma compreensão mais profunda do objeto do que é possível com uma imagem bidimensional.

Se você não tiver certeza do que quero dizer com tudo isso, ficará claro quando você usar as demonstrações. Se você não tiver um dispositivo que execute a demonstração, confira o link de vídeo na parte superior deste artigo.

Uma coisa que a demonstração e o vídeo não mostram é como a RA pode transmitir o tamanho de um objeto real. Este vídeo mostra uma demonstração educacional que criamos chamada Chacmool. Um artigo complementar descreve essa demonstração em detalhes. O importante para essa discussão é que, quando você coloca a estátua de Chacmool em realidade aumentada, vê seu tamanho como se ela estivesse na sala com você.

O exemplo de Chacmool é educativo, mas poderia ser facilmente comercial. Imagine um site de compras de móveis que permite colocar um sofá na sua sala de estar. O app de RA informa se o sofá combina com seu espaço e como ele ficará ao lado dos outros móveis.

Lançamentos de raios, testes de acerto e retículos

Um problema fundamental a ser resolvido ao implementar a realidade aumentada é como colocar objetos em uma visão do mundo real. O método para fazer isso é chamado de transmissão de raio. Elevação de raio significa calcular a interseção entre o raio apontador e uma superfície no mundo real. Essa interseção é chamada de hit, e determinar se um hit ocorreu é um teste de hit.

Este é um bom momento para testar o novo exemplo de código no Chrome Canary. Antes de fazer qualquer coisa, verifique se as sinalizações corretas estão ativadas. Agora, carregue o exemplo e clique em "Start AR".

Observe algumas coisas. Primeiro, o medidor de velocidade, que você pode reconhecer em outros exemplos imersivos, mostra 30 quadros por segundo em vez de 60. Essa é a taxa em que a página da Web recebe imagens da câmera.

A RA funciona a 30 quadros por segundo

Demonstração do teste de hit de RA

Outra coisa que você precisa notar é a imagem do girassol. Ele se move conforme você se move e se encaixa em superfícies como pisos e mesas. Se você tocar na tela, um girassol será colocado em uma superfície e um novo girassol se moverá com o dispositivo.

A imagem que se move com o dispositivo e tenta ser bloqueada em superfícies é chamada de retículo. Um retículo é uma imagem temporária que ajuda a colocar um objeto em realidade aumentada. Nesta demonstração, o retículo é uma cópia da imagem a ser colocada. Mas não precisa ser assim. Na demonstração do Chacmool, por exemplo, é uma caixa retangular com mais ou menos a mesma forma da base do objeto que está sendo colocado.

Até o código

A demonstração do Chacmool mostra a aparência da RA em um app de produção. Felizmente, há uma demonstração muito mais simples no repositório de exemplos do WebXR (link em inglês). Meu código de amostra vem da demonstração de teste de hit de RA nesse repositório. Gosto de simplificar exemplos de código para ajudar você a entender o que está acontecendo.

Os conceitos básicos sobre a entrada em uma sessão de RA e a execução de um loop de renderização são os mesmos para RA e RV. Caso não saiba, leia meu artigo anterior. Para ser mais específico, entrar e executar uma sessão de RA é quase exatamente igual a entrar em uma sessão de janela mágica de RV. Como acontece com uma janela mágica, o tipo de sessão não pode ser imersivo, e o frame do tipo de referência precisa ser 'eye-level'.

A nova API

Agora vou mostrar como usar a nova API. Lembre-se de que, na RA, o retículo tenta encontrar uma superfície antes de um item ser colocado. Isso é feito com um teste de hit. Para fazer um teste de hit, chame XRSession.requestHitTest(). Ela é assim:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Os três argumentos para esse método representam um desvio de raio. O desvio é definido por dois pontos no raio (origin e direction) e onde esses pontos são calculados (frameOfReference). A origem e a direção são vetores 3D. Independentemente do valor enviado, ele será normalizado (convertido) para um comprimento de 1.

Como mover o retículo

Quando você move o dispositivo, o retículo precisa se mover com ele para tentar encontrar um local em que um objeto possa ser colocado. Isso significa que o retículo precisa ser redesenhado em cada frame.

Comece com o callback requestAnimationFrame(). Assim como na RV, você precisa de uma sessão e uma pose.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Depois de fazer a sessão e a pose, determine onde o raio está sendo lançado. O exemplo de código usa a biblioteca matemática gl-matrix (link em inglês). Mas a matriz gl não é um requisito. O importante é saber o que você está calculando com eles e que eles sejam baseados na posição do dispositivo. Recupere a posição do dispositivo da XRPose.poseModalMatrix. Com o raio de alcance em mãos, chame requestHitTest().

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Embora não seja tão óbvio no exemplo de teste de hit, você ainda precisa passar pelas visualizações para desenhar a cena. O desenho é feito usando APIs WebGL. Você pode fazer isso se tiver muito ambição. No entanto, recomendamos o uso de um framework. Os exemplos imersivos da Web usam um criado apenas para as demonstrações, chamado Cottontail, e o Three.js oferece suporte ao WebXR desde maio.

Como colocar um objeto

Um objeto é colocado na RA quando o usuário toca na tela. Para isso, use o evento select. Nesta etapa, o importante é saber onde colocá-los. Como o retículo em movimento oferece uma fonte constante de testes de hit, a maneira mais simples de colocar um objeto é desenhá-lo no local do retículo no último teste de hit. Se precisar, digamos que você tenha um motivo legítimo para não mostrar um retículo, chame requestHitTest() no evento de seleção, conforme mostrado no exemplo.

Conclusão

A melhor maneira de resolver isso é analisando o exemplo de código ou testando o codelab. Espero ter ajudado você a entender as duas coisas.

Não acabamos de criar APIs da Web imersivas, e nem tanto. Publicaremos novos artigos aqui à medida que avançarmos.