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 (PWA) 2D e 3D que usam o recurso multitarefa do Oculus Quest 2.
The 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 fone de ouvido autônomo com um sistema operacional interno baseado no Android e com software de RV compatível com Oculus executado em um computador desktop quando conectado por USB ou Wi-Fi. Ele usa o sistema Qualcomm Snapdragon XR2 em um chip com 6 GB de RAM. A tela do Quest 2 é um painel de LCD de troca rápida com 1.832 × 1.920 pixels por resolução ocular a uma taxa de atualização de 120 Hz.
O navegador Oculus
Atualmente, existem três navegadores disponíveis para o Oculus Quest 2: Wolvic, sucessor do Firefox Reality, e o Oculus Browser integrado. Este artigo se concentra nesse último caso. O site do Oculus apresenta o navegador da maneira a seguir.
"O Oculus Browser 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 em 2D atuais funcionam muito bem no navegador Oculus porque ele é baseado no mecanismo de renderização do Chromium. Ele é ainda mais otimizado para que os fones de ouvido Oculus tenham o melhor desempenho e para 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 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 é apenas uma versão atrás da versão estável atual do Chrome, que é
96.0.4664.110. Se o usuário alternar para o modo móvel, o VR mudará para Mobile VR.
Interface do usuário
A interface do usuário do navegador (mostrada acima) tem os seguintes recursos (linha superior 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 estreitas, médias e amplas, além de um recurso de zoom
- Botão "Solicitar site móvel"
- Botão de menu com as seguintes opções:
- Entrar no modo privado
- Fechar todas as guias
- Configurações
- Marcadores de livros
- Downloads
- Histórico
- Remover dados de navegação
A linha inferior inclui os seguintes recursos:
- Botão "Fechar"
- Botão "Minimizar"
- Botão de três pontos com opções para voltar, avançar e atualizar
Taxa de atualização e proporção de pixels do dispositivo
No Oculus Quest 2, ele renderiza o conteúdo da página da Web em 2D e o 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 no frame rate do vídeo, por exemplo, 24 QPS. O Oculus Quest 2 tem uma proporção de pixels de dispositivo de 1,5 para textos nítidos.
PWAs no navegador Oculus e na loja do Oculus
Em 28 de outubro de 2021, Jacob Rossi, líder de gerenciamento de produtos da Meta (Oculus), compartilhou que PWAs estavam chegando para Oculus Quest e Oculus Quest 2. A seguir, descrever a experiência com o PWA no Oculus e explicar como criar, transferir por sideload e testar seu PWA no Oculus Quest 2.
Compartilhamento de estado
O estado de login é compartilhado entre o Oculus Browser e os PWAs, permitindo que os usuários alternem perfeitamente entre os dois. Naturalmente, o Login do Facebook é pronto para uso. O Oculus Browser inclui um gerenciador de senhas que permite que os usuários armazenem e compartilhem as próprias senhas com segurança entre o navegador e as experiências do app instalado.
Tamanhos de janela de PWA
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.
Interação com PWAs
Os PWAs podem ser controlados com os controles esquerdo e direito do Oculus, mouses e teclados Bluetooth e pelo rastreamento manual. A rolagem funciona com os pen drives dos controles Oculus ou apertando o polegar e o dedo indicador, movendo-os 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 navegador Oculus funcionam da mesma forma que no Chrome. O estado é compartilhado entre os apps em execução no navegador e os PWAs instalados, para que os usuários possam 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, mesmo que a solicitação da 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, 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. Acredito que a detecção de recursos das APIs será refinada quando o navegador for desenvolvido.
Como depurar PWAs usando o Chrome DevTools
Depois 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.
- Inicie o Google Chrome no seu computador e navegue até
chrome://inspect/#devices. - Encontre o dispositivo Oculus em questão, que será seguido por um conjunto de guias do navegador Oculus abertas atualmente no dispositivo.
- Clique em inspect na guia desejada do Oculus Browser.
Descoberta de apps
As pessoas podem usar o próprio 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 em execução em uma guia. Quando um usuário visitar um site, o Oculus Browser ajudará 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 Oculus Browser os ajudará a mudar facilmente para o app, 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, 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 que podem ser redimensionadas livremente.
PWAs de outros desenvolvedores
No momento da elaboração deste artigo, há um número pequeno, mas crescente, de PWAs para o Oculus Quest 2 na Oculus Store. O Spike permite que os usuários acessem todas as ferramentas de trabalho essenciais, como e-mail, chat, chamadas, anotações, tarefas e tarefas pendentes na caixa de entrada, em um hub de ambiente virtual direto 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 mostrado em um vídeo com Jacob Rossi, lançado no contexto da conferência Connect do Facebook em 2021.
Como criar PWAs para Oculus
A Meta descreveu as etapas necessárias na documentação. Em geral, os PWAs instaláveis 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 instalação do Chrome e a
especificação do manifesto do 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 do app da Web não aplica essas
restrições. Outro exemplo é start_url, que o Chrome exige estritamente para que um app possa ser
instalado, mas que no Oculus é opcional. 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 reservados opcionais do manifesto de 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 seu PWA como uma Atividade na Web confiável (TWA, na sigla em inglês).
Atualmente, o navegador da Meta Quest não é totalmente compatível com TWA. No entanto, a partir da versão 1.18.0, o Bubblewrap oferece suporte ao empacotamento de PWAs para dispositivos da Meta Quest.
Ele pode gerar arquivos APK universais que abrem um TWA em dispositivos Android normais e o navegador Meta Quest em dispositivos Meta Quest.
Supondo que você tenha o Node.js instalado, a CLI do Bubblewrap poderá 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 instalar automaticamente as dependências externas necessárias: Java Development Kit (JDK) e Android SDK Build Tools.
Para gerar um projeto Android compatível com a Meta Quest que envolva seu PWA, execute o comando init
com a sinalização --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 Oculus Platform Utility
O utilitário Oculus Platform é a ferramenta de linha de comando oficial desenvolvida pela Meta para publicar apps para dispositivos Oculus Rift e MetaQuest.
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 com o parâmetro -o e o caminho para o SDK do Android usando o parâmetro
--android-sdk.
Direcione 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 seu PWA ativo ou quiser modificá-lo, ainda será possível
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 em notação inversa de nome de domínio (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
De acordo com os autores, o PWABuilder é a maneira mais fácil e recomendada de empacotar PWAs para a Meta Quest no momento.
O PWABuilder é um projeto de código aberto desenvolvido pela Microsoft, que permite aos desenvolvedores empacotar e assinar os 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.
Com o PWABuilder, os desenvolvedores podem escolher qual ferramenta usar para empacotar PWAs para dispositivos Meta Quest.
Escolha a opção Meta Quest para usar o Oculus Platform Utility.
Você pode escolher a opção Android para usar o Bubblewrap e marcar a caixa de seleção Compatível com a Meta Quest.
Como instalar PWAs com adb
Depois de criar o arquivo APK, você pode transferi-lo por sideload para o dispositivo Meta Quest usando o adb via USB ou Wi-Fi:
adb install app-release-signed.apk
Se você usa a CLI Bubblewrap para empacotar PWAs, ela fornece um comando de alias conveniente para transferir o arquivo APK por sideload:
bubblewrap install
Os apps transferidos por sideload aparecem em uma seção Fontes desconhecidas na gaveta de apps.
Envio de apps
O upload e o envio de PWAs para a Oculus Store são abordados em detalhes nos documentos 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 (link em inglês) diretamente para os consumidores com segurança, sem exigir a aprovação da loja. Isso permite que eles levem um app diretamente aos usuários finais, mesmo que ele esteja no início de desenvolvimento, experimental ou voltado para um público único.
Como 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 desse app que possa ser instalada localmente 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 Oculus do SVGcode
Para conferir 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 Google Drive. Se você quiser investigar mais o pacote, também temos 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 Oculus Browser não oferece suporte à API File System Access, mas a abordagem de fallback ajuda. A única coisa que não funcionou foi o zoom com gesto de pinça. Eu esperava que funcionasse pressionando o botão de acionamento nos dois controles e, em seguida, movendo-os em direções opostas. Fora isso, todo o resto estava com bom desempenho e resposta, como você pode ver no screencast incorporado.
PWAs 3D WebXR imersivos
O suporte a PWA 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árias solicitações (instalação de PWA, solicitações de permissão, notificações) são tratadas na RV?
Confira um screencast do teste de prompts do user agent dos testes do WebXR do Immersive Web Working Group.
Como você pode ver, para entrar no modo de RV, o usuário precisa ter permissão. As permissões são solicitadas uma vez por origem. A solicitação de permissões sai do modo imersivo. Notificações não são suportadas no momento.
Monitoramento da mão
É possível usar as mãos para interagir com PWAs no modo imersivo graças à API WebXR Hand Input e ao sistema de rastreamento manual baseado em IA da Meta.
Confira um screencast do exemplo de rastreamento da mão (link em inglês) dos exemplos do WebXR do Immersive Web Working Group.
Realidade aumentada/mista (passagem)
Conforme anunciado na Meta Connect 2022, a Meta Quest Browser adicionou suporte à realidade aumentada (RA) do WebXR, também conhecida como realidade mista (MR), em dispositivos Meta Quest 2 e Meta Quest Pro.
Vamos conferir um exemplo inicial de um frame A ligeiramente modificado com modelos reduzidos e céu e avião escondidos para realidade aumentada.
O A-Frame é um framework da Web de código aberto para criar experiências 3D/VR/RA totalmente com elementos HTML personalizados, reutilizáveis e declarativos, fáceis de ler, entender e copiar e colar.
Confira um screencast da demonstração da Meta Quest 2.
A Meta Quest 2 tem câmeras monocromáticas, então a passagem está em escala de cinza, enquanto a 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 dimensionem a tela para o que se encaixa melhor na tarefa atual tem muito potencial para mudar a maneira como trabalhamos no futuro. Embora a digitação de RV com o rastreamento da mão ainda esteja engatinha e, pelo menos para mim, ainda não funcione de maneira muito confiável, funciona bem o suficiente para inserir URLs ou digitar textos curtos.
O que eu mais gosto dos PWAs do Oculus Quest 2 é que eles são apenas PWAs normais que podem ser usados sem alterações em uma guia do navegador ou usando um wrapper fino de APK sem APIs específicas da plataforma. Nunca foi tão fácil segmentar várias plataformas com o mesmo código. Confira os PWAs em RV e RA na Web. O futuro é promissor!
Agradecimentos
Foto do Oculus Quest 2 por Maximilian Prandstätter no Flickr. Imagens do Oculus Store dos apps Instagram, Facebook, Oculus Browser e Spike, bem como ilustração da descoberta de apps e animação de rastreamento de mão cortesia da Meta. Imagem principal de Arnau Marín i Puig. Esta postagem foi revisada por Joe Medley.