Oculus Quest 2'de PWA'lar

Oculus Quest 2, Meta'nın bir bölümü olan Oculus tarafından geliştirilmiş 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 Progressive Web Uygulamaları (PWA) oluşturabilir ve dağıtabilir.

Alexey Rodionov

Thomas Steiner

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. Şirketin önceki kulaklığı Oculus Quest'in halefidir. Cihaz, hem dahili Android tabanlı işletim sistemine sahip bağımsız bir kulaklık olarak hem de USB veya kablosuz ağ üzerinden bağlandığında masaüstü bilgisayarda Oculus uyumlu VR yazılımıyla çalışabilir. 6 GB RAM'e sahip bir çip üzerinde Qualcomm Snapdragon XR2 sistemi kullanılır. Quest 2'nin ekranı, 120 Hz'e kadar yenileme hızında çalışan, göz başına 1.832 x 1.920 piksel çözünürlüğe sahip tek bir hızlı anahtar LCD paneldir.

Oculus Tarayıcı

Oculus Quest 2'de şu anda üç tarayıcı kullanılabilir: Firefox Reality'nin halefi Wolvic ve yerleşik Oculus Tarayıcı. Bu makalede ikinci yöntem ele alınmaktadır. Oculus web sitesi aşağıdaki Oculus Tarayıcısını tanıtmıştır.

"Oculus Tarayıcı, web'de VR deneyimleri oluşturmanıza yardımcı olacak en yeni web standartlarını ve diğer teknolojileri destekler. Chromium oluşturma motoruyla desteklenen Oculus Tarayıcı, günümüzün 2D web sitelerini mükemmel bir şekilde görüntüler. En iyi performansı elde etmek ve web geliştiricilerinin WebXR gibi yeni API'lerle sanal gerçekliğin tam potansiyelinden yararlanmalarını sağlamak için Oculus başlıklar için daha da optimize edilmiştir. WebXR sayesinde web'in yeni sınırlarının kapılarını açıyoruz."

Kullanıcı aracısı

Tarayıcının yazım sırasındaki 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ü 18.1.0.2.46.337441587, Chrome 95.0.4638.74'a dayanır. Bu sürüm, Chrome'un mevcut kararlı sürümünden (96.0.4664.110) yalnızca bir sürüm geridedir. Kullanıcı mobil moduna geçerse VR, Mobile VR olarak değişir.

Kullanıcı arayüzü

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

• Geri düğmesi
• Yeniden yükle düğmesi
• Site bilgileri
• URL çubuğu
• Yer işareti oluştur düğmesi
• Yakınlaştırma özelliğinin yanı sıra dar, orta ve geniş seçenekleri içeren yeniden boyutlandır düğmesi
• Mobil web sitesi iste düğmesi
• Aşağıdaki seçenekleri içeren menü düğmesi:
  • Gizli moda girme
  • Tüm sekmeleri kapat
  • Ayarlar
  • Yer işaretleri
  • İndirilenler
  • Geçmiş
  • 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çeneklerini içeren üç nokta düğmesi

Yenileme hızı ve cihaz piksel oranı

Oculus Browser, Oculus Quest 2'de 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 (ör. 24 fps) göre optimize eder. Oculus Quest 2'nin net metin için cihaz piksel oranı 1,5'tir.

Oculus Tarayıcı ve Oculus Mağazası'ndaki PWA'lar

Meta'nın (Oculus) Ürün Yönetimi Müdürü Jacob Rossi, 28 Ekim 2021'de Oculus Quest ve Oculus Quest 2'de PWAs'ın kullanıma sunulacağını paylaştı. Aşağıda, Oculus'taki PWA deneyimini ve PWA'nızı Oculus Quest 2'de nasıl oluşturacağınızı, harici olarak yükleyeceğinizi ve test edeceğinizi açıklayacağız.

Durum paylaşımı

Oturum açma durumu, Oculus Tarayıcı ile PWA'lar arasında paylaşılır. Bu sayede kullanıcılar iki tarayıcı arasında sorunsuz bir şekilde geçiş yapabilir. Doğal olarak, Facebook girişi hemen kullanıma hazır olarak desteklenir. Oculus Tarayıcı, kullanıcıların şifrelerini tarayıcı ile yüklü uygulama deneyimleri arasında güvenli bir şekilde depolayıp paylaşmasına olanak tanıyan bir şifre yöneticisi içerir.

PWA pencere boyutları

Tarayıcı pencereleri ve yüklü PWA'ların pencereleri kullanıcı tarafından serbestçe yeniden boyutlandırılabilir. Yükseklik 625 ila 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şimde bulunma

