Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. עכשיו מפתחים יכולים לפתח ולהפיץ אפליקציות Progressive Web App בדו-ממד ובתלת-ממד (PWA) תוך שימוש בתכונת ריבוי המשימות של Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. הוא מחליף את משקפי ה-Oculus הקודמים של החברה, Quest. המכשיר יכול לפעול גם כקסדה עצמאית עם מערכת הפעלה פנימית מבוססת-Android, וגם עם תוכנת VR תואמת Oculus שפועלת במחשב שולחני כשמחברים אותו באמצעות USB או Wi-Fi. הוא משתמש במערכת Snapdragon XR2 של Qualcomm על שבב עם זיכרון RAM בנפח 6GB. המסך של Quest 2 הוא מסך LCD יחיד עם חיבור מהיר, עם רזולוציה של 1,832 × 1,920 פיקסלים לכל עין, שמופעלת בקצב רענון של עד 120 Hz.
הדפדפן של Oculus
כרגע יש שלושה דפדפנים למשקפי Oculus Quest 2: Wolvic, שמחליף את Firefox Reality ודפדפן Oculus המובנה. המאמר הזה מתמקד בנושא השני. באתר Oculus מוצג דפדפן Oculus באופן הבא.
"Oculus Browser תומך בסטנדרטים העדכניים ביותר של האינטרנט ובטכנולוגיות אחרות, כדי לעזור לכם ליצור חוויות VR באינטרנט. דפי האינטרנט הדו-ממדיים של היום פועלים מצוין בדפדפן Oculus כי הוא מופעל על ידי מנוע הרינדור של Chromium. היא עברה אופטימיזציה נוספת לאוזניות Oculus כדי לקבל את הביצועים הטובים ביותר וכדי לאפשר למפתחי אתרים לנצל את מלוא הפוטנציאל של VR באמצעות ממשקי API חדשים, כמו WebXR. באמצעות WebXR, אנחנו פותחים את הדלתות לגבולות הבאים של האינטרנט".
סוכן משתמש
זוהי מחרוזת סוכן המשתמש של הדפדפן בזמן הכתיבה.
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
כמו שאפשר לראות, הגרסה הנוכחית 18.1.0.2.46.337441587
של דפדפן Oculus מבוססת על Chrome 95.0.4638.74
, שהיא רק גרסה אחת שעומדת מאחורי הגרסה היציבה הנוכחית של Chrome, שהיא 96.0.4664.110
. אם המשתמש עובר למצב לנייד, הערך של VR
משתנה ל-Mobile VR
.
ממשק משתמש
בממשק המשתמש של הדפדפן (שמוצג למעלה) יש את התכונות הבאות (השורה העליונה משמאל לימין):
- לחצן 'הקודם'
- לחצן הרענון
- פרטי אתר
- סרגל כתובות ה-URL
- לחצן ליצירת סימנייה
- שינוי גודל הלחצן עם אפשרויות מצומצמות, בינוניות ורחבות, וגם תכונת זום
- הלחצן 'בקשת אתר שמותאם לנייד'
- לחצן תפריט עם האפשרויות הבאות:
- כניסה למצב פרטי
- סגירת כל הכרטיסיות
- הגדרות
- סימניות
- הורדות
- היסטוריה
- ניקוי נתוני גלישה
השורה התחתונה כוללת את התכונות הבאות:
- לחצן סגירה
- לחצן מזעור
- לחצן שלוש הנקודות עם האפשרויות 'הקודם', 'הבא' ו'טעינה מחדש'
קצב רענון ויחס פיקסלים של המכשיר
ב-Oculus Quest 2, הדפדפן של Oculus מבצע רינדור של תוכן דפי אינטרנט 2D ושל WebXR בקצב רענון של 90 Hz. כשצופים במדיה במסך מלא, דפדפן Oculus מבצע אופטימיזציה של קצב הרענון של המכשיר בהתאם לקצב הפריימים של הסרטון. לדוגמה, 24 FPS. ב-Oculus Quest 2 יש יחס פיקסלים של 1.5 במכשיר, שמאפשר להציג טקסט חד.
אפליקציות PWA בדפדפן Oculus וב-Oculus Store
ב-28 באוקטובר 2021, ג'ייקוב רוסי (Jacob Rossi), מנהל מוצרים ב-Meta (Oculus), שיתף שהתכונה אפליקציות אינטרנט דינמיות (PWA) תגיע למכשירי Oculus Quest ו-Oculus Quest 2. בהמשך, אתאר את חוויית ה-PWA ב-Oculus ואסביר איך לפתח, לבצע התקנה ממקור לא ידוע ולבדוק את ה-PWA שלך ב-Oculus Quest 2.
שיתוף מצב
מצב ההתחברות משותף בין דפדפן Oculus לאפליקציות PWA, ומאפשר למשתמשים לעבור ביניהם בצורה חלקה. כמובן, יש תמיכה מובנית ב-Facebook Login. הדפדפן של Oculus כולל מנהל סיסמאות שמאפשר למשתמשים לאחסן ולשתף את הסיסמאות שלהם באופן מאובטח בין הדפדפן לבין חוויית השימוש באפליקציות המותקנות.
גדלים של חלונות ב-PWA
המשתמש יכול לשנות את הגודל של חלונות הדפדפן ושל חלונות של אפליקציות PWA מותקנות. הגובה יכול לנוע בין 625 פיקסלים ל-1,200 פיקסלים. אפשר להגדיר רוחב בין 400 ל-2,000 פיקסלים. המימדים שמוגדרים כברירת מחדל הם 1,000 × 625 פיקסלים.
אינטראקציה עם אפליקציות PWA
אפשר לשלוט באפליקציות PWA באמצעות השלטים השמאליים והימניים של Oculus, עכברים ומקלדות בחיבור Bluetooth, וגם באמצעות מעקב ידני. אפשר לגלול באמצעות מקשי ה-Thumbstick בפקדים של Oculus, או באמצעות צביטה בין האגודל לאצבע המורה והזזה בכיוון הרצוי. כדי לבחור משהו, המשתמש יכול להצביע ולצבוט.
הרשאות לאפליקציות PWA
ההרשאות בדפדפן Oculus פועלות פחות או יותר ב-Chrome. המצב משותף בין אפליקציות שפועלות בדפדפן לבין אפליקציות PWA מותקנות, כך שמשתמשים יכולים לעבור בין שני חוויות השימוש בלי לתת שוב את אותן הרשאות.
יש הרבה הרשאות שמוטמעות, אבל לא כל התכונות נתמכות. לדוגמה, יכול להיות שהבקשה להרשאת המיקום הגיאוגרפי תאושר, אבל המכשיר לא יקבל מיקום בפועל. באופן דומה, ממשקי ה-API השונים של החומרה, כמו WebHID, Web Bluetooth וכו', עוברים את זיהוי התכונות, אבל לא מציגים בעצם בורר שמאפשר למשתמש להתאים את Oculus למכשיר חומרה. אני מניח שהיכולת לזהות תכונות של ממשקי API תשתפר ככל שהדפדפן יהיה מפותח יותר.
ניפוי באגים באפליקציות PWA באמצעות כלי הפיתוח ל-Chrome
אחרי הפעלת מצב פיתוח, ניפוי באגים באפליקציות PWA ב-Oculus Quest 2 פועל בדיוק כמו שמתואר במכשירי Android לניפוי באגים מרחוק.
- במכשיר Oculus, מנווטים לאתר הרצוי בדפדפן Oculus.
- צריך להפעיל את Google Chrome במחשב ולנווט אל
chrome://inspect/#devices
. - מאתרים את מכשיר Oculus הרלוונטי, ואחריו קבוצת כרטיסיות Oculus בדפדפן פתוחות כרגע במכשיר.
- לוחצים על בדיקה בכרטיסייה הרצויה בדפדפן Oculus.
חשיפת אפליקציות
אנשים יכולים להשתמש בדפדפן עצמו או ב-Oculus Store כדי לגלות אפליקציות PWA. כמו בכל דפדפן אחר, אפליקציות PWA מותקנות פועלות גם בדפדפן Oculus כאתרים שפועלים בכרטיסיות. כשמשתמש מבקר באתר, דפדפן Oculus יעזור לו לגלות את האפליקציה אם היא זמינה ב-Oculus Store (ורק אם). משתמשים שכבר התקינו את האפליקציה יוכלו לעבור אליה בקלות באמצעות דפדפן Oculus, אם הם ירצו.
דוגמאות לאפליקציות PWA ב-Oculus Quest 2
אפליקציות PWA של Meta
כמה מחלקות של Meta יצרו אפליקציות PWA ל-Oculus Quest 2, למשל Instagram ו-Facebook. אפליקציות ה-PWA האלה פועלות בחלונות אפליקציה עצמאיים, ללא שורת כתובת URL, ואפשר לשנות את הגודל שלהם באופן חופשי.
אפליקציות PWA של מפתחים אחרים
נכון לזמן הכתיבה, יש מספר קטן אך הולך וגדל של אפליקציות PWA ל-Oculus Quest 2 בחנות Oculus. Spike מאפשרת למשתמשים ליהנות מכל הכלים החיוניים לעבודה, כמו אימייל, צ'אט, שיחות, הערות, משימות ומשימות לביצוע, מתיבת הדואר הנכנס שלהם במרכז סביבתי וירטואלי באפליקציית Spike.
דוגמה נוספת היא Smartsheet, סביבת עבודה דינמית שמאפשרת לנהל פרויקטים, להשתמש בתהליכי עבודה אוטומטיים וליצור פתרונות חדשים במהירות.
בקרוב נוסיף עוד אפליקציות ל-PWA, כמו Slack, Dropbox או Canva, כפי שצוין בסרטון עם Jacob Rossi שפורסם בהקשר של כנס Connect של Facebook בשנת 2021.
יצירת אפליקציות PWA ל-Oculus
Meta פירטה את השלבים הנדרשים במסמכי העזרה שלה. באופן כללי, אפליקציות PWA שאפשר להתקין ב-Chrome אמורות לפעול ב-Oculus ללא צורך בהגדרות נוספות.
הדרישות למניפסט של אפליקציית אינטרנט
יש כמה הבדלים חשובים בהשוואה לקריטריונים של Chrome להתקנה ולמפרט של Web App Manifest. לדוגמה, Oculus תומך כרגע רק בשפות שכותבים בהן מימין לשמאל, בעוד שבמפרט של Web App Manifest אין אילוצים כאלה. דוגמה נוספת היא start_url
, ש-Chrome מחייב להופיע כדי שאפשר יהיה להתקין אפליקציה, אבל ב-Oculus הוא אופציונלי. Oculus מציעה כלי בשורת הפקודה שמאפשר למפתחים ליצור אפליקציות PWA ל-Oculus Quest 2. הכלי מאפשר להעביר את הפרמטרים החסרים (או לשנות את הפרמטרים הקיימים) במניפסט של אפליקציית האינטרנט.
ב-Oculus יש כמה שדות אופציונליים קנייניים במניפסט של אפליקציית אינטרנט, שבהם אפשר להשתמש כדי להתאים אישית את חוויית ה-PWA.
אריזת אפליקציות PWA באמצעות CLI של בועות
Bubblewrap הוא קבוצה של ספריות בקוד פתוח וכלי שורת פקודה (CLI) ל-Node.js. Bubblewrap הוא כלי שפותח על ידי צוות Google Chrome כדי לעזור למפתחים ליצור, לפתח ולחתום על פרויקט Android שמפעיל את אפליקציית ה-PWA שלכם כפעילות אינטרנט מהימנה (TWA).
דפדפן Meta Quest לא תומך כרגע ב-TWA באופן מלא, אבל החל מגרסה 1.18.0, חבילה של בועות תומכת באפליקציות PWA באריזה של מכשירי Meta Quest.
הוא יכול ליצור קובצי APK אוניברסליים שפותחים TWA במכשירי Android רגילים ואת דפדפן Meta Quest במכשירי Meta Quest.
בהנחה ש-Node.js מותקן, אפשר להתקין את Bubblewrap CLI באמצעות הפקודה הבאה:
npm i -g @bubblewrap/cli
כשמריצים את Bubblewrap בפעם הראשונה, המערכת מציעה להוריד ולהתקין באופן אוטומטי את יחסי התלות החיצוניים הנדרשים – Java Development Kit (JDK) ו-Android SDK Build Tools.
כדי ליצור פרויקט Android תואם ל-Meta Quest שמארז את ה-PWA, מריצים את הפקודה init
עם הדגל --metaquest
ופועלים לפי האשף:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
אחרי שיוצרים את הפרויקט, צריך לבנות אותו ולחתום עליו באמצעות הפקודה:
bubblewrap build
הפקודה הזו תפיק קובץ בשם app-release-signed.apk
. אפשר להתקין את הקובץ הזה במכשיר או לפרסם אותו ב-Meta Quest Store, ב-Google Play Store או בכל פלטפורמה אחרת להפצת אפליקציות ל-Android.
אריזה של אפליקציות PWA באמצעות Oculus Platform Utility
Oculus Platform Utility הוא הכלי הרשמי בשורת הפקודה שפותח על ידי Meta לפרסום אפליקציות למכשירי Oculus Rift ו-Meta Quest.
הוא גם מאפשר לארוז אפליקציות PWA למכשירי Meta Quest באמצעות הפקודה create-pwa
ולפרסם אותן ב-Meta Quest Store וב-App Lab.
מגדירים את שם קובץ הפלט באמצעות הפרמטר -o
ואת הנתיב ל-Android SDK באמצעות הפרמטר --android-sdk
.
מפנים את הכלי לכתובת ה-URL הפעילה של המניפסט של אפליקציית האינטרנט באמצעות הפרמטר --web-manifest-url
.
אם אין לכם מניפסט ב-PWA הפעיל או שאתם רוצים לשנות את המניפסט הפעיל, עדיין תוכלו ליצור קובץ APK ל-PWA באמצעות קובץ מניפסט מקומי והפרמטר --manifest-content-file
.
כדי שהמניפסט יהיה פשוט ככל האפשר, מומלץ להשתמש בפרמטר --package-name
עם ערך בסימן ההפוך של שם הדומיין (למשל, com.company.app.pwa
), במקום להוסיף למניפסט את השדה הקנייני ovr_package_name
.
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 באמצעות PWABuilder
לדעת המחברים, השימוש ב-PWABuilder הוא הדרך הקלה ביותר, ולכן המומלצת, לאריזת אפליקציות PWA ל-Meta Quest כרגע.
PWABuilder הוא פרויקט קוד פתוח שפותח על ידי Microsoft, ומאפשר למפתחים לארוז ולחתום על אפליקציות ה-PWA שלהם כדי לפרסם אותן בחנויות שונות, כולל Microsoft Store, Google Play Store, App Store ו-Meta Quest Store.
כדי לארוז אפליקציות PWA באמצעות PWABuilder, פשוט מזינים את כתובת ה-URL של אפליקציית ה-PWA, מזינים או עורכים את המטא-נתונים של האפליקציה ולוחצים על הלחצן Generate.
PWABuilder מאפשר למפתחים לבחור באיזה כלי להשתמש כדי לארוז אפליקציות PWA למכשירי Meta Quest.
אפשר לבחור באפשרות Meta Quest כדי להשתמש בכלי הפלטפורמה של Oculus.
כדי להשתמש ב-Bubblewrap, בוחרים באפשרות Android ומסמנים את התיבה Meta Quest compatible.
התקנת אפליקציות PWA באמצעות ADB
אחרי שיוצרים את קובץ ה-APK, אפשר להעביר אותו למכשיר Meta Quest באמצעות ADB דרך USB או Wi-Fi:
adb install app-release-signed.apk
אם אתם משתמשים ב-CLI של Bubblewrap לאריזת PWAs, יש בו פקודה נוחה עם כינוי (alias) להעלאה צדדית של קובץ ה-APK:
bubblewrap install
אפליקציות שהותקנו באופן ידני מופיעות בקטע מקורות לא ידועים במגירת האפליקציות.
שליחת אפליקציה
במאמרים במרכז הפיתוח של Oculus מוסבר בפירוט איך מעלים אפליקציות PWA ושולחים אותן ל-Oculus Store.
בנוסף לשליחת אפליקציות ל-Oculus Store, מפתחים יכולים גם להפיץ את האפליקציות שלהם ישירות לצרכנים בצורה בטוחה ומאובטחת באמצעות פלטפורמות כמו SideQuest, בלי צורך באישור מהחנות. כך הם יכולים להעביר אפליקציה ישירות למשתמשי הקצה, גם אם היא נמצאת בשלב מוקדם של פיתוח, היא ניסיונית או שהיא מיועדת לקהל ייחודי.
בדיקת אפליקציות עם כמה כרטיסיות
כדי לבדוק אפליקציות עם כמה כרטיסיות, יצרתי אפליקציית PWA לבדיקה שממחישה את התכונות השונות של קישורים: פתיחת כרטיסייה חדשה ב-PWA, המשך הגלישה בכרטיסייה הנוכחית, פתיחת חלון דפדפן חדש ופתיחה ב-WebView תוך המשך הגלישה בכרטיסייה הנוכחית. כדי ליצור עותק של האפליקציה שאפשר להתקין באופן מקומי, מריצים את הפקודות הבאות במחשב.
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
הנה סרטון מסך של אפליקציית הבדיקה.
גרסה של Oculus ל-SVGcode
כדי לבדוק את ההוראות, יצרתי גרסה ל-Oculus של אפליקציית ה-PWA האחרונה שלי, SVGcode. אפשר להוריד את קובץ ה-APK שנוצר output.apk
מה-Google Drive שלי. אם תרצה לבדוק את החבילה לעומק, יש לי גם גרסה מפורקת. הוראות ה-build מפורטות במאמר package.json
.
השימוש באפליקציה ב-Oculus תקין, כולל היכולת לפתוח ולשמור קבצים. דפדפן Oculus לא תומך ב-File System Access API, אבל גישת ברירת המחדל עוזרת. הדבר היחיד שלא עבד הוא התכונה 'הגדלת התצוגה באמצעות צביטה'. ציפיתי שהפעולה תתבצע על ידי לחיצה על לחצן ההפעלה בשני השלטים, ואז הזזת השלטים בכיוונים מנוגדים. חוץ מזה, כל השאר היה מהיר ומגיב, כפי שאפשר לראות בסרטון המוטמע.
אפליקציות WebXR מסוג PWA תלת-ממדיות immersive
התמיכה ב-PWA ב-Oculus Quest לא מוגבלת לאפליקציות 2D שטוחות. מפתחים יכולים ליצור חוויות 3D immersive ל-VR באמצעות WebXR API.
תוהים איך מוצגות בקשות שונות (התקנה של אפליקציה לניהול אתר, בקשות הרשאה, התראות) ב-VR, אם בכלל?
הנה סרטון מסך של הבדיקה של הנחיות לסוכני משתמשים מתוך הבדיקות של WebXR של קבוצת העבודה של האינטרנט העשיר.
כפי שאפשר לראות, כדי להיכנס למצב VR צריך את אישור המשתמש. המערכת מבקשת הרשאות פעם אחת לכל מקור. כשמבקשים הרשאות, יוצאים ממצב התצוגה המלאה. בשלב זה אין תמיכה בהתראות.
מעקב אחר תנועות הידיים
אתם יכולים להשתמש בידיים שלכם כדי לבצע פעולות באפליקציות PWA במצב של צפייה היקפית, בעזרת WebXR Handinput API ומערכת מבוססת AI של Meta.
הנה סרטון מסך של דוגמה למעקב אחר תנועות ידיים מתוך דוגמאות WebXR של קבוצת העבודה של האינטרנט העשיר.
מציאות רבודה/משולבת (מעבר)
כפי שפורסם ב-Meta Connect 2022, נוספה תמיכה ב-מציאות רבודה (AR) ב-WebXR, שנקראת גם מציאות משולבת (MR), בדפדפן Meta Quest במכשירי Meta Quest 2 ו-Meta Quest Pro.
בואו נראה דוגמה לתחילת פעולה מ-A-Frame, עם מודלים מוקטנים ושמיים נסתרים ומישור למציאות רבודה.
A-Frame היא מסגרת אינטרנט בקוד פתוח לפיתוח חוויות תלת-ממד/VR/AR מבוססות על רכיבי HTML מותאמים אישית שניתנים לשימוש חוזר וקלים לקריאה, להבנה ולהעתקה והדבקה.
הנה הקלטת מסך של הדגמה הזו ב-Meta Quest 2.
ב-Meta Quest 2 יש מצלמות מונוכרום, ולכן התצוגה של התמונה שחור-לבן. ב-Meta Quest Pro יש מצלמות צבע.
מסקנות
אפליקציות PWA ב-Oculus Quest 2 הן מהנות ומבטיחות מאוד. לקנבס הווירטואלי האינסופי, שמאפשר למשתמשים לשנות את גודל המסך בהתאם למשימה הנוכחית, יש פוטנציאל עצום לשנות את אופן העבודה שלנו בעתיד. אמנם ההקלדה ב-VR באמצעות מעקב אחר הידיים עדיין בתחילת הדרך, ולפחות מבחינתי היא עדיין לא עובדת בצורה מהימנה, אבל היא מספיקה כדי להזין כתובות URL או להקליד טקסטים קצרים.
מה שאני הכי אוהב באפליקציות PWA ב-Oculus Quest 2 הוא שהן פשוט אפליקציות PWA רגילות, שאפשר להשתמש בהן ללא שינוי בכרטיסייה בדפדפן או דרך wrapper של APK דק ללא ממשקי API ספציפיים לפלטפורמה. מעולם לא היה קל יותר לטרגט מספר פלטפורמות עם אותו קוד. שיהיה לכם המון בהצלחה עם אפליקציות PWA ב-VR וב-AR באינטרנט. העתיד ורוד!
תודות
תמונה של Oculus Quest 2 שפורסמה על ידי Maximilian Prandstätter ב-Flickr. התמונות של Oculus Store של האפליקציות Instagram, Facebook, Oculus Browser ו-Spike, וכן האיור של חשיפת האפליקציות והאנימציה של מעקב אחר הידיים באדיבות Meta. התמונה הראשית (Hero) היא של Arnau Marín i Puig. הפוסט הזה נבדק על ידי Joe Medley.