No Chrome 67, anunciamos a API WebXR Device para realidade aumentada (RA) e realidade virtual (RV), mas apenas os recursos de RV foram ativados. A RV é uma experiência baseada apenas no que está em um dispositivo de computação. A RA, por outro lado, permite renderizar objetos virtuais no mundo real. Para permitir o posicionamento e o rastreamento desses objetos, adicionamos 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 foi criada para ficar no Canary por um futuro próximo. Queremos 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 precisa de:
- Ter um smartphone compatível com o Android O ou mais recente.
- Para instalar o ARCore.
- Duas flags do Chrome (chrome://flags): a API WebXRDevice (#webxr) e o teste de hit do WebXR (#webxr-hit-test)
Com isso, você pode conferir as demonstrações ou testar nosso codelab.
É só 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 gostaria de ter colocado em meu artigo imersivo da Web: "É apenas a Web".
"Qual extensão do Chrome preciso instalar?" "Não há extensão. É só a Web."
"Preciso de um navegador especial?" "É só a Web."
"Qual app preciso instalar?" "Não há um app especial. É apenas a Web."
Isso pode ser óbvio para você, já que você está lendo isso em um site dedicado à Web. Se você criar demonstrações com essa nova API, prepare-se para essa pergunta. Você receberá muitas informações.
Falando em IO, se você quiser saber mais sobre a Web imersiva em geral, onde ela está, para onde ela está indo, confira este vídeo.
Para que ele é útil?
A realidade aumentada será um recurso valioso para muitas páginas da Web. Por exemplo, ele pode ajudar as pessoas a aprender em sites educacionais e permitir que compradores em potencial visualizem objetos na 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 posicionada, 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 mova para perto ou para mais longe dele. Isso dá aos espectadores uma compreensão mais profunda do objeto do que é possível com uma imagem bidimensional.
Se você não tem certeza do que quero dizer com tudo isso, vai ficar claro quando você usar as demonstrações. Se você não tiver um dispositivo que possa executar a demonstração, confira o link do vídeo na parte de cima 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. O vídeo mostra uma demonstração educacional que criamos chamada Chacmool. Um artigo complementar descreve essa demonstração em detalhes. O importante para esta discussão é que, quando você coloca a estátua de Chacmool na realidade aumentada, você vê o tamanho dela como se ela estivesse realmente no ambiente com você.
O exemplo de Chacmool é educacional, mas poderia ser comercial. Imagine um site de compras de móveis que permite colocar um sofá na sua sala de estar. O aplicativo de RA informa se o sofá cabe no seu espaço e como ele fica ao lado dos outros móveis.
Raios, testes de acerto e retículas
Um problema importante a ser resolvido ao implementar a RA é como colocar objetos em uma visualização do mundo real. O método para fazer isso é chamado de ray casting. Cast de raio significa calcular a interseção entre o raio apontador e uma superfície no mundo real. Esse cruzamento é chamado 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 flags corretas estão ativadas. Agora carregue a amostra e clique em "Iniciar RA".
Observe algumas coisas. Primeiro, o medidor de velocidade, que você pode reconhecer das outras amostras imersivas, mostra 30 frames por segundo em vez de 60. Essa é a taxa em que a página da Web recebe imagens da câmera.
A demonstração do teste de hit de RA
A outra coisa que você precisa notar é a imagem de girassol. Ela se move conforme você se move e se encaixa em superfícies como o chão e o tampo de uma mesa. Se você tocar na tela, um girassol será colocado em uma superfície, e um novo girassol se moverá com seu dispositivo.
A imagem que se move com o dispositivo e que tenta se prender a superfícies é chamada de retículo. Uma retícula é uma imagem temporária que ajuda a posicionar um objeto na realidade aumentada. Nesta demonstração, o retículo é uma cópia da imagem a ser colocada. Mas não precisa ser. Na demonstração do Chacmool, por exemplo, é uma caixa retangular com aproximadamente a mesma forma da base do objeto que está sendo colocado.
O código
A demonstração do Chacmool mostra como a RA pode ser usada em um app de produção. Felizmente, há uma demonstração muito mais simples no repositório de amostras do WebXR. Meu código de exemplo vem da demonstração AR Hit Test neste repositório. Para ajudar você a entender o que está acontecendo, gosto de simplificar exemplos de código.
Os conceitos básicos de entrada em uma sessão de RA e execução de um loop de renderização são os mesmos para
RA e RV. Você pode ler meu artigo anterior, caso não esteja familiarizado. Para ser mais específico, entrar e executar uma sessão de RA
é quase 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 que um item seja colocado. Isso é feito com um teste de
sucesso. Para fazer um teste de hit, chame XRSession.requestHitTest(). Esta é a aparência dela:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
Os três argumentos desse método representam um feixe de raios. O feixe de raios é definido
por dois pontos no raio (origin e direction) e de onde esses pontos são
calculados (frameOfReference). A origem e a direção são vetores
3D. Independente do valor enviado, ele será normalizado
(convertido) para um comprimento de 1.
Como mover o retículo
À medida que você move o dispositivo, a retícula precisa se mover com ele para tentar encontrar um local onde 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 definir a sessão e a pose, determine onde o feixe está sendo transmitido. O
exemplo de código usa
a
biblioteca matemática gl-matrix.
Mas o gl-matrix não é um requisito. O importante é saber o que você está
calculando com ele e que isso se baseia na posição do dispositivo. Extraia
a posição do dispositivo de XRPose.poseModalMatrix. Com o raio lançado, 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 na amostra de teste de acerto, você ainda precisa refazer as visualizações para desenhar a cena. O desenho é feito usando APIs WebGL. Você pode fazer isso se for realmente ambicioso. No entanto, recomendamos o uso de uma estrutura. Os exemplos da Web imersivos usam um criado apenas para as demonstrações chamada Cottontail, e o Three.js é compatível com WebXR desde maio.
Como posicionar um objeto
Um objeto é colocado em RA quando o usuário toca na tela. Para isso, use o
evento select. O importante nessa etapa é saber onde colocá-lo.
Como a mira móvel fornece uma fonte constante de testes de acerto, a maneira mais simples
de colocar um objeto é desenhá-lo no local da mira no último
teste de acerto. Se for necessário, 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 entender isso é seguir o exemplo de código ou testar o codelab. Espero ter fornecido informações suficientes para que você entenda os dois.
Ainda não terminamos de criar APIs da Web imersivas, nem de longe. Vamos publicar novos artigos aqui à medida que avançarmos.