Oculus Quest 2'de PWA'lar

Oculus Quest 2, Meta'nın bir bölümü olan Oculus 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.

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

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

Oculus Tarayıcı

Oculus Quest 2 için şu anda üç tarayıcı kullanılabilir: Firefox Reality'nin halefi olan Wolvic ve yerleşik Oculus Tarayıcı. Bu makalede ikinci seçenek ele alınmaktadır. Oculus web sitesinde, Oculus Tarayıcı'nın tanıtımı aşağıdaki şekilde yapılıyor.

"Oculus Browser, web'de VR deneyimleri oluşturmanıza yardımcı olmak için en yeni web standartlarını ve diğer teknolojileri destekler. Chromium oluşturma motoru tarafından desteklendiği için günümüzün 2D web siteleri Oculus Tarayıcı'da sorunsuz çalışır. Ayrıca, en iyi performansı elde etmek ve web geliştiricilerin WebXR gibi yeni API'lerle VR'ın tüm potansiyelinden yararlanmasını sağlamak için Oculus başlıkları için daha da optimize edilmiştir. WebXR ile web'in bir sonraki sınırına kapıları 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ü 18.1.0.2.46.337441587, Chrome 95.0.4638.74'a dayanmaktadır. Bu sürüm, Chrome'un mevcut kararlı sürümü 96.0.4664.110'dan yalnızca bir sürüm geridedir. Kullanıcı mobil moda 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 (soldan sağa üst satır):

• 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çeneklerin yanı sıra yakınlaştırma özelliği içeren yeniden boyutlandırma 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üçültme düğmesi
• Geri, ileri ve yeniden yükleme seçeneklerini içeren üç nokta düğmesi

Yenileme hızı ve cihaz piksel oranı

Oculus Quest 2'de Oculus Tarayıcı hem 2D web sayfası içeriğini hem de WebXR'ı 90 Hz yenileme hızında oluşturur. Oculus Browser, 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, net metinler için 1,5 cihaz piksel oranına sahiptir.

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

28 Ekim 2021'de Meta (Oculus) Ürün Yönetimi Başkanı Jacob Rossi, Oculus Quest ve Oculus Quest 2'ye PWA'ların geleceğini duyurdu. Aşağıda, Oculus'taki PWA deneyimini açıklıyor ve Oculus Quest 2'de PWA'nızı nasıl oluşturacağınızı, yan yükleyeceğinizi ve test edeceğinizi anlatıyorum.

Oyun İçi Durum Paylaşımı

Oturum açma durumu, Oculus Tarayıcı ile PWA'lar arasında paylaşılır. Böylece kullanıcılar ikisi arasında sorunsuz bir şekilde geçiş yapabilir. Facebook ile giriş özelliği, kutudan çıktığı haliyle desteklenir. Oculus Tarayıcı, kullanıcıların şifrelerini tarayıcı ve yüklü uygulama deneyimleri arasında güvenli bir şekilde saklamasına ve 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 piksel 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 kurma

PWA'lar; Oculus sol ve sağ kumandaları, Bluetooth fareler ve klavyelerle ve el takibiyle kontrol edilebilir. Kaydırma işlemi, Oculus kumandalarındaki başparmak çubukları veya başparmak ile işaret parmağını sıkıştırıp istenen yönde hareket ettirerek yapılır. Kullanıcı, bir öğeyi seçmek için işaret edip parmağını kıstırabilir.

PWA'lar için izinler

Oculus Tarayıcı'daki izinler, Chrome'daki izinlerle neredeyse aynı şekilde çalışır. Durum, tarayıcıda çalışan uygulamalar ve yüklenen PWA'lar arasında paylaşıldığı için 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ği başarılı olsa da cihaz hiçbir zaman konum bilgisi almaz. Benzer şekilde, WebHID ve Web Bluetooth gibi çeşitli donanım API'leri özellik algılamayı geçiyor ancak kullanıcının Oculus'u bir donanım cihazıyla eşleştirmesine olanak tanıyan bir seçici göstermiyor. Tarayıcı olgunlaştıkça API'lerin özelliklerinin tespit edilebilirliğinin iyileştirileceğini tahmin ediyorum.

Chrome Geliştirici Araçları ile progresif web uygulamalarında hata ayıklama

Geliştirici Modu'nu 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 çalışır.

1. Oculus cihazda, Oculus Tarayıcı'da istediğiniz siteye gidin.
2. Bilgisayarınızda Google Chrome'u başlatın ve chrome://inspect/#devices simgesine gidin.
3. Söz konusu Oculus cihazını bulun. Bu cihazı, cihazda şu anda açık olan bir dizi Oculus Tarayıcı sekmesi takip eder.
4. İstediğiniz Oculus Tarayıcı sekmesinde incele'yi tıklayın.

