Oculus Quest 2'de PWA'lar

Oculus Quest 2, Meta şirketinin Oculus şirketi tarafından üretilen bir sanal gerçeklik (VR) başlığıdır. Geliştiriciler artık Oculus Quest 2'nin çoklu görev özelliğinden yararlanan 2D ve 3D Progresif Web Uygulamaları (PWA) oluşturup dağıtabilir.

Oculus Quest 2

Oculus Quest 2, Meta'nın bir bölümü olan Oculus tarafından geliştirilen bir sanal gerçeklik (VR) başlığıdır. Bu ürün, şirketin önceki başlığı olan Oculus Quest'in yerini alıyor. Cihaz, hem Android tabanlı dahili bir işletim sistemine sahip bağımsız bir başlık olarak hem de USB veya kablosuz ağa bağlıyken bir masaüstü bilgisayarda çalışan Oculus uyumlu VR yazılımıyla çalışabilir. 6 GB RAM'e sahip bir çip üzerinde Qualcomm Snapdragon XR2 sistemini kullanır. Quest 2'nin ekranı,göz çözünürlüğü başına 1.832 × 1.920 piksel çözünürlüğe sahip,120 Hz'e kadar yenileme hızında çalışan tek bir hızlı geçişli LCD panelidir.

Oculus Tarayıcı

Şu anda Oculus Quest 2 için kullanılabilen üç tarayıcı vardır: Firefox Reality'nin yerini alan Wolvic ve yerleşik Oculus Tarayıcı. Bu makale, ikincisine odaklanmaktadır. Oculus web sitesi, Oculus Tarayıcı'yı aşağıdaki gibi tanıtıyor.

"Oculus Tarayıcı, web'de VR deneyimleri oluşturmanıza yardımcı olmak için en yeni web standartlarını ve diğer teknolojileri destekler. Bugünün 2D web siteleri, Chromium oluşturma motoru tarafından desteklendiği için Oculus Tarayıcı'da mükemmel performans göstermektedir. En iyi performansı elde etmek ve web geliştiricilerinin WebXR gibi yeni API'lerle sanal gerçekliğin tam potansiyelinden faydalanmalarını sağlamak amacıyla Oculus başlıkları için daha da optimize edilmiştir. WebXR ile web'in yeni sınırlarını açıyoruz."

Kullanıcı aracısı

Yazma sırasında tarayıcının kullanıcı aracısı dizesi aşağıdaki gibidir.

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

Gördüğünüz gibi, Oculus Tarayıcı'nın mevcut sürümü olan 18.1.0.2.46.337441587, Chrome'un mevcut kararlı sürümünün (96.0.4664.110) yalnızca bir gerideki 95.0.4638.74 sürümünü temel alır. Kullanıcı mobil moda geçerse VR ayarı Mobile VR olarak değişir.

Kullanıcı arayüzü

Tarayıcının kullanıcı arayüzü (yukarıda gösterilmiştir) aşağıdaki özelliklere sahiptir (üst satır soldan sağa):

• Geri düğmesi
• Yeniden yükle düğmesi
• Site bilgileri
• URL çubuğu
• Yer işareti oluşturma düğmesi
• Dar, orta ve geniş seçeneklere ve yakınlaştırma özelliğine sahip yeniden boyutlandır düğmesi
• Mobil web sitesi iste düğmesi
• Aşağıdaki seçeneklere sahip Menü düğmesi:
  • Gizli moda geç
  • Tüm sekmeleri kapat
  • Ayarlar
  • Kitap Ayraçları
  • İndirilenler
  • İzledikleriniz
  • Tarama verilerini temizleyin

Alt satırda aşağıdaki özellikler bulunur:

• Kapat düğmesi
• Küçült düğmesi
• Geri, ileri ve yeniden yükleme seçenekleri sunan üç noktalı düğme

Yenileme hızı ve cihaz piksel oranı

Oculus Tarayıcı, Oculus Quest 2 için hem 2D web sayfası içeriğini hem de WebXR'yi 90 Hz yenileme hızında oluşturur. Oculus Tarayıcı, tam ekran medya izlerken cihazın yenileme hızını videonun kare hızına (örneğin, 24 fps) göre optimize eder. Oculus Quest 2, net metinler için cihaz piksel oranı olan 1,5 değerine sahiptir.

Oculus Tarayıcı ve Oculus Store'daki PWA'lar

