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.
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 başlığı Oculus Quest'in yeni modelidir. Cihaz, hem dahili Android tabanlı işletim sistemine sahip bağımsız bir başlık olarak hem de USB veya kablosuz ağ üzerinden bağlandığında masaüstü bilgisayarda çalışan Oculus uyumlu VR yazılımıyla çalışabilir. 6 GB RAM'e sahip Qualcomm Snapdragon XR2 çip üzerinde sistem kullanır. Quest 2'nin ekranı, her bir göz için 1.832 × 1.920 piksel çözünürlüğe sahip ve 120 Hz'e kadar yenileme hızında çalışan tek bir hızlı geçişli LCD paneldir.
Oculus Tarayıcı
Şu anda Oculus Quest 2 için üç tarayıcı kullanılabilir: Wolvic, Firefox Reality'nin halefi ve yerleşik Oculus Tarayıcı. Bu makalede ikinci seçenek ele alınmaktadır. Oculus web sitesi, Oculus Tarayıcı'yı aşağıdaki gibi tanıtır.
"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. Günümüzün 2D web siteleri, Chromium oluşturma motoru tarafından desteklendiği için Oculus Tarayıcı'da sorunsuz çalışır. Oculus başlıklar için daha da optimize edilmiştir. Bu sayede en iyi performans elde edilir ve web geliştiricileri, WebXR gibi yeni API'lerle VR'ın tüm potansiyelinden yararlanabilir. WebXR ile web'in bir sonraki sınırının kapılarını açıyoruz."
Kullanıcı aracısı
Tarayıcının kullanıcı aracısı dizesi, bu makalenin yazıldığı sırada 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'u temel alıyor. Bu sürüm, Chrome'un mevcut kararlı sürümü olan 96.0.4664.110'nin yalnızca bir sürüm gerisinde. 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ü (yukarıda gösterilmiştir) aşağıdaki özelliklere sahiptir (soldan sağa üst satır):
- Geri düğmesi
- Yeniden yükle düğmesi
- Site bilgileri
- URL çubuğu
- Yer işareti oluştur düğmesi
- Dar, orta ve geniş seçeneklerinin yanı sıra yakınlaştırma özelliği de bulunan 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 temizle
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 için Oculus Tarayıcı, 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, metinlerin net görünmesi için 1,5 cihaz piksel oranına sahiptir.
Oculus Tarayıcı ve Oculus Store'daki PWA'lar
28 Ekim 2021'de Meta'da (Oculus) Ürün Yönetimi Lideri olan Jacob Rossi, Oculus Quest ve Oculus Quest 2'ye PWA'ların geleceğini paylaştı. Aşağıda, Oculus'taki PWA deneyimini açıklıyor ve Oculus Quest 2'de PWA'nızı nasıl oluşturacağınızı, dışarıdan yükleyeceğinizi ve test edeceğinizi anlatıyorum.
Durum paylaşımı
Giriş durumu Oculus Tarayıcı ve PWA'lar arasında paylaşılarak kullanıcıların ikisi arasında otomatik geçiş yapmasına olanak tanır. Doğal olarak Facebook Girişi kutudan çıktığı haliyle desteklenir. Oculus Tarayıcı, kullanıcıların şifrelerini tarayıcı ile 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 klavyeler ile el takibiyle kontrol edilebilir. Kaydırma işlemi, Oculus kumandalarındaki kontrol çubukları kullanılarak veya başparmak ile işaret parmağı birleştirilip istenen yöne hareket ettirilerek yapılır. Kullanıcı, bir öğeyi seçmek için işaret edip parmaklarını birleştirebilir.
PWA'lar için izinler
Oculus Tarayıcı'daki izinler, Chrome'dakilerle 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 isteme işlemi başarılı olsa da cihaz hiçbir zaman konum bilgisi almaz. Benzer şekilde, WebHID, Web Bluetooth gibi çeşitli donanım API'leri de özellik algılamayı geçer ancak kullanıcının Oculus'u bir donanım cihazıyla eşlemesine olanak tanıyan bir seçici göstermez. Tarayıcı olgunlaştıkça API'lerin özellik algılanabilirliğinin iyileştirileceğini düşünüyorum.
Chrome Geliştirici Araçları ile PWA'larda 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.
- Oculus cihazda, Oculus Tarayıcı'da istediğiniz siteye gidin.
- Bilgisayarınızda Google Chrome'u başlatın ve
chrome://inspect/#devicesadresine gidin. - Söz konusu Oculus cihazı bulun. Cihazın altında, cihazda açık olan Oculus Tarayıcı sekmeleri gösterilir.
- İstediğiniz Oculus Tarayıcı sekmesinde inspect'i (incele) 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 tarayıcılarda olduğu gibi, yüklü PWA'lar Oculus Tarayıcı'da da bir sekmede çalışan web siteleri olarak çalışır. Kullanıcı bir siteyi ziyaret ettiğinde Oculus Tarayıcı, uygulamanın Oculus Store'da mevcut olması durumunda (ve yalnızca bu durumda) kullanıcının uygulamayı keşfetmesine yardımcı olur. Oculus Tarayıcı, uygulamayı yüklemiş olan kullanıcıların istedikleri takdirde uygulamaya kolayca geçiş yapmalarına yardımcı olur.
Oculus Quest 2'deki örnek PWA'lar
Meta'dan PWA'lar
Birden fazla Meta bölümü, 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 Store'da Oculus Quest 2 için az sayıda PWA bulunuyordu ancak bu sayı artıyor. Spike, kullanıcıların e-posta, sohbet, aramalar, notlar, görevler ve yapılacaklar gibi tüm temel iş araçlarını doğrudan Spike uygulamasındaki sanal bir ortam merkezinde gelen kutularından deneyimlemelerine olanak tanır.
Başka bir örnek de 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.
Facebook'un 2021'deki 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 kullanıma sunulacak.
Oculus için PWA oluşturma
Meta, gerekli adımları belgelerinde açıklamıştır. Genel olarak, Chrome'da yüklenebilen PWA'lar genellikle Oculus'ta kullanıma hazır şekilde çalışır.
Web uygulaması manifesti ş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 getirmez. Başka bir örnek de Chrome'un bir uygulamanın yüklenebilir olması için kesinlikle gerekli kıldığı ancak Oculus'ta isteğe bağlı olan start_url özelliğidir. 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 dosyasındaki eksik parametreleri iletmesine (veya mevcut parametreleri geçersiz kılmasına) olanak tanır.
Oculus, PWA deneyimini özelleştirmek için kullanılabilecek bir dizi isteğe bağlı özel web uygulaması manifesti alanına sahiptir.
Bubblewrap CLI ile PWA'ları paketleme
Bubblewrap, Node.js için açık kaynaklı bir kitaplık seti 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 yüklüyse 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 Derleme Araçları) otomatik olarak indirip yüklemeyi teklif eder.
PWA'nızı sarmalayan Meta Quest uyumlu bir Android projesi oluşturmak için --metaquest işaretiyle init komutunu ç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 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ında yayınlanabilir.
Oculus Platform Yardımcı Programı ile PWA'ları paketleme
Oculus Platform Utility, Oculus Rift ve Meta Quest cihazlar için uygulama yayınlamak üzere Meta tarafından geliştirilen resmi komut satırı aracıdır.
Ayrıca, PWA'ları create-pwa komutuyla Meta Quest cihazlar için paketlemenize ve Meta Quest Store ile App Lab'de yayınlamanıza olanak tanır.
Çıkış dosyası adını -o parametresiyle, Android SDK'nın yolunu ise --android-sdk parametresiyle ayarlayın.
--web-manifest-url parametresini kullanarak aracı web uygulaması manifestinin canlı URL'sine yönlendirin.
Canlı PWA'nızda bir 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.
Manifesti mümkün olduğunca sade bırakmak için manifest dosyasına özel ovr_package_name alanını eklemek yerine, ters alan adı gösteriminde (örneğin, com.company.app.pwa) bir değer içeren --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
Yazarlara göre PWABuilder'ı kullanmak, PWA'ları Meta Quest için paketlemenin en kolay ve bu nedenle önerilen yoludur.
PWABuilder, Microsoft tarafından geliştirilen açık kaynaklı bir projedir. Geliştiriciler bu proje sayesinde PWA'larını paketleyip imzalayarak Microsoft Store, Google Play Store, App Store ve Meta Quest Store gibi çeşitli uygulama mağazalarında yayınlayabilir.
PWABuilder ile PWA'ları paketlemek, 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 PWA'ları Meta Quest cihazlar için paketlerken arka planda hangi aracı kullanacaklarını seçme imkanı sunar.
Oculus Platform Yardımcı Programı'nı kullanmak için Meta Quest seçeneğini belirleyebilirsiniz.
Bubblewrap'i kullanmak için Android seçeneğini belirleyip Meta Quest uyumlu onay kutusunu işaretleyebilirsiniz.
ADB ile PWA yükleme
APK dosyasını oluşturduktan sonra USB veya kablosuz ağ üzerinden ADB'yi kullanarak Meta Quest cihazına dışarıdan yükleyebilirsiniz:
adb install app-release-signed.apk
PWA'ları paketlemek için Bubblewrap CLI kullanıyorsanız APK dosyasını dışarıdan yüklemek için kullanışlı bir takma ad komutu sağlar:
bubblewrap install
Başka cihazdan yüklenen uygulamalar, uygulama çekmecesindeki Bilinmeyen Kaynaklar bölümünde görünür.
Uygulama gönderme
PWA'ları Oculus Store'a yükleme ve gönderme işlemi, Oculus Geliştirici Merkezi belgelerinde ayrıntılı olarak açıklanmıştır.
Geliştiriciler, uygulamalarını Oculus Store'a göndermenin yanı sıra SideQuest gibi platformlar aracılığıyla doğrudan tüketicilere güvenli bir şekilde dağıtabilir ve mağaza onayı gerektirmez. Bu sayede, geliştirme aşamasının başlarında, deneysel 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 oluşturdum. Bu özellikler arasında yeni bir PWA içi sekme açma, mevcut sekmede kalma, yeni bir tarayıcı penceresi açma ve mevcut sekmede kalarak WebView'da açma yer alır. Makinenizde aşağıdaki komutları ç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 videosunu 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şturulan APK dosyasını Google Drive'ımdan indirebilirsiniz: output.apk. Paketi daha ayrıntılı incelemek isterseniz kaynak koduna dönüştürülmüş bir sürüm de var. Derleme talimatlarını package.json adresinde bulabilirsiniz.
Uygulama, Oculus'ta sorunsuz bir şekilde çalışır. Dosyaları açma ve kaydetme özellikleri de kullanılabilir. Oculus Tarayıcı, Dosya Sistemi Erişimi API'sini desteklemez ancak yedek yaklaşım yardımcı olur. Çalışmayan tek şey, iki parmakla yakınlaştırmaydı. Her iki kumandadaki tetik düğmesine basıp kumandaları zıt yönlere hareket ettirerek çalışmasını bekliyordum. Bunun dışında, yerleştirilmiş ekran videosunda da görebileceğiniz gibi her şey performanslı ve duyarlıydı.
Etkileyici 3D WebXR PWA'lar
Oculus Quest'teki 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'da nasıl işlendiğini merak ediyor musunuz?
Immersive Web Working Group'un WebXR Testleri'nden Kullanıcı Aracısı İstemleri testinin ekran videosunu 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, yoğun içerik modundan çıkılmasına neden olur. Bildirimler şu anda desteklenmiyor.
El takibi
WebXR Hand Input API ve Meta'nın yapay zeka tabanlı el takibi sistemi sayesinde yoğun içerik modunda PWA'larla etkileşim kurmak için ellerinizi kullanabilirsiniz.
Immersive Web Working Group'un WebXR Örnekleri'nden El Takibi Örneği'nin ekran videosunu burada bulabilirsiniz.
Artırılmış/karma gerçeklik (Geçiş)
Meta Connect 2022'de duyurulduğu üzere Meta Quest Tarayıcı, Meta Quest 2 ve Meta Quest Pro cihazlarda WebXR Artırılmış Gerçeklik (AR) [Karma Gerçeklik (MR) olarak da bilinir] için destek ekledi.
Şimdi, ölçeği küçültülmüş modeller, gizli gökyüzü ve düzlem içeren, artırılmış gerçeklik için biraz değiştirilmiş bir A-Frame başlangıç örneğine bakalım.
A-Frame, tamamen okunması, anlaşılması ve kopyalanıp yapıştırılması kolay, açıklayıcı, yeniden kullanılabilir özel HTML öğelerinden 3D/VR/AR deneyimleri oluşturmak için kullanılan açık kaynaklı bir web çerçevesidir.
Meta Quest 2'deki bu demonun ekran kaydını burada bulabilirsiniz.
Meta Quest 2'de monokrom kameralar bulunduğundan geçiş gri tonlamalıdır. Meta Quest Pro'da ise renkli kameralar bulunur.
Sonuçlar
Oculus Quest 2'deki PWA'lar çok eğlenceli ve gelecek vadediyor. 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. VR'da el takibiyle yazma özelliği henüz başlangıç aşamasında ve en azından benim için henüz çok güvenilir bir şekilde çalışmıyor olsa da URL girmek veya kısa metinler yazmak için yeterince iyi çalışıyor.
Oculus Quest 2'deki PWA'ların en sevdiğim özelliği, tarayıcı sekmesinde veya platforma özel API'ler olmadan ince bir APK sarmalayıcı aracılığıyla değiştirilmeden kullanılabilen normal PWA'lar olmasıdır. Aynı kodla birden fazla platformu hedeflemek hiç bu kadar kolay olmamıştı. Web'de VR ve AR'da PWA'lar kullanmaya başlayabilirsiniz. Gelecek parlak.
Onaylar
Oculus Quest 2 fotoğrafı: Maximilian Prandstätter, Flickr. Instagram, Facebook, Oculus Browser ve Spike uygulamalarının Oculus Store görselleri ile uygulama keşfedilebilirliği resmi ve el takibi animasyonu Meta'nın izniyle kullanılmıştır. Bu yayın Joe Medley tarafından incelenmiştir.