Uygulama keşfi

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üklenen PWA'lar Oculus Tarayıcı'da da sekmede çalışan web siteleri olarak çalışır. Bir kullanıcı bir siteyi ziyaret ettiğinde Oculus Tarayıcı, Oculus Store'da mevcutsa (ve yalnızca bu durumda) uygulamayı keşfetmesine yardımcı olur. Uygulamayı yüklemiş olan kullanıcılar, isterlerse Oculus Tarayıcı'yı kullanarak uygulamaya kolayca geçiş yapabilir.

Oculus Quest 2'deki örnek PWA'lar

Meta'nın PWA'ları

Meta'nın çeşitli bölümleri, Oculus Quest 2 için PWA'lar oluşturdu. Örneğin, Instagram ve Facebook. 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 Quest 2 için Oculus Store'da az sayıda ancak giderek artan sayıda PWA bulunuyordu. Spike, kullanıcıların e-posta, sohbet, görüşme, notlar, görevler ve yapılacaklar listesi gibi tüm temel iş araçlarını Spike uygulamasındaki sanal ortam merkezinde, gelen kutularından deneyimlemelerine olanak tanır.

Bir diğer örnek ise 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'tir.

2021'de Facebook'un Connect konferansı kapsamında yayınlanan ve Jacob Rossi'nin yer aldığı bir videoda belirtildiği gibi Slack, Dropbox veya Canva gibi daha fazla PWA geliyor.

Oculus için PWA oluşturma

Meta, gerekli adımları belgelerinde belirtmiştir. Genel olarak, Chrome'a yüklenebilen PWA'lar genellikle Oculus'ta kutudan çıkarıldığı gibi çalışır.

Web uygulaması manifest dosyası şartları

Chrome'un yüklenebilirlik ölçütleri ve Web Uygulaması Manifesti 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ı Manifesti spesifikasyonu bu tür kısıtlamaları zorunlu kılmaz. Başka bir örnek de start_url. Chrome, bir uygulamanın yüklenebilmesi için bu özelliğin kesinlikle kullanılmasını zorunlu tutar ancak Oculus'ta bu özellik isteğe bağlıdır. Oculus, geliştiricilerin Oculus Quest 2 için PWA oluşturmalarına olanak tanıyan bir komut satırı aracı sunar. Bu araç, geliştiricilerin Web Uygulaması Manifesti'nde eksik parametreleri iletmelerine (veya mevcut parametreleri geçersiz kılmalarına) olanak tanır.

Oculus, PWA deneyimini özelleştirmek için kullanılabilecek bir dizi isteğe bağlı tescilli Web Uygulaması Manifest alanı sunar.

Bubblewrap CLI ile PWA'ları paketleme

Bubblewrap, Node.js için açık kaynaklı bir kitaplıklar grubu ve komut satırı aracıdır (CLI). 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 desteklememektedir ancak 1.18.0 sürümünden itibaren Bubblewrap, Meta Quest cihazlar için PWA'ları paketlemeyi desteklemektedir.

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

Node.js'nin yüklü olduğunu varsayarsak Bubblewrap CLI aşağıdaki komutla yüklenebilir:

npm i -g @bubblewrap/cli

Bubblewrap'ı ilk kez çalıştırdığınızda, 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ı takip edin:

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

Proje oluşturulduktan sonra aşağıdaki komutu çalıştırarak projeyi oluşturun 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ında yayınlanabilir.

Oculus Platform Utility ile PWA'ları paketleme

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

Ayrıca, create-pwa komutuyla Meta Quest cihazları için PWA'ları paketlemeye ve bunları Meta Quest Mağazası ile App Lab'de yayınlamaya da olanak tanır.

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

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

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

Manifest dosyasını mümkün olduğunca sade tutmak için, tescilli ovr_package_name alanını manifest dosyasına eklemek yerine --package-name parametresini ters alan adı gösteriminde bir değerle (ör. com.company.app.pwa) 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, PWABuilder'ı kullanmanın şu anda Meta Quest için PWA'ları paketlemenin en kolay ve bu nedenle önerilen yolu olduğunu düşünüyor.

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

PWABuilder ile PWA'ları paketlemek için PWA'nın URL'sini girmeniz, uygulamanın meta verilerini girmeniz/düzenlemeniz ve Oluştur düğmesini tıklamanız yeterlidir.

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

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

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

ADB ile PWA yükleme

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