28 Ekim 2021'de Meta (Oculus) Ürün Yönetimi Lideri Jacob Rossi, Oculus Quest ve Oculus Quest 2'ye PWA'ların geleceğini paylaştı. İlerleyen bölümlerde Oculus'taki PWA deneyimini ve PWA'nızı Oculus Quest 2'de nasıl oluşturacağınızı, başka cihazlardan yükleyeceğinizi ve test edeceğinizi açıklıyorum.

Durum paylaşımı

Giriş durumu, Oculus Tarayıcı ve PWA'lar arasında paylaşılır ve kullanıcıların ikisi arasında sorunsuz bir şekilde geçiş yapmasına olanak tanır. Doğal olarak, Facebook Girişi kutudan itibaren desteklenmektedir. Oculus Tarayıcı, kullanıcıların şifrelerini tarayıcı ve yüklü uygulama deneyimleri arasında güvenli bir şekilde saklayıp paylaşmasına olanak tanıyan bir şifre yöneticisi içerir.

PWA pencere boyutları

Yüklü PWA'ların tarayıcı pencereleri ve pencereleri, kullanıcı tarafından serbestçe yeniden boyutlandırılabilir. Yükseklik 625 ile 1.200 piksel arasında değişebilir. Genişlik 400 piksel ile 2.000 piksel arasında ayarlanabilir. Varsayılan boyutlar 1.000 × 625 pikseldir.

PWA'larla etkileşim

PWA'lar; Oculus sol ve sağ kumandaları, Bluetooth fareleri, klavyeleri ve el ile izleme özelliğiyle kontrol edilebilir. Kaydırma işlemi, Oculus denetleyicilerin başparmak çubuklarıyla veya başparmağı ve işaret parmağını sıkıştırıp istediğiniz yönde hareket ettirerek çalışır. Kullanıcı, bir öğeyi seçmek için parmağıyla parmaklarını birbirine yaklaştırabilir.

PWA'lar (Progresif Web Uygulaması) için izinler

Oculus Tarayıcı'daki izinler, Chrome'daki izinlerle hemen hemen aynıdır. Durum, tarayıcıda çalışan uygulamalar ile yüklü PWA'lar arasında paylaşılır. Böylece kullanıcılar, aynı izinleri tekrar vermek zorunda kalmadan iki deneyim arasında geçiş yapabilir.

Birçok izin uygulanmış olsa da tüm özellikler desteklenmez. Örneğin, coğrafi konum izninin istenmesi başarılı olsa da cihaz gerçekte hiçbir zaman konum bilgisi almaz. Benzer şekilde WebHID, Web Bluetooth gibi çeşitli donanım API'leri de özellik algılama özelliğini başarıyla geçirir ancak kullanıcının Oculus'u bir donanım cihazıyla eşlemesine izin verecek bir seçici göstermez. Tarayıcı olgunlaştıktan sonra API'lerin özellik algılanabilirliği iyileştirilir.

Chrome Geliştirici Araçları ile PWA'larda hata ayıklama

Geliştirici Modu'nu etkinleştirdikten sonra, Oculus Quest 2'deki PWA'larda hata ayıklama işlemi, tam olarak Android cihazlarda uzaktan hata ayıklama bölümünde açıklandığı gibi çalışır.

1. Oculus cihazında Oculus Tarayıcı'da istediğiniz siteye gidin.
2. Bilgisayarınızda Google Chrome'u başlatın ve chrome://inspect/#devices adresine gidin.
3. İlgili Oculus cihazını bulun. Ardından cihazda o anda açık olan bir dizi Oculus Tarayıcı sekmesi gelir.
4. İstediğiniz Oculus Tarayıcı sekmesinde inspect'yi tıklayın.

Uygulama keşfi

Kullanıcılar PWA'ları keşfetmek için tarayıcıyı veya Oculus Store'u kullanabilir. Diğer tüm tarayıcılarda olduğu gibi, yüklenen PWA'lar da Oculus Tarayıcı'da bir sekmede çalışan web siteleri olarak çalışır. Kullanıcılar bir siteyi ziyaret ettiğinde Oculus Tarayıcı, uygulamanın Oculus Store'da bulunması durumunda uygulamayı keşfetmesine yardımcı olur. Oculus Tarayıcı, uygulamayı halihazırda yüklemiş olan kullanıcıların isterlerse kolayca uygulamaya geçiş yapmasına yardımcı olur.

Oculus Quest 2'deki örnek PWA'lar

Meta tarafından PWA'lar