PWA'lar, Oculus sol ve sağ kumandaları, Bluetooth fareler ve klavyeler ve el takibi ile kontrol edilebilir. Kaydırma işlevi, Oculus kumandalarındaki baş parmak çubuklarıyla veya başparmak ve işaret parmağınız sıkıştırılıp istenen yöne doğru hareket ettirilerek yapılır. Kullanıcı, bir öğeyi seçmek için parmağını ekrana doğru uzatıp iki parmağını yakınlaştırabilir.

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

Oculus Tarayıcı'daki izinler, Chrome'dakiyle hemen hemen aynı şekilde çalışı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 izni isteğinde bulunulduğunda izin alınsa bile cihaz hiçbir zaman konum bilgisi almaz. Benzer şekilde WebHID, Web Bluetooth vb. gibi çeşitli donanım API'lerinin tümü özellik algılamayı geçirir, ancak kullanıcının Oculus'u bir donanım cihazıyla eşlemesine izin verecek bir seçiciyi göstermez. Tarayıcı olgunlaştıkça API'lerin özellik algılanabilirliğinin hassaslaştırılacağını düşünüyorum.

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

Geliştirici modunu etkinleştirdikten sonra, Oculus Quest 2'de PWA'larda hata ayıklama işlemi Android cihazlarda uzaktan hata ayıklama bölümünde açıklandığı şekilde gerçekleşir.

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 açık olan bir dizi Oculus Tarayıcı sekmesi gösterilir.
4. İstediğiniz Oculus Tarayıcı sekmesinde inspect (inceleme) seçeneğini tıklayın.

Uygulama bulunabilirliği

Kullanıcılar, PWA'ları keşfetmek için tarayıcının kendisini veya Oculus Store'u kullanabilir. Diğer tarayıcılarda olduğu gibi, yüklü PWA'lar da Oculus Tarayıcı'da sekmede çalışan web siteleri olarak çalışır. Oculus Tarayıcı, kullanıcılar bir siteyi ziyaret ettiğinde Oculus Mağazası'nda mevcut olan (ve yalnızca mevcut olan) uygulamaları keşfetmelerine yardımcı olur. Uygulamayı yüklemiş olan kullanıcılar, Oculus Tarayıcı'yı kullanarak istedikleri zaman uygulamaya kolayca geçiş yapabilir.

Oculus Quest 2'de örnek PWA'lar

Meta tarafından geliştirilen PWA'lar

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

Diğer geliştiricilerin PWA'ları

Bu makalenin yazıldığı sırada Oculus Store'da Oculus Quest 2 için az sayıda ancak giderek artan sayıda PWA bulunuyor. Spike, kullanıcıların e-posta, sohbet, çağrılar, notlar, görevler ve yapılacak işler gibi tüm gerekli iş araçlarını doğrudan Spike uygulamasındaki sanal bir ortam merkezinde gelen kutularından kullanmalarını sağlar.

Proje yönetimi, otomatik iş akışları ve yeni çözümlerin hızlı bir şekilde oluşturulmasını sağlayan dinamik bir çalışma alanı olan Smartsheet de bu tür bir çözümdür.

Facebook'un 2021'deki Connect konferansı kapsamında yayınlanan ve Jacob Rossi'nin yer aldığı videoda da belirtildiği gibi, Slack, Dropbox veya Canva gibi daha fazla PWA kullanıma sunulacak.

Oculus için PWA'lar oluşturma

Meta, gerekli adımları belgelerinde özetledi. Genel olarak, Chrome'da yüklenebilen PWA'lar Oculus'ta genellikle sorunsuz çalışır.

Web uygulaması manifesti şartları

Chrome'un yüklenebilirlik ölçütleri ve Web Uygulaması Manifest spesifikasyonu arasında bazı önemli farklar vardır. Örneğin, Oculus şu anda yalnızca soldan sağa doğru dilleri desteklemektedir, ancak Web Uygulaması Manifest spesifikasyonunda böyle bir kısıtlama yoktur. start_url de buna örnek verilebilir. Chrome, bir uygulamanın yüklenebilir olması için bu özelliği zorunlu kılar ancak Oculus'ta bu özellik isteğe bağlıdır. Oculus, geliştiricilerin Oculus Quest 2 için PWA oluşturmasına olanak tanıyan bir komut satırı aracı sunar. Bu araç, geliştiricilerin Web Uygulama Manifesti'ndeki eksik parametreleri iletmesine (veya mevcut parametreleri geçersiz kılmasına) olanak tanır.

