O Oculus Quest 2 é um headset de realidade virtual (RV) criado pela Oculus, uma divisão da Meta. Agora os desenvolvedores podem criar e distribuir apps Web progressivos (PWA) 2D e 3D que aproveitam o recurso de multitarefas do Oculus Quest 2.
Oculus Quest 2
O Oculus Quest 2 é um headset de realidade virtual (RV) criado pela Oculus, uma divisão da Meta. Ele é o sucessor do headset anterior da empresa, o Oculus Quest. O dispositivo pode ser executado como um headset independente com um sistema operacional interno baseado no Android e com um software de RV compatível com o Oculus em execução em um computador desktop quando conectado por USB ou Wi-Fi. Ela usa o sistema Qualcomm Snap Dragon XR2 em um chip com 6 GB de RAM. A tela da Quest 2 é um painel LCD de switch rápido único com resolução de 1.832 × 1.920 pixels por olho, executado a uma taxa de atualização de até 120 Hz.
Navegador Oculus
No momento, há três navegadores disponíveis para o Oculus Quest 2: Wolvic, um sucessor do Firefox Reality e o Oculus Browser integrado. Este artigo se concentra no último. O site do Oculus apresenta o Oculus Browser da seguinte maneira.
"O navegador Oculus oferece suporte aos padrões mais recentes da Web e outras tecnologias para ajudar você a criar experiências de RV na Web. Os sites 2D atuais funcionam muito bem no Oculus Browser porque ele é alimentado pelo mecanismo de renderização do Chromium. Ele foi otimizado para fones de ouvido Oculus para ter o melhor desempenho e permitir que os desenvolvedores da Web aproveitem todo o potencial da RV com novas APIs, como a WebXR. Com o WebXR, estamos abrindo as portas para a próxima fronteira da Web."
User agent
A string do user agent do navegador no momento da escrita é a seguinte.
Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36
Como você pode ver, a versão atual 18.1.0.2.46.337441587 do navegador Oculus é baseada no Chrome
95.0.4638.74, que é apenas uma versão atrás da versão estável atual do Chrome, que é
96.0.4664.110. Se o usuário mudar para o modo para dispositivos móveis, VR vai mudar para Mobile VR.
Interface do usuário
A interface do usuário do navegador (mostrada acima) tem os seguintes recursos (linha de cima, da esquerda para a direita):
- Botão "Voltar"
- Botão "Atualizar"
- Informações do site
- Barra de URL
- Botão "Criar favorito"
- Botão de redimensionamento com opções estreita, média e larga, além de um recurso de zoom
- Botão "Pedir site móvel"
- Botão de menu com as seguintes opções:
- Entrar no modo privado
- Fechar todas as guias
- Configurações
- Favoritos
- Downloads
- Histórico
- Limpar dados de navegação
A linha de baixo inclui os seguintes recursos:
- Botão "Fechar"
- Botão "Minimizar"
- Botão de três pontos com opções de voltar, avançar e recarregar
Taxa de atualização e proporção de pixels do dispositivo
No Oculus Quest 2, o Oculus Browser renderiza o conteúdo da página da Web 2D e o WebXR com uma taxa de atualização de 90 Hz. Ao assistir mídia em tela cheia, o Oculus Browser otimiza a taxa de atualização do dispositivo com base na taxa de frames do vídeo, por exemplo, 24 qps. O Oculus Quest 2 tem uma proporção de pixels do dispositivo de 1,5 para texto nítido.
PWAs no navegador Oculus e na Oculus Store
Em 28 de outubro de 2021, Jacob Rossi, líder de gerenciamento de produtos da Meta (Oculus), comunicou que PWAs estavam chegando ao Oculus Quest e ao Oculus Quest 2. A seguir, descrevi a experiência de PWA no Oculus e expliquei como criar, fazer sideload e testar seu PWA no Oculus Quest 2.
Compartilhamento de estado
O estado de login é compartilhado entre o navegador Oculus e os PWAs, permitindo que os usuários alternem entre os dois sem problemas. Naturalmente, o Login do Facebook tem suporte integrado. O navegador Oculus inclui um gerenciador de senhas que permite que os usuários armazenem e compartilhem as senhas com segurança entre as experiências do navegador e do app instalado.
Tamanhos de janela do PWA
As janelas do navegador e das PWAs instaladas podem ser redimensionadas livremente pelo usuário. A altura pode variar entre 625 px e 1.200 px. A largura pode ser definida entre 400 px e 2.000 px. As dimensões padrão são 1.000 × 625 px.
Como interagir com PWAs
Os PWAs podem ser controlados com os controles esquerdo e direito do Oculus, mouses e teclados Bluetooth e pelo rastreamento de mãos. O rolagem funciona com os botões de polegar nos controles do Oculus ou apertando o polegar e o indicador e movendo na direção desejada. Para selecionar algo, o usuário pode apontar e fazer gesto de pinça.
Permissões para PWAs
As permissões no Oculus Browser funcionam da mesma forma que no Chrome. O estado é compartilhado entre apps executados no navegador e PWAs instalados. Assim, os usuários podem alternar entre as duas experiências sem precisar conceder as mesmas permissões novamente.
Embora muitas permissões sejam implementadas, nem todos os recursos são compatíveis. Por exemplo, enquanto a solicitação da permissão de geolocalização é bem-sucedida, o dispositivo nunca recebe um local. Da mesma forma, as várias APIs de hardware, como WebHID, Web Bluetooth etc., passam pela detecção de recursos, mas não mostram um seletor que permita ao usuário parear o Oculus com um dispositivo de hardware. Suponho que a detecção de recursos de APIs será refinada à medida que o navegador amadurecer.
Depuração de PWAs pelo Chrome DevTools
Depois de ativar o modo de desenvolvedor, a depuração de PWAs no Oculus Quest 2 funciona exatamente como descrito em Depuração remota de dispositivos Android.
- No dispositivo Oculus, navegue até o site desejado no navegador Oculus.
- Abra o Google Chrome no seu computador e acesse
chrome://inspect/#devices. - Encontre o dispositivo Oculus em questão, que será seguido por um conjunto de guias do navegador Oculus atualmente abertas no dispositivo.
- Clique em Inspecionar na guia do Oculus Browser desejada.
Descoberta de apps
As pessoas podem usar o navegador ou a Oculus Store para descobrir PWAs. Assim como em qualquer outro navegador, os PWAs instalados também funcionam no Oculus Browser como sites executados em uma guia. Quando um usuário visita um site, o Oculus Browser ajuda a descobrir o app se ele estiver disponível na Oculus Store. Para os usuários que já têm o app instalado, o Navegador Oculus vai ajudá-los a alternar facilmente para o app, se quiserem.
Exemplos de PWAs na Quest Oculus 2
PWAs da Meta
Várias divisões do Meta criaram PWAs para o Oculus Quest 2, por exemplo, Instagram e Facebook. Esses PWAs são executados em janelas de apps independentes que não têm uma barra de URL e podem ser redimensionadas livremente.
PWAs de outros desenvolvedores
No momento em que este artigo foi escrito, havia um número pequeno, mas crescente, de PWAs para o Oculus Quest 2 na Oculus Store. O Spike permite que os usuários experimentem todas as ferramentas de trabalho essenciais, como e-mail, chat, chamadas, notas, tarefas e listas de tarefas da caixa de entrada em um hub de ambiente virtual no app Spike.
Outro exemplo é o Smartsheet, um espaço de trabalho dinâmico que oferece gerenciamento de projetos, fluxos de trabalho automatizados e criação rápida de novas soluções.
Mais PWAs como Slack, Dropbox ou Canva estão chegando, como mostra o teaser em um vídeo com Jacob Rossi, lançado no contexto da conferência Connect do Facebook em 2021.
Como criar PWAs para o Oculus
A Meta descreveu as etapas necessárias na documentação. Em geral, os PWAs que podem ser instalados no Chrome geralmente funcionam imediatamente no Oculus.
Requisitos do manifesto do app da Web
Há algumas diferenças importantes em comparação com os
critérios de instalabilidade do Chrome e a
especificação do manifesto de app da Web. Por exemplo, o Oculus só oferece suporte
a idiomas da esquerda para a direita no momento, enquanto a especificação do manifesto de app da Web não impõe essas
restrições. Outro exemplo é start_url, que o Chrome exige estritamente para que um app possa ser
instalado, mas que é opcional no Oculus. O Oculus oferece uma
ferramenta de linha de comando que permite
que os desenvolvedores criem PWAs para o Oculus Quest 2, o que permite que eles transmitam os parâmetros ausentes (ou
substituam os atuais) no manifesto do app da Web.
O Oculus tem vários campos proprietários opcionais do manifesto do app da Web que podem ser usados para personalizar a experiência do PWA.
Como empacotar PWAs com a CLI Bubblewrap
O Bubblewrap é um conjunto de bibliotecas de código aberto e uma ferramenta de linha de comando (CLI) para Node.js. O Bubblewrap foi desenvolvido pela equipe do Google Chrome para ajudar os desenvolvedores a gerar, criar e assinar um projeto Android que inicia sua PWA como uma Atividade Confiável na Web (TWA).
No momento, o navegador da Meta Quest não é totalmente compatível com TWA. No entanto, a partir da versão 1.18.0, o Bubblewrap é compatível com o empacotamento de PWAs para dispositivos Meta Quest.
Ele pode gerar arquivos APK universais que abrem um TWA em dispositivos Android comuns e o navegador Meta Quest em dispositivos Meta Quest.
Supondo que você tenha o Node.js instalado, a CLI do Bubblewrap pode ser instalada com o seguinte comando:
npm i -g @bubblewrap/cli
Ao executar o Bubblewrap pela primeira vez, ele oferece a opção de fazer o download e a instalação automática das dependências externas necessárias: o Java Development Kit (JDK) e as ferramentas de build do SDK do Android.
Para gerar um projeto Android compatível com o Meta Quest que envolva seu PWA, execute o comando init
com a flag --metaquest e siga o assistente:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Depois que o projeto for gerado, crie e assine-o executando:
bubblewrap build
Isso vai gerar um arquivo chamado app-release-signed.apk. Esse arquivo pode ser instalado no dispositivo
ou publicado na Meta Quest Store, na Google Play Store ou em qualquer outra plataforma de distribuição de apps
Android.
Como empacotar PWAs com o utilitário do Oculus Platform
O Oculus Platform Utility é a ferramenta oficial de linha de comando desenvolvida pela Meta para publicar apps para dispositivos Oculus Rift e Meta Quest.
Ele também permite empacotar PWAs para dispositivos Meta Quest com o comando create-pwa e publicá-los
na Meta Quest Store e no App Lab.
Defina o nome do arquivo de saída usando o parâmetro -o e o caminho para o SDK do Android usando o parâmetro
--android-sdk.
Aponte a ferramenta para o URL ativo do manifesto do app da Web usando o parâmetro --web-manifest-url.
Se você não tiver um manifesto no PWA ativo ou quiser substituí-lo, ainda poderá
gerar um APK para o PWA usando um arquivo de manifesto local e o parâmetro
--manifest-content-file.
Para deixar o manifesto o mais puro possível, use o parâmetro --package-name com um valor na
notação reversa de nome de domínio (por exemplo, com.company.app.pwa), em vez de adicionar o
campo proprietário ovr_package_name ao manifesto.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Como empacotar PWAs com o PWABuilder
Na opinião dos autores, o uso do PWABuilder é a maneira mais fácil e, portanto, recomendada de empacotar PWAs para o Meta Quest no momento.
O PWABuilder é um projeto de código aberto desenvolvido pela Microsoft, que permite que os desenvolvedores empacotem e assinem os PWAs para publicação em várias lojas, incluindo a Microsoft Store, a Google Play Store, a App Store e a Meta Quest Store.
O empacotamento de PWAs com o PWABuilder é tão fácil quanto inserir o URL de um PWA, inserir/editar os metadados do app e clicar no botão Generate.
O PWABuilder permite que os desenvolvedores escolham qual ferramenta usar para empacotar PWAs para dispositivos Meta Quest.
Escolha a opção Meta Quest para usar o utilitário do Oculus Platform.
Escolha a opção Android para usar o Bubblewrap e marque a caixa de seleção Compatível com Meta Quest.
Como instalar PWAs com o ADB
Depois de criar o arquivo APK, você pode fazer o sideload dele no dispositivo Meta Quest usando o ADB por USB ou Wi-Fi:
adb install app-release-signed.apk
Se você usar a CLI Bubblewrap para empacotar PWAs, ela fornecerá um comando de alias conveniente para transferir o arquivo APK por sideload:
bubblewrap install
Os apps transferidos por sideload aparecem na seção Origens desconhecidas na gaveta de apps.
Envio de app
O upload e o envio de PWAs para a Oculus Store são abordados em detalhes nos documentos do centro de desenvolvedores da Oculus.
Além de enviar apps para a Oculus Store, os desenvolvedores também podem distribuir os apps por plataformas como o SideQuest diretamente aos consumidores com segurança, sem precisar de aprovação da loja. Isso permite que eles disponibilizem um app diretamente aos usuários finais, mesmo que ele esteja em fase inicial de desenvolvimento, experimental ou destinado a um público-alvo específico.
Como testar apps com várias guias
Para testar apps de várias guias, criei um pequeno PWA de teste que demonstra os vários recursos de link: abrir uma nova guia no PWA, permanecer na guia atual, abrir uma nova janela do navegador e abrir em uma WebView permanecendo na guia atual. Para criar uma cópia instalável localmente desse app, execute os comandos abaixo na sua máquina.
ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk
Confira um screencast do app de teste.
Uma versão Oculus de SVGcode
Para testar as instruções, criei uma versão do Oculus da minha PWA mais recente,
SVGcode. Você pode fazer o download do arquivo APK resultante
output.apk
no meu Google Drive. Se você quiser investigar o pacote mais detalhadamente, também tenho uma
versão descompilada. Encontre as instruções de criação em
package.json.
O uso do app no Oculus funciona bem, incluindo a capacidade de abrir e salvar arquivos. O navegador Oculus não oferece suporte à API File System Access, mas a abordagem substituto ajuda. A única coisa que não funcionou foi o zoom de pinça. Minha expectativa era que ele funcionasse pressionando o botão de acionamento em ambos os controles e movendo os controles em direções opostas. Fora isso, tudo estava com bom desempenho e responsivo, como você pode conferir no screencast incorporado.
PWAs 3D imersivos do WebXR
O suporte a PWAs no Oculus Quest não se limita a apps 2D simples. Os desenvolvedores podem criar experiências 3D imersivas para RV usando a API WebXR.
Quer saber como vários comandos (instalação de PWA, solicitações de permissão, notificações) são processados no RV?
Confira um screencast do teste de solicitações de user agent do WebXR Tests do Immersive Web Working Group.
Como você pode ver, entrar no modo de RV requer a permissão do usuário. As permissões são solicitadas uma vez por origem. A solicitação de permissões sai do modo imersivo. No momento, não há suporte para notificações.
Rastreamento de mãos
Use as mãos para interagir com PWAs no modo imersivo com a API WebXR Hand Input (link em inglês) e o sistema de rastreamento de mãos baseado em IA da Meta.
Confira um screencast de um exemplo de rastreamento da mão (link em inglês) do grupo de trabalho imersivo da Web WebXR (links em inglês).
Realidade aumentada/mista (passagem)
Conforme anunciado no Meta Connect 2022, o navegador Meta Quest adicionou suporte à realidade aumentada (RA) do WebXR, também conhecida como realidade mista (MR), nos dispositivos Meta Quest 2 e Meta Quest Pro.
Vamos conferir um exemplo inicial do A-Frame ligeiramente modificado com modelos reduzidos e céu e avião ocultos para realidade aumentada.
O A-Frame é um framework da Web de código aberto para criar experiências 3D/RV/RA totalmente com elementos HTML personalizados declarativos e reutilizáveis que são fáceis de ler, entender e copiar e colar.
Confira um screencast desta demonstração no Meta Quest 2.
O Meta Quest 2 tem câmeras monocromáticas, então o modo de passagem é em escala de cinza, enquanto o Meta Quest Pro tem câmeras coloridas.
Conclusões
Os PWAs no Oculus Quest 2 são muito divertidos e promissores. A tela virtual infinita que permite que os usuários ajustem a tela para o que melhor se adapta à tarefa atual tem muito potencial para mudar a forma como trabalhamos no futuro. Embora a digitação em RV com rastreamento da mão ainda esteja na fase inicial e, pelo menos para mim, ainda não funciona de maneira muito confiável, ela funciona bem o suficiente para inserir URLs ou digitar textos curtos.
O que mais gosto nos PWAs no Oculus Quest 2 é que eles são PWAs normais que podem ser usados sem alterações em uma guia do navegador ou por um wrapper de APK fino sem APIs específicas da plataforma. Segmentar várias plataformas com o mesmo código nunca foi tão fácil. Estes são os PWAs em RV e RA na Web. O futuro é brilhante!
Agradecimentos
Foto da Oculus Quest 2 de Maximilian Prandstätter no Flickr. Imagens da Oculus Store dos apps Instagram, Facebook, Oculus Browser e Spike, além de ilustrações de detectabilidade de apps e animação de rastreamento de mãos por cortesia do Meta. Imagem principal de Arnau Marín i Puig. Esta postagem foi revisada por Joe Medley.