Birden fazla Meta bölümü, Oculus Quest 2 için PWA'lar (ör. Instagram ve Facebook) oluşturmuştur. Bu PWA'lar, URL çubuğu olmayan ve serbestçe yeniden boyutlandırılabilen bağımsız uygulama pencerelerinde çalışır.

Diğer geliştiriciler tarafından sunulan PWA'lar

Bu makalenin yazıldığı tarihte, Oculus Store'daki Oculus Quest 2 için az sayıda ancak giderek artan sayıda PWA vardır. Spike, kullanıcıların e-posta, sohbet, çağrılar, notlar, görevler ve yapılacaklar gibi tüm önemli iş araçlarını, doğrudan Spike uygulamasındaki sanal ortam merkezinde, gelen kutularından denemesine olanak tanır.

Diğer bir örnek olan Smartsheet proje yönetimi, otomatikleştirilmiş iş akışları ve hızlı bir şekilde yeni çözümler derleyen bir dinamik çalışma alanıdır.

Jacob Rossi'nin yer aldığı ve 2021'de Facebook'un Connect konferansı bağlamında yayınlanan videoda tanıtıldığı gibi Slack, Dropbox veya Canva gibi daha fazla PWA gelecek.

Oculus için PWA oluşturma

Gerekli adımları meta belgelerinde özetledi. Genel olarak, Chrome'a yüklenebilir olan PWA'lar çoğu zaman Oculus'ta kullanıma hazır olarak sunulur.

Web Uygulama Manifest'i gereksinimleri

Chrome'un yüklenebilirlik ölçütleri ve Web Uygulaması Manifest spesifikasyonu ile karşılaştırıldığında bazı önemli farklılıklar vardır. Örneğin, Oculus şu anda yalnızca soldan sağa dilleri desteklerken Web Uygulaması Manifest spesifikasyonunda bu tür kısıtlamalar zorunlu değildir. Başka bir örnek de start_url. Bunlar, Chrome'un bir uygulamanın yüklenebilir olması için kesinlikle zorunlu olmasına rağmen Oculus'ta isteğe bağlıdır. Oculus, geliştiricilerin Oculus Quest 2 için PWA'lar oluşturmasına olanak tanıyan bir komut satırı aracı sunar. Bu araç, geliştiricilerin Web Uygulaması Manifest'indeki eksik parametreleri iletmelerine (veya mevcut parametreleri geçersiz kılmalarına) olanak tanır.

Oculus, PWA deneyimini özelleştirmek için kullanılabilen isteğe bağlı bir dizi özel Web Uygulaması Manifest alanına sahiptir.

PWA'ları Bubblewrap CLI ile paketleme

Bubble wrap, açık kaynaklı bir kitaplık grubu ve Node.js için bir komut satırı aracıdır. Bubblewrap, geliştiricilerin PWA'nızı Güvenilir Web Etkinliği (TWA) olarak başlatan bir Android projesi oluşturmasına, oluşturmasına ve imzalamasına yardımcı olmak için Google Chrome ekibi tarafından geliştirildi.

Meta Quest Tarayıcı şu anda TWA'yı tam olarak desteklememektedir ancak 1.18.0 sürümünden itibaren, Meta Quest cihazları için PWA'ların paketlenmesini desteklemektedir.

Bu uygulama, normal Android cihazlarda TWA ve Meta Quest cihazlarda Meta Quest Tarayıcı açan evrensel APK dosyaları oluşturabilir.

Node.js'nin yüklü olduğu varsayıldığında Bubblewrap CLI aşağıdaki komutla yüklenebilir:

npm i -g @bubblewrap/cli

Bubblewrap ilk kez çalıştırıldığında, gerekli harici bağımlılıkların (Java Geliştirme Kiti (JDK) ve Android SDK Derleme Araçları) otomatik olarak indirilmesini ve yüklenmesini sağlar.

PWA'nızı sarmalayan Meta Quest uyumlu bir Android projesi oluşturmak için init komutunu --metaquest işaretiyle çalıştırın ve sihirbazı takip edin:

bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest

Proje oluşturulduktan sonra, aşağıdaki komutu çalıştırarak derleyip imzalayın:

bubblewrap build

Bu işlem, app-release-signed.apk adlı dosyanın çıktısını verir. Bu dosya cihaza yüklenebilir veya Meta Quest Store, Google Play Store veya diğer herhangi bir Android uygulama dağıtım platformunda yayınlanabilir.

PWA'ları Oculus Platform Utility ile paketleme

