Desenvolver para a Web no Android XR

Dispositivos XR aplicáveis

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos de XR.

Saiba mais sobre os tipos de dispositivos XR →

Saiba mais sobre os tipos de dispositivos XR →

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

O Chrome para Android XR é compatível com os seguintes recursos do WebXR:

• API Device
• Módulo de RA
• Módulo de gamepads
• Módulo de teste de hit
• Entrada manual
• Fixos
• Sensor de profundidade
• Estimativa de iluminação

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

Pré-requisito: escolher um framework WebXR

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

• Para ter controle total sobre cenas 3D e criar interações personalizadas ou complexas, recomendamos three.js e babylon.js.
• Para prototipagem rápida ou uso de sintaxe semelhante a HTML para definir cenas 3D, recomendamos o A-Frame e o model-viewer.
• Você também pode consultar mais estruturas e exemplos de código.

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

Adaptar para Android XR

Se você tiver experiências WebXR em execução em outros dispositivos, talvez seja necessário atualizar seu código para oferecer suporte adequado ao WebXR no Android XR. Por exemplo, as experiências do WebXR focadas em dispositivos móveis precisam se adaptar de uma tela para duas telas estéreo no Android XR. As experiências WebXR voltadas para dispositivos móveis ou headsets atuais talvez precisem adaptar o código de entrada para priorizar o uso das mãos.

Ao trabalhar com WebXR no Android XR, talvez seja necessário atualizar seu código para compensar o fato de haver 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 precisa ser precisa para que ele pareça estar ali. 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 é compatível com o 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 do mundo real. Essas informações de profundidade permitem criar interações mais imersivas e realistas, ajudando os usuários a tomar decisões fundamentadas.

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

Pontos principais sobre o código

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

Adicionar interação manual no WebXR

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

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

Dispositivos como smartphones ou dispositivos XR centrados no controlador ainda não podem ser compatíveis com entrada de mão. Talvez seja necessário atualizar o código WebXR para oferecer suporte adequado à entrada com as mãos. A Sessão de RV imersiva com mãos demonstra como integrar o rastreamento de mãos ao seu projeto WebXR.

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

Permissões no WebXR

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

A preferência de permissões escolhida pelo usuário é mantida para cada domínio. Acessar 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 uma delas por vez.

Assim como acontece com todas as permissões na Web, você precisa processar corretamente as situações em que a permissão é negada.