adb install app-release-signed.apk

PWA'ları paketlemek için Bubblewrap KSA'yı kullanıyorsanız APK dosyasını yan yüklemek için uygun bir takma ad komutu sağlar:

bubblewrap install

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

Uygulama gönderme

Oculus Store'a PWA yükleme ve gönderme süreci, Oculus Developer Center belgelerinde ayrıntılı olarak açıklanmaktadır.

Geliştiriciler, uygulamalarını Oculus Store'a göndermenin yanı sıra SideQuest gibi platformlar aracılığıyla da doğrudan tüketicilere güvenli bir şekilde dağıtabilir ve mağaza onayı gerekmez. Bu sayede, geliştirme sürecinin başlarında olsa, deneysel olsa veya benzersiz bir kitleye yönelik olsa bile uygulamayı doğrudan son kullanıcılara ulaştırabilirler.

Ç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. Bu özellikler arasında yeni bir uygulama içi sekme açma, mevcut sekmede kalma, yeni bir tarayıcı penceresi açma ve mevcut sekmede kalırken WebView'da açma yer alıyor. 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ını burada bulabilirsiniz.

SVGcode'un Oculus sürümü

Talimatları denemek için en son PWA'm olan SVGcode'un Oculus sürümünü oluşturdum. Oluşan APK dosyasını output.apk Google Drive'ım bölümünden indirebilirsiniz. Paketi daha ayrıntılı bir şekilde incelemek isterseniz derlenmemiş bir sürüm de mevcut. Derleme talimatlarını package.json adresinde bulabilirsiniz.

Dosyaları açma ve kaydetme özelliği de dahil olmak üzere, uygulamayı Oculus'ta kullanmak sorunsuz çalışır. Oculus Tarayıcı, File System Access API'yi desteklemez ancak yedek yaklaşım yardımcı olur. Çalışmayan tek şey, parmakla yakınlaştırma işleviydi. Her iki kumandadaki tetik düğmesine basıp kumandaları zıt yönlerde hareket ettirerek çalışmasını bekliyordum. Bunun dışında, yerleştirilmiş ekran kaydında da görebileceğiniz gibi her şey performanslı ve duyarlıydı.

Immersive 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 yoğun 3D deneyimler oluşturabilir.

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

Immersive Web Working Group'un WebXR Tests'indeki User Agent Prompts testinin ekran kaydını burada bulabilirsiniz.

Gördüğünüz gibi, VR moduna girmek için kullanıcının izni gerekir. İzinler kaynak başına bir kez istenir. İzin isteme işlemi, tam ekran modundan çıkılmasına neden olur. Bildirimler şu anda desteklenmemektedir.

El takibi

WebXR Hand Input API ve Meta'nın yapay zeka tabanlı el takibi sistemi sayesinde ellerinizi kullanarak etkileyici moddaki PWA'larla etkileşim kurabilirsiniz.

Immersive Web Working Group'un WebXR Samples'ındaki Hand Tracking Sample'ın ekran kaydını burada bulabilirsiniz.

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

Meta Connect 2022'de duyurulduğu gibi, 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) desteği ekledi.

Artırılmış gerçeklik için ölçekleri küçültülmüş modellerin ve gizli gökyüzü ile düzlemin bulunduğu, biraz değiştirilmiş bir A-Frame başlangıç örneğini inceleyelim.

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

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

Meta Quest 2'de tek renkli kameralar bulunur. Bu nedenle, geçiş modu gri tonlamalıdır. Meta Quest Pro'da ise renkli kameralar bulunur.

Sonuçlar

Oculus Quest 2'deki PWA'lar hem çok eğlenceli hem de umut verici. Kullanıcıların ekranlarını mevcut göreve en uygun şekilde ölçeklendirmelerine olanak tanıyan sonsuz sanal tuval, gelecekte çalışma şeklimizi değiştirme konusunda büyük bir potansiyele sahip. El takibiyle VR'da yazma özelliği henüz geliştirme aşamasında 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'larla ilgili en çok beğendiğim şey, platforma özgü API'ler olmadan, tarayıcı sekmesinde veya ince bir APK sarmalayıcı 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'de PWA'lar Gelecek parlak!

Teşekkür

Oculus Quest 2 fotoğrafı: Maximilian Prandstätter, Flickr. Meta'nın izniyle Instagram, Facebook, Oculus Browser ve Spike uygulamalarının Oculus Store resimleri, uygulama keşfedilebilirliği resmi ve el takibi animasyonu. Arnau Marín i Puig tarafından oluşturulan lokomotif resim. Bu yayın, Joe Medley tarafından incelendi.