Oculus Platform Utility, Meta tarafından Oculus Rift ve MetaQuest cihazları için uygulama yayınlamak amacıyla geliştirilen resmi komut satırı aracıdır.

Ayrıca, Meta Quest cihazları için PWA'ların create-pwa komutuyla paketlenmesine ve Meta Quest Store ile App Lab'de yayınlanmasına izin verilir.

Çıkış dosyası adını -o parametresi aracılığıyla, Android SDK yolunu ise --android-sdk parametresi aracılığıyla ayarlayın.

--web-manifest-url parametresi aracılığıyla aracı, web uygulaması manifestinin canlı URL'sine yönlendirin.

Canlı PWA'nızda manifest yoksa veya yayındaki manifesti geçersiz kılmak istiyorsanız yerel manifest dosyasını ve --manifest-content-file parametresini kullanarak PWA'nız için bir APK oluşturabilirsiniz.

Manifest'i olabildiğince sade bırakmak için özel ovr_package_name alanını manifest'e eklemek yerine ters alan adı gösterimindeki bir değerle (örneğin, com.company.app.pwa) --package-name parametresini kullanın.

ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa

PWA'ları PWABuilder ile paketleme

PWABuilder'ın kullanılması, yazarların gözünden şu anda Meta Quest için PWA'ları paketlemenin en kolay ve bu nedenle önerilen yoludur.

PWABuilder, Microsoft tarafından geliştirilen açık kaynaklı bir projedir. Bu proje, geliştiricilerin PWA'larını Microsoft Store, Google Play Store, App Store ve Meta Quest Store gibi çeşitli mağazalarda yayınlamak üzere paketleyip imzalamasına olanak tanır.

PWA'ları PWABuilder ile paketlemek, PWA'nın URL'sini girmek, uygulama için meta verileri girmek/düzenlemek ve Oluştur düğmesini tıklamak kadar kolaydır.

PWABuilder, geliştiricilere Meta Quest cihazları için PWA'ları paketlemede kullanabilecekleri bir araç seçeneği sunuyor.

Oculus Platform Utility'yi kullanmak için Meta Quest seçeneğini belirleyebilirsiniz.

Bubblewrap'u kullanmak için Android seçeneğini belirleyebilir ve Meta Quest ile uyumlu onay kutusunu işaretleyebilirsiniz.

ADB ile PWA'ları yükleme

APK dosyasını oluşturduktan sonra, USB veya Wi-Fi üzerinden ADB'yi kullanarak Meta Quest cihazına yükleyebilirsiniz:

adb install app-release-signed.apk

PWA'ları paketlemek için Bubblewrap KSA kullanıyorsanız APK dosyasını başka cihazdan yüklemek için kullanışlı bir takma ad komutu sağlar:

bubblewrap install

Başka cihazdan yüklenen uygulamalar, uygulama çekmecesinde Bilinmeyen Kaynaklar bölümünde görünür.

Uygulama gönderme

PWA'ların Oculus Store'a yüklenmesi ve gönderilmesi, Oculus Developer Center belgelerinde ayrıntılı olarak ele alınmıştır.

Geliştiriciler, uygulamalarını Oculus Store'a göndermenin yanı sıra SideQuest gibi platformlar aracılığıyla tüketicilere doğrudan, güvenli bir şekilde ve mağaza onayı olmadan da dağıtabilirler. Böylece, uygulama geliştirme aşamasında, deneysel olsa veya benzersiz bir kitleyi hedefliyor olsa bile, uygulamayı doğrudan son kullanıcılara ulaştırabilir.

Çok sekmeli uygulamaları test etme

Çok sekmeli uygulamaları test etmek için, çeşitli bağlantı özelliklerini gösteren küçük bir test PWA'sı oluşturdum: yeni bir PWA içi sekme açma, mevcut sekmede kalma, yeni tarayıcı penceresi açma ve mevcut sekmede kalmaya devam eden bir Web Görünümü'nde açma. Aşağıdaki komutları makinenizde çalıştırarak bu uygulamanın yerel olarak yüklenebilir bir kopyasını oluşturun.

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

Test uygulamasının ekran video kaydını burada bulabilirsiniz.

SVG kodunun Oculus sürümü

Talimatları uygulamak için en son PWA'm olan SVGcode'un Oculus sürümünü oluşturdum. Oluşturulan APK dosyasını output.apk Google Drive'ımdan indirebilirsiniz. Paketi daha fazla araştırmak isterseniz derlenmiş bir sürümüm de var. Derleme talimatlarını package.json sayfasında bulabilirsiniz.

