Desenvolver para a Web no Android XR

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre tipos de dispositivos XR →
Headsets XR
Óculos XR com fio
Saiba mais sobre tipos de dispositivos XR →

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

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

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

Pré-requisito: escolha um framework WebXR

Antes de começar a desenvolver, é importante escolher o framework WebXR certo. Isso melhora significativamente sua produtividade e a qualidade das experiências criadas.

Se preferir usar JavaScript e WebGL nativos, consulte o WebXR no GitHub para criar seu primeiro experimento WebXR.

Adaptar para o Android XR

Se você tiver experiências WebXR em execução 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 focadas em dispositivos móveis precisam ser adaptadas de uma tela para duas telas estéreo no Android XR. As experiências WebXR direcionadas a dispositivos móveis ou headsets atuais podem precisar adaptar o código de entrada para ser manual.

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

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 que ele realmente pertence a esse lugar. 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 Google 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 os contornos do ambiente real. Essas informações de profundidade 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 WebXR para oferecer suporte adequado a frames de profundidade estéreo.

O exemplo a seguir renderiza informações de profundidade estereoscopicamente:

// 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!');  }
}

Principais pontos 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 "for" correspondente é executado duas vezes.

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

Adicionar interação manual no WebXR

A adição de interação manual ao app WebXR melhora 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 entrada padrão. Essa API permite que os usuários interajam com objetos virtuais naturalmente, usando gestos e movimentos manuais para agarrar, empurrar ou manipular elementos na cena.

Dispositivos como smartphones ou dispositivos XR centrados no controlador ainda não oferecem suporte à entrada manual. Talvez seja necessário atualizar o código WebXR para oferecer suporte adequado à entrada manual. A sessão de RV imersiva com mãos demonstra como integrar a captura de movimentos das mãos ao seu projeto 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 uso de pinça manual para limpar telas e ver a realidade física.

Permissões no WebXR

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

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

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