Desenvolver com o WebXR

O Chrome no Android XR oferece suporte ao WebXR. O WebXR é um padrão aberto da W3C que traz APIs XR de alto desempenho para navegadores compatíveis. Se você estiver criando para a Web, poderá melhorar sites existentes com modelos 3D ou criar novas experiências imersivas.

Os seguintes recursos do WebXR são compatíveis com o Chrome para Android XR:

Para conferir o WebXR em ação, inicie o Chrome em um dispositivo Android XR ou o Android XR Emulator e navegue pelos exemplos oficiais do WebXR.

Pré-requisito: escolha um framework do WebXR

Antes de começar a desenvolver, é importante escolher a estrutura WebXR certa. Isso melhora significativamente a produtividade e a qualidade das experiências que você cria.

Se você preferir usar JavaScript nativo e WebGL, consulte WebXR no GitHub para criar sua primeira experiência com WebXR.

Adaptar para o Android XR

Se você já tem experiências do WebXR em outros dispositivos, talvez seja necessário atualizar o código para oferecer suporte adequado ao WebXR no Android XR. Por exemplo, as experiências WebXR com foco em dispositivos móveis vão precisar se adaptar de uma tela para duas telas estéreo no Android XR. As experiências do WebXR destinadas a dispositivos móveis ou headsets atuais podem precisar adaptar o código de entrada para priorizar as mãos.

Ao trabalhar com o WebXR no Android XR, talvez seja necessário atualizar o código para compensar o fato de que há duas telas, uma para cada olho.

Sobre como garantir uma sensação de profundidade no WebXR

Quando um usuário coloca um objeto virtual no espaço físico, a escala dele precisa ser precisa para que pareça realmente pertencer ao espaço. Por exemplo, em um app de compras de móveis, os usuários precisam confiar que uma poltrona virtual vai caber perfeitamente na sala de estar.

O Chrome para Android XR oferece suporte ao módulo de detecção de profundidade no WebXR, que melhora a capacidade de um dispositivo de perceber as dimensões e contornos do ambiente do mundo real. Essas informações detalhadas permitem criar interações mais imersivas e realistas, ajudando os usuários a tomar decisões informadas.

Ao contrário da detecção de profundidade em smartphones, a detecção de profundidade no Android XR é estereoscópica, transmitindo dois mapas de profundidade em tempo real para visão binocular. Talvez seja necessário atualizar o código do WebXR para oferecer suporte adequado a frames de profundidade estéreo.

O exemplo a seguir renderiza informações de profundidade de forma estereoscópica:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Pontos principais sobre o código

  • Uma pose válida precisa ser retornada para acessar dados de profundidade.
  • pose.views retorna uma visualização para cada olho, e o loop correspondente é executado duas vezes.

Visualização de profundidade em tempo real usando a API WebXR Depth Sensing. O vermelho indica pixels mais próximos, e o azul indica pixels mais distantes.

Adicionar interação com a mão no WebXR

Adicionar a interação manual ao app WebXR aumenta o engajamento do usuário, permitindo experiências mais intuitivas e imersivas.

A entrada manual é o principal mecanismo de interação no Android XR. O Chrome para Android XR oferece suporte à API Hand Input como a entrada padrão. Essa API permite que os usuários interajam com objetos virtuais de maneira natural, usando gestos e movimentos das mãos para pegar, empurrar ou manipular elementos na cena.

Dispositivos como smartphones ou dispositivos XR com foco em controle podem ainda não oferecer suporte à entrada manual. Talvez seja necessário atualizar seu código do WebXR para oferecer suporte adequado à entrada manual. A Sessão de RV imersiva com mãos demonstra como integrar o rastreamento de mãos ao seu projeto do WebXR.

A animação a seguir mostra um exemplo de combinação de pinça com a API WebXR para mostrar um usuário "limpando" a superfície de um espaço virtual para revelar uma janela de passagem para o mundo real.

Demonstração do WebXR de como usar o gesto de pinça para limpar as telas e ver a realidade física.

Permissões no WebXR

Quando você usa APIs WebXR que exigem permissão, o Chrome solicita que o usuário conceda a permissão ao site. Todas as APIs do WebXR exigem a permissão de mapeamento 3D e de rastreamento da câmera. O acesso aos dados de rosto, olhos e mãos rastreados também é protegido por permissões. Se todas as permissões necessárias forem concedidas, a chamada de navigator.xr.requestSession('immersive-ar', options) retornará uma sessão válida do WebXR.

A preferência de permissões escolhida pelo usuário persiste para cada domínio. O acesso a uma experiência do WebXR em um domínio diferente faz com que o Chrome solicite permissões novamente. Se a experiência do WebXR exigir várias permissões, o Chrome vai solicitar cada uma delas separadamente.

Assim como todas as permissões na Web, é necessário processar corretamente as situações em que a permissão é negada.