Uygulamayı Oculus'ta kullanmak, dosyaları açıp kaydetme özelliği de dahil olmak üzere sorunsuz bir şekilde çalışır. Oculus Tarayıcı, File System Access API'yi desteklemez ancak yedek yaklaşım yardımcı olur. Çalışmayan tek şey yakınlaştırmak. Beklentim, her iki kumandadaki tetikleyici düğmesine basıp kumandaları zıt yönlerde hareket ettirmekti. Bunun dışında, yerleşik ekran video kaydında görebileceğiniz gibi diğer her şey etkili ve duyarlıydı.

Etkileyici 3D WebXR PWA'lar

Oculus Quest'te PWA desteği düz 2D uygulamalarla sınırlı değildir. Geliştiriciler, WebXR API'sini kullanarak VR için etkileyici 3D deneyimler oluşturabilir.

Çeşitli istemlerin (PWA yükleme, izin istekleri, bildirimler) VR içinden nasıl işlendiğini mi merak ediyorsunuz?

Immersive Web Working Group'un WebXR Testleri kapsamındaki User Agent Prompts (Kullanıcı Aracısı İstemleri) testinin ekran video kaydını burada bulabilirsiniz.

Gördüğünüz gibi, VR moduna girmek için kullanıcının izni gerekiyor. İzinler, kaynak başına bir kez istenir. İzin istemek kapsamlı moddan çıkar. Bildirimler şu anda desteklenmiyor.

El takibi

WebXR Hand Input API ve Meta'nın yapay zeka tabanlı el izleme sistemi sayesinde ellerinizi kullanarak sürükleyici modda PWA'larla etkileşimde bulunabilirsiniz.

Immersive Web Working Group'un WebXR Samples programından Elle İzleme Örneği ekran görüntüsünü burada bulabilirsiniz.

Artırılmış/Karma Gerçeklik (Geçiş)

Meta Connect 2022'de duyurulduğu gibi, Meta Quest Tarayıcısı, Meta Quest 2 ve Meta Quest Pro cihazlarda WebXR Artırılmış Gerçeklik (MR) olarak da bilinen WebXR Artırılmış Gerçeklik (AR) için destek ekledi.

Artırılmış gerçeklik için ölçeği küçültülmüş modeller ve gizli gökyüzü ve düzlemi içeren, hafif değiştirilmiş bir A-Frame başlangıç örneğine göz atalım.

A-Frame; okunması, anlaşılması ve kopyalanıp yapıştırılması kolay bildirim temelli, yeniden kullanılabilir özel HTML öğelerinden tamamen 3D/VR/AR deneyimleri oluşturmaya yönelik açık kaynaklı bir web çerçevesidir.

Meta Quest 2'deki bu demonun ekran video kaydını burada bulabilirsiniz.

Meta Quest 2'de tek renkli kameralar vardır. Böylece, geçiş gri tonlarda, Meta Quest Pro'da ise renkli kameralar bulunur.

Sonuçlar

Oculus Quest 2'deki PWA'lar hem eğlenceli hem de umut verici. Kullanıcıların ekranlarını mevcut göreve en uygun şekilde ölçeklendirmelerini sağlayan sonsuz sanal tuval, gelecekte çalışma şeklimizi değiştirme potansiyeli taşıyor. VR'de el izleme ile yazma henüz daha emekleme aşamasında olsa da, en azından benim için henüz çok güvenilir bir şekilde çalışmasa da URL girmek veya kısa metinler yazmak için yeterince iyi çalışıyor.

Oculus Quest 2'deki PWA'ların en sevdiğim yanı, sadece bir tarayıcı sekmesinde veya platforma özgü API'ler olmadan ince bir APK sarmalayıcısı aracılığıyla değiştirilmemiş olarak kullanılabilen normal PWA'lar olmaları. Aynı kodla birden çok platformu hedeflemek hiç bu kadar kolay olmamıştı. İşte sanal gerçeklikte PWA'lar ve web'de artırılmış gerçeklik. Gelecek parlak!

Teşekkür

Flickr'da Maximilian Prandstätter'ın Oculus Quest 2 fotoğrafı. Instagram, Facebook, Oculus Tarayıcı ve Spike uygulamalarının Oculus Store resimlerinin yanı sıra uygulama keşfedilebilirliği görseli ve el izleme animasyonu Meta'nın desteğiyle. Arnau Marín i Puig'in hero resmi. Bu yayın Joe Medley tarafından incelendi.