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 Progressive Web Apps (PWAs) 2D e 3D que aproveitam o recurso multitarefa do Oculus Quest 2.
O 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 usado como um headset independente com um sistema operacional interno baseado em Android e com software de RV compatível com o Oculus executado em um computador desktop quando conectado por USB ou Wi-Fi. Ele usa o sistema em um chip Snapdragon XR2 da Qualcomm com 6 GB de RAM. A tela do Quest 2 é um painel LCD de troca rápida com resolução de 1.832 × 1.920 pixels por olho e taxa de atualização de até 120 Hz.
O 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 na segunda opção. O site do Oculus apresenta o navegador Oculus da seguinte forma.
"O Oculus Browser oferece suporte aos padrões da Web mais recentes e a outras tecnologias para ajudar você a criar experiências de RV na Web. Os sites 2D atuais funcionam muito bem no navegador Oculus porque ele é alimentado pelo mecanismo de renderização do Chromium. Ele também é otimizado para headsets Oculus, oferecendo o melhor desempenho e permitindo que 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 gravação é 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 está 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 de 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 marcador"
- 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 particular
- 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 navegador Oculus renderiza conteúdo de páginas da Web 2D e WebXR a 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 fps. O Oculus Quest 2 tem uma proporção de pixel do dispositivo de 1,5 para texto nítido.
PWAs no Oculus Browser e na Oculus Store
Em 28 de outubro de 2021, Jacob Rossi, líder de gerenciamento de produtos da Meta (Oculus), compartilhou que PWAs seriam lançados para o Oculus Quest e o Oculus Quest 2. A seguir, descrevo a experiência do PWA no Oculus e explico como criar, transferir por 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 é compatível com o produto. O navegador Oculus inclui um gerenciador de senhas que permite aos usuários armazenar e compartilhar senhas com segurança entre o navegador e as experiências de apps instalados.
Tamanhos de janela de PWAs
As janelas do navegador e dos PWAs instalados 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.
Interagir com PWAs
Os PWAs podem ser controlados com os controles esquerdo e direito do Oculus, mouses e teclados Bluetooth e por rastreamento das mãos. Para rolar a tela, use os controles analógicos dos controles do Oculus ou faça um gesto de pinça com o polegar e o indicador e mova na direção desejada. Para selecionar algo, o usuário pode apontar e pinçar.
Permissões para PWAs
As permissões no navegador Oculus funcionam da mesma forma que no Chrome. O estado é compartilhado entre apps em execução no navegador e PWAs instaladas. 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, embora a solicitação de permissão de geolocalização seja 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. Acho que a capacidade de detecção de recursos das APIs será refinada quando o navegador amadurecer.
Depurar PWAs com o Chrome DevTools
Depois de ativar o modo de desenvolvedor, a depuração de PWAs no Oculus Quest 2 funciona exatamente como descrito em Depurar dispositivos Android remotamente.
- No dispositivo Oculus, navegue até o site desejado no navegador Oculus.
- Abra o Google Chrome no computador e acesse
chrome://inspect/#devices. - Encontre o dispositivo Oculus em questão, que será seguido por um conjunto de guias do navegador Oculus abertas no dispositivo.
- Clique em Inspecionar na guia desejada do Oculus Browser.
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 navegador Oculus ajuda a descobrir o app se (e somente se) ele estiver disponível na Oculus Store. Para usuários que já têm o app instalado, o navegador Oculus ajuda a mudar para ele com facilidade, se quiserem.
Exemplos de PWAs no Oculus Quest 2
PWAs da Meta
Várias divisões da Meta criaram PWAs para o Oculus Quest 2, como o Instagram e o 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 da redação deste artigo, há um número pequeno, mas crescente, de PWAs para o Oculus Quest 2 na Oculus Store. Com o Spike, os usuários podem usar todas as ferramentas de trabalho essenciais, como e-mail, chat, chamadas, notas, tarefas e pendências, na Caixa de entrada em um hub de ambiente virtual diretamente 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, conforme mostrado 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 instaláveis no Chrome costumam funcionar sem problemas no Oculus.
Requisitos do manifesto do app da Web
Há algumas diferenças importantes em comparação com os critérios de capacidade de instalação do Chrome e a especificação do manifesto de app da Web. Por exemplo, no momento, o Oculus só oferece suporte a idiomas da esquerda para a direita, 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 para que um app possa ser instalado, mas que é opcional no Oculus. Oculus oferece uma ferramenta de linha de comando (link em inglês) que permite aos desenvolvedores criar PWAs para o Oculus Quest 2, o que permite transmitir os parâmetros ausentes (ou substituir os existentes) no manifesto do app da Web.
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 desenvolvedores a gerar, criar e assinar um projeto Android que inicia seu PWA como uma Atividade Confiável na Web (TWA, na sigla em inglês).
No momento, o navegador Meta Quest não oferece suporte total a TWAs, mas, a partir da versão 1.18.0, o Bubblewrap oferece suporte a pacotes de PWAs para dispositivos Meta Quest.
Ele pode gerar arquivos APK universais que abrem uma 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 o download e a instalação automáticos das dependências externas necessárias: Java Development Kit (JDK) e ferramentas de build do SDK do Android.
Para gerar um projeto Android compatível com o Meta Quest que encapsula 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.
Empacotamento de PWAs com o utilitário da plataforma Oculus
O Oculus Platform Utility é a ferramenta de linha de comando oficial desenvolvida pela Meta para publicar apps para dispositivos Oculus Rift e Meta Quest.
Também é possível 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 web app usando o parâmetro --web-manifest-url.
Se você não tiver um manifesto no seu PWA ativo ou quiser substituir o manifesto ativo, ainda poderá
gerar um APK para seu 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 de nome de domínio invertido (por exemplo, com.company.app.pwa), em vez de adicionar o campo ovr_package_name proprietário 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
Usar o PWABuilder é, na opinião dos autores, 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 aos desenvolvedores empacotar e assinar PWAs para publicação em várias lojas, incluindo Microsoft Store, Google Play Store, App Store e Meta Quest Store.
Empacotar 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 Gerar.
O PWABuilder oferece aos desenvolvedores a opção de usar qualquer ferramenta para empacotar PWAs para dispositivos Meta Quest.
Escolha a opção Meta Quest para usar o utilitário da plataforma Oculus.
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 ADB
Depois de criar o arquivo APK, faça o sideload dele no dispositivo Meta Quest usando o ADB por USB ou Wi-Fi:
adb install app-release-signed.apk
Se você usa a CLI Bubblewrap para empacotar PWAs, ela oferece um comando de alias conveniente para fazer sideload do arquivo APK:
bubblewrap install
Os apps transferidos por sideload aparecem na seção Fontes desconhecidas da gaveta de apps.
Envio de apps
O envio e o envio de PWAs para a Oculus Store são abordados em detalhes na documentação do Oculus Developer Center.
Além de enviar apps para a Oculus Store, os desenvolvedores também podem distribuí-los por plataformas como o SideQuest diretamente aos consumidores de forma segura, sem precisar de aprovação da loja. Isso permite que eles disponibilizem um app diretamente para os usuários finais, mesmo que ele esteja em fase inicial de desenvolvimento, experimental ou destinado a um público único.
Testar apps com várias guias
Para testar apps com 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. Crie uma cópia instalável localmente desse app executando 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 do SVGcode para o Oculus.
Para testar as instruções, criei uma versão do Oculus do meu PWA mais recente, o
SVGcode. Você pode fazer o download do arquivo APK resultante
output.apk
no Meu Drive. Se quiser investigar mais o pacote, também tenho uma versão descompilada. Encontre as instruções de build em
package.json.
O uso do app no Oculus funciona bem, incluindo a capacidade de abrir e salvar arquivos. O Oculus Browser não é compatível com a API File System Access, mas a abordagem de substituição ajuda. A única coisa que não funcionou foi o zoom com pinça. Minha expectativa era que ele funcionasse pressionando o botão de gatilho nos dois controles e movendo-os em direções opostas. Fora isso, tudo estava funcionando bem e responsivo, como você pode ver no screencast incorporado.
PWAs imersivos em 3D com tecnologia 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 ambiente de RV?
Confira uma captura de tela do teste de solicitações de user agent do Grupo de trabalho da Web imersiva Testes do WebXR.
Como você pode ver, entrar no modo VR 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
Você pode usar as mãos para interagir com PWAs no modo imersivo graças à API WebXR Hand Input e ao sistema de rastreamento de mãos baseado em IA da Meta.
Confira uma screencast do Exemplo de rastreamento de mãos do WebXR Samples do Immersive Web Working Group.
Realidade aumentada/mista (transparência)
Conforme anunciado no Meta Connect 2022, o navegador Meta Quest adicionou suporte para realidade aumentada (RA) WebXR, também conhecida como realidade mista (RM), nos dispositivos Meta Quest 2 e Meta Quest Pro.
Vamos conferir um exemplo inicial do A-Frame um pouco modificado com modelos reduzidos e céu e plano ocultos para realidade aumentada.
O A-Frame (em inglês) é uma estrutura da Web de código aberto para criar experiências em 3D/VR/RA totalmente com elementos HTML personalizados declarativos e reutilizáveis que são fáceis de ler, entender e copiar e colar.
Confira uma screencast desta demonstração no Meta Quest 2.
O Meta Quest 2 tem câmeras monocromáticas, então a transmissão é 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 aos usuários ajustar 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 das mãos ainda esteja em fase inicial e, pelo menos para mim, não funcione de maneira muito confiável, ela é boa o suficiente para inserir URLs ou digitar textos curtos.
O que mais gosto nas PWAs do Oculus Quest 2 é que elas são PWAs comuns que podem ser usadas sem alterações em uma guia do navegador ou em um wrapper APK simples, sem APIs específicas da plataforma. Nunca foi tão fácil segmentar várias plataformas com o mesmo código. Por PWAs em VR e AR na Web. O futuro é brilhante!
Agradecimentos
Foto do Oculus Quest 2 de Maximilian Prandstätter no Flickr. Imagens da Oculus Store dos apps Instagram, Facebook, Oculus Browser e Spike, além de uma ilustração da descoberta de apps e uma animação do rastreamento de mãos, cortesia da Meta. Imagem principal de Arnau Marín i Puig. Esta postagem foi revisada por Joe Medley.