Oculus, PWA deneyimini özelleştirmek için kullanılabilecek çeşitli isteğe bağlı tescilli web uygulaması manifest alanlarına sahiptir.

Bubblewrap CLI ile PWA'ları paketleme

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

Meta Quest Tarayıcı şu anda TWA'yı tam olarak desteklemiyor ancak 1.18.0 sürümünden itibaren Bubblewrap, Meta Quest cihazlar için PWA'ları paketlemeyi destekliyor.

Normal Android cihazlarda TWA'yı, Meta Quest cihazlarda ise Meta Quest Tarayıcı'yı açan evrensel APK dosyaları oluşturabilir.

Node.js'in yüklü olduğu varsayılarak 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ı (Java Development Kit [JDK] ve Android SDK Build Tools) otomatik olarak indirip yüklemeyi teklif eder.

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ı uygulayın:

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

Proje oluşturulduktan sonra aşağıdakileri çalıştırarak derleyin ve imzalayın:

bubblewrap build

Bu işlem, app-release-signed.apk adlı bir dosya oluşturur. Bu dosya cihaza yüklenebilir veya Meta Quest Store, Google Play Store ya da diğer Android uygulama dağıtım platformlarından herhangi birinde yayınlanabilir.

Oculus Platform Utility ile PWA'ları paketleme

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

Ayrıca, Meta Quest cihazlar için PWA'ların create-pwa komutuyla paketlenmesini ve Meta Quest Store ile App Lab'de yayınlanmasını sağlar.

Çıkış dosyası adını -o parametresi, Android SDK'nın yolunu ise --android-sdk parametresi üzerinden ayarlayın.

--web-manifest-url parametresini kullanarak aracı, web uygulaması manifestinin yayındaki URL'sine yönlendirin.

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

Manifest'i mümkün olduğunca saf tutmak için manifest'e özel ovr_package_name alanını 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

PWABuilder ile PWA'ları paketleme

Yazarların görüşüne göre, PWABuilder'ı kullanmak şu anda Meta Quest için PWA'ları paketlemenin en kolay ve dolayısıyla önerilen yoludur.

PWABuilder, Microsoft tarafından geliştirilen bir açık kaynak projedir. Geliştiricilerin PWA'larını Microsoft Store, Google Play Store, App Store ve Meta Quest Store gibi çeşitli mağazalarda yayınlamak için paketlemelerine ve imzalamalarına olanak tanır.

PWA'ları PWABuilder ile paketlemek, bir PWA'nın URL'sini girmek, uygulamanın meta verilerini girmek/düzenlemek ve Oluştur düğmesini tıklamak kadar kolaydır.

PWABuilder, geliştiricilere Meta Quest cihazlar için PWA'ları paketlemek üzere hangi aracı kullanacaklarını seçme olanağı sunar.

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

Baloncuğunu kullanmak için Android seçeneğini belirleyip Meta Quest uyumlu onay kutusunu işaretleyebilirsiniz.

ADB ile PWA'ları yükleme

APK dosyasını oluşturduktan sonra, USB veya kablosuz bağlantı üzerinden ADB'yi kullanarak Meta Quest cihaza başka cihazdan yükleyebilirsiniz:

adb install app-release-signed.apk

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

bubblewrap install

Yandan yüklenen uygulamalar, uygulama çekmecesinde Bilinmeyen Kaynaklar bölümünde görünür.

Uygulama gönderimi

PWA'ları Oculus Store'a yükleme ve gönderme hakkında ayrıntılı bilgi için Oculus Developer Center dokümanlarını inceleyin.

Geliştiriciler, Oculus Store'a uygulama göndermenin yanı sıra uygulamalarını SideQuest gibi platformlar aracılığıyla da mağaza onayına gerek kalmadan güvenli ve güvenli bir şekilde doğrudan tüketicilere dağıtabilirler. Bu sayede, geliştirmenin ilk aşamalarında olsa, deneysel olsa veya benzersiz bir kitleyi hedeflese bile bir uygulamayı doğrudan son kullanıcılara sunabilirler.

Çok sekmeli uygulamaları test etme

Çok sekmeli uygulamaları test etmek için çeşitli bağlantı özelliklerini gösteren küçük bir test PWA oluşturdum: PWA'da yeni bir sekme açma, mevcut sekmede kalma, yeni bir tarayıcı penceresi açma ve mevcut sekmede kalmaya devam ederek WebView'de 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 kaydı aşağıda verilmiştir.

SVGcode'un Oculus sürümü

Kısa bir deneme yapmak için en yeni 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 ayrıntılı bir şekilde incelemek isterseniz ayrıştırılmış bir sürümü de gönderebilirim. Derleme talimatlarını package.json bölümünde bulabilirsiniz.

Dosya açma ve kaydetme dahil olmak üzere uygulamayı Oculus'ta kullanmak sorunsuzdur. Oculus Tarayıcı, File System Access API'yi desteklemez ancak yedek yaklaşım yardımcı olur. Tek sorun, iki parmak ucunu yakınlaştırmak için yakınlaştırma/uzaklaştırma işlemiydi. Her iki kumandadaki tetik düğmesine basıp kumandayı zıt yönlere hareket ettirerek bu özelliğin çalışacağını umuyordum. Bunun dışında, yerleştirilmiş ekran video kaydında da görebileceğiniz gibi diğer her şey yüksek performanslı 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'yi kullanarak VR için etkileyici 3D deneyimler oluşturabilir.

Çeşitli istemlerin (PWA yükleme, izin istekleri, bildirimler) VR'den nasıl işlendiğini merak ediyor musunuz?

Immersive Web Çalışma Grubu'nun WebXR Testleri'ndeki Kullanıcı Aracı İstemleri testinin ekran kaydı aşağıda verilmiştir.

Gördüğünüz gibi, VR moduna girmek için kullanıcının izni gerekir. İzinler kaynak başına bir kez istenir. İzin isteğinde bulunmak, tam sayfa modundan çıkmanıza neden olur. Bildirimler şu anda desteklenmemektedir.

Elle izleme

WebXR Hand Login API ve Meta'nın yapay zeka tabanlı el izleme sistemi sayesinde yoğun içerik modunda PWA'larla etkileşim kurmak için ellerinizi kullanabilirsiniz.

Immersive Web Çalışma Grubu'nun WebXR Örnekleri'nden El İzleme Örneği'nin ekran kaydı aşağıda verilmiştir.

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

Meta Connect 2022'de duyurulan üzere, Meta Quest Tarayıcı, Meta Quest 2 ve Meta Quest Pro cihazlarda Karma 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çeklendirilmiş modeller ve gizli gökyüzü ve uçak içeren, biraz değiştirilmiş bir A-Frame başlangıç örneğini inceleyelim.

A-Frame, tamamen açık, yeniden kullanılabilir özel HTML öğelerinden 3D/VR/AR deneyimleri oluşturmaya yönelik açık kaynak bir web çerçevesidir. Bu öğeler kolayca okunabilir, anlaşılabilir ve kopyalayıp yapıştırılabilir.

Meta Quest 2'deki bu demonun ekran video kaydını aşağıda bulabilirsiniz.

Meta Quest 2'de tek renkli kameralar bulunduğundan geçiş gri tonlamalı olur. Meta Quest Pro'da ise renkli kameralar bulunur.

Sonuçlar

Oculus Quest 2'de PWA'lar hem eğlenceli hem de çok umut verici. Kullanıcıların ekranlarını mevcut göreve en uygun şekilde ölçeklendirmesine olanak tanıyan sonsuz sanal tuval, gelecekte çalışma şeklimizi değiştirme potansiyeline sahiptir. El izleme özelliğiyle VR'de yazma özelliği henüz yeni kullanıma sunuldu ve en azından benim için henüz çok güvenilir bir şekilde çalışmıyor. Ancak URL girmek veya kısa metinler yazmak için yeterince iyi çalışıyor.

Oculus Quest 2'deki PWA'larda en sevdiğim şey, platforma özgü API'ler olmadan tarayıcı sekmesinde veya ince bir APK sarmalayıcısı aracılığıyla değiştirilmeden kullanılabilen normal PWA'lar olmalarıdır. Aynı kodla birden fazla platformu hedeflemek hiç bu kadar kolay olmamıştı. Web'de VR ve AR'da PWA'ların kullanımına hoş geldiniz. Aydınlık bir gelecek sizi bekliyor!

Teşekkür ederiz

Flickr'daki Maximilian Prandstätter tarafından çekilen Oculus Quest 2 fotoğrafı. Instagram, Facebook, Oculus Browser ve Spike uygulamalarının Oculus Store resimlerinin yanı sıra uygulama bulunabilirliği resmi ve el takibi, Meta'nın izniyle sağlanmıştır. Arnau Marín i Puig'in hero resmi. Bu yayın Joe Medley tarafından incelendi.