Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. מפתחים יכולים עכשיו ליצור ולהפיץ אפליקציות PWA דו-ממדיות ותלת-ממדיות שמנצלות את תכונת הריבוי-משימות של Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 הם משקפי מציאות מדומה (VR) שנוצרו על ידי Oculus, חטיבה של Meta. הוא מחליף את האוזניות הקודמות של החברה, Oculus Quest. המכשיר יכול לפעול גם כאוזניות עצמאיות עם מערכת הפעלה פנימית מבוססת-Android, וגם עם תוכנת VR שתואמת ל-Oculus ופועלת במחשב שולחני כשהוא מחובר באמצעות USB או Wi-Fi. הוא משתמש במערכת Qualcomm Snapdragon XR2 על שבב עם 6 GB של RAM. המסך של Quest 2 הוא פאנל LCD יחיד עם החלפה מהירה, ברזולוציה של 1,832 × 1,920 פיקסלים לכל עין, וקצב רענון של עד 120 Hz.
הדפדפן של Oculus
בשלב הזה יש שלושה דפדפנים שזמינים ל-Oculus Quest 2: Wolvic, שהוא דור המשך של Firefox Reality, ו-Oculus Browser, שהוא דפדפן מובנה. במאמר הזה נתמקד באפשרות השנייה. באתר Oculus מוצג Oculus Browser באופן הבא.
Oculus Browser תומך בסטנדרטים העדכניים ביותר של האינטרנט ובטכנולוגיות אחרות, כדי לעזור לכם ליצור חוויות VR באינטרנט. אתרים דו-ממדיים של היום פועלים מצוין ב-Oculus Browser כי הוא מבוסס על מנוע העיבוד של 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 Browser מבוססת על Chrome 95.0.4638.74, שהיא רק גרסה אחת מאחורי הגרסה היציבה הנוכחית של Chrome, שהיא 96.0.4664.110. אם המשתמש עובר למצב נייד, הסמל VR משתנה לסמל Mobile VR.
ממשק משתמש
ממשק המשתמש של הדפדפן (שמוצג למעלה) כולל את התכונות הבאות (השורה העליונה משמאל לימין):
- הכפתור "הקודם"
- כפתור לטעינה מחדש
- פרטי אתר
- סרגל כתובת ה-URL
- יצירת כפתור לסימנייה
- לחצן לשינוי גודל עם אפשרויות צרות, בינוניות ורחבות, וגם תכונת זום
- הלחצן 'בקשת אתר שמותאם לנייד'
- כפתור התפריט עם האפשרויות הבאות:
- כניסה למצב פרטי
- סגירת כל הכרטיסיות
- הגדרות
- סימניות
- הורדות
- היסטוריה
- ניקוי נתוני גלישה
השורה התחתונה כוללת את התכונות הבאות:
- כפתור הסגירה
- כפתור המזעור
- לחצן שלוש הנקודות עם האפשרויות 'הקודם', 'הבא' ו'טעינה מחדש'
קצב רענון ויחס הפיקסלים של המכשיר
ב-Oculus Quest 2, דפדפן Oculus מעבד תוכן של דפי אינטרנט דו-ממדיים ו-WebXR בקצב רענון של 90 הרץ. כשצופים במדיה במסך מלא, Oculus Browser מבצע אופטימיזציה של קצב הרענון של המכשיר על סמך קצב הפריימים של הסרטון, למשל 24 fps. ל-Oculus Quest 2 יש יחס פיקסלים במכשיר של 1.5, לטקסט חד.
אפליקציות PWA ב-Oculus Browser וב-Oculus Store
ב-28 באוקטובר 2021, ג'ייקוב רוסי, מנהל מוצר ב-Meta (Oculus), הודיע ש-PWA יגיעו אל Oculus Quest ו-Oculus Quest 2. בהמשך, אפרט על חוויית השימוש ב-PWA ב-Oculus ואסביר איך ליצור, להעביר ולבדוק את ה-PWA ב-Oculus Quest 2.
שיתוף מצב
מצב ההתחברות משותף בין Oculus Browser לבין אפליקציות PWA, כך שהמשתמשים יכולים לעבור ביניהם בצורה חלקה. כמובן ש-Facebook Login נתמך מחוץ לקופסה. דפדפן Oculus כולל מנהל סיסמאות שמאפשר למשתמשים לאחסן ולשתף את הסיסמאות שלהם בצורה מאובטחת בין הדפדפן לבין חוויות השימוש באפליקציות המותקנות.
גדלים של חלונות PWA
המשתמש יכול לשנות את הגודל של חלונות הדפדפן ושל חלונות של אפליקציות PWA מותקנות. הגובה יכול להיות בין 625 פיקסלים ל-1,200 פיקסלים. הרוחב יכול להיות בין 400 ל-2,000 פיקסלים. מידות ברירת המחדל הן 1,000 × 625 פיקסלים.
איך יוצרים אינטראקציה עם אפליקציות PWA
אפשר לשלוט ב-PWA באמצעות השלטים הימני והשמאלי של Oculus, עכברים ומקלדות Bluetooth וגם באמצעות מעקב אחרי תנועות הידיים. כדי לגלול, משתמשים במקלות האנלוגיים בבקרי Oculus, או מצמידים את האגודל והאצבע ומזיזים אותם לכיוון הרצוי. כדי לבחור משהו, המשתמש יכול להצביע ולצבוט.
הרשאות לאפליקציות PWA
ההרשאות ב-Oculus Browser פועלות כמעט באותו אופן כמו ב-Chrome. המצב משותף בין אפליקציות שפועלות בדפדפן לבין אפליקציות PWA מותקנות, כך שהמשתמשים יכולים לעבור בין שתי החוויות בלי לתת את אותן הרשאות שוב.
למרות שהרבה הרשאות מיושמות, לא כל התכונות נתמכות. לדוגמה, יכול להיות שהבקשה להרשאת מיקום גיאוגרפי תצליח, אבל המכשיר לא יקבל מיקום בפועל. באופן דומה, ממשקי ה-API השונים של החומרה, כמו WebHID, Web Bluetooth וכו', כולם עוברים את זיהוי התכונות, אבל בפועל לא מציגים כלי לבחירת מכשיר שיאפשר למשתמש לשייך את Oculus למכשיר חומרה. אני מניח שזיהוי התכונות של ממשקי ה-API ישתפר כשהדפדפן יתפתח.
ניפוי באגים באפליקציות PWA באמצעות כלי הפיתוח ל-Chrome
אחרי הפעלת מצב פיתוח, ניפוי באגים באפליקציות PWA ב-Oculus Quest 2 פועל בדיוק כמו שמתואר במאמר ניפוי באגים מרחוק במכשירי Android.
- במכשיר Oculus, גולשים לאתר הרצוי בדפדפן Oculus.
- מפעילים את Google Chrome במחשב ועוברים אל
chrome://inspect/#devices. - מחפשים את מכשיר Oculus הרלוונטי. אחריו יופיעו כמה כרטיסיות של Oculus Browser שפתוחות כרגע במכשיר.
- לוחצים על inspect בכרטיסייה הרצויה ב-Oculus Browser.
גילוי אפליקציות
אנשים יכולים להשתמש בדפדפן עצמו או ב-Oculus Store כדי לגלות אפליקציות PWA. בדומה לכל דפדפן אחר, אפליקציות PWA מותקנות פועלות גם ב-Oculus Browser כאתרים שפועלים בכרטיסייה. כשמשתמש מבקר באתר, דפדפן Oculus עוזר לו לגלות את האפליקציה אם (ורק אם) היא זמינה ב-Oculus Store. משתמשים שכבר התקינו את האפליקציה יוכלו לעבור אליה בקלות באמצעות דפדפן Oculus.
אפליקציות PWA לדוגמה ב-Oculus Quest 2
אפליקציות PWA של Meta
מספר חטיבות של מטא יצרו אפליקציות PWA ל-Oculus Quest 2, למשל אינסטגרם ופייסבוק. אפליקציות ה-PWA האלה פועלות בחלונות אפליקציה עצמאיים שאין בהם סרגל כתובות, ואפשר לשנות את הגודל שלהם באופן חופשי.
אפליקציות PWA של מפתחים אחרים
בזמן כתיבת המאמר הזה, יש מספר קטן אבל גדל של אפליקציות PWA ל-Oculus Quest 2 בחנות Oculus. Spike מאפשר למשתמשים ליהנות מכל כלי העבודה החיוניים כמו אימייל, צ'אט, שיחות, הערות, משימות ורשימות מטלות מתיבת הדואר הנכנס שלהם במרכז סביבה וירטואלית ישירות באפליקציית Spike.
דוגמה נוספת היא Smartsheet, סביבת עבודה דינמית שמאפשרת ניהול פרויקטים, אוטומציה של תהליכי עבודה ויצירה מהירה של פתרונות חדשים.
בקרוב יתווספו עוד אפליקציות PWA כמו Slack, Dropbox או Canva, כפי שנרמז בסרטון עם ג'ייקוב רוסי שפורסם בהקשר של כנס Connect של פייסבוק בשנת 2021.
יצירת אפליקציות PWA ל-Oculus
חברת Meta פירטה את השלבים הנדרשים בתיעוד שלה. באופן כללי, אפליקציות PWA שאפשר להתקין ב-Chrome אמורות לפעול ב-Oculus ללא צורך בהגדרה.
דרישות לגבי מניפסט של אפליקציית אינטרנט
יש כמה הבדלים חשובים בהשוואה לקריטריונים להתקנה של Chrome ולמפרט של מניפסט אפליקציית אינטרנט. לדוגמה, נכון לעכשיו, Oculus תומך רק בשפות שנקראות מימין לשמאל, בעוד שמפרט מניפסט אפליקציית האינטרנט לא מחייב מגבלות כאלה. דוגמה נוספת היא start_url, ש-Chrome דורש באופן מוחלט כדי שאפשר יהיה להתקין אפליקציה, אבל ב-Oculus הוא אופציונלי. חברת Oculus מציעה כלי לשורת הפקודה שמאפשר למפתחים ליצור אפליקציות PWA עבור Oculus Quest 2, וכך להעביר את הפרמטרים החסרים (או לדרוס את הפרמטרים הקיימים) במניפסט של אפליקציית האינטרנט.
ל-Oculus יש מספר שדות אופציונליים של מניפסט אפליקציית אינטרנט קניינית שאפשר להשתמש בהם כדי להתאים אישית את חוויית השימוש באפליקציית PWA.
אריזת אפליקציות PWA באמצעות Bubblewrap CLI
Bubblewrap הוא קבוצה של ספריות בקוד פתוח וכלי לשורת הפקודה (CLI) ל-Node.js. Bubblewrap פותח על ידי צוות Google Chrome כדי לעזור למפתחים ליצור, לבנות ולחתום על פרויקט Android שמפעיל את ה-PWA כפעילות אינטרנט מהימנה (TWA).
נכון לעכשיו, דפדפן Meta Quest לא תומך באופן מלא ב-TWA, אבל החל מגרסה 1.18.0, Bubblewrap תומך באריזת 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, בחנות Google Play או בכל אחת מהפלטפורמות האחרות להפצת אפליקציות ל-Android.
אריזת אפליקציות PWA באמצעות כלי השירות של פלטפורמת Oculus
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 הוא פרויקט קוד פתוח שפותח על ידי מיקרוסופט. הוא מאפשר למפתחים לארוז ולחתום על אפליקציות PWA כדי לפרסם אותן בחנויות שונות, כולל Microsoft Store, חנות Google Play, App Store ו-Meta Quest Store.
כדי לארוז PWA באמצעות PWABuilder, פשוט מזינים את כתובת ה-URL של ה-PWA, מזינים או עורכים את המטא-נתונים של האפליקציה ולוחצים על הלחצן Generate.
הכלי PWABuilder מאפשר למפתחים לבחור איזה כלי מאחורי הקלעים ישמש לאריזת אפליקציות PWA למכשירי Meta Quest.
אתם יכולים לבחור באפשרות Meta Quest כדי להשתמש בכלי השירות של פלטפורמת Oculus.
אפשר לבחור באפשרות Android כדי להשתמש ב-Bubblewrap ולסמן את התיבה Meta Quest compatible.
התקנת אפליקציות PWA באמצעות ADB
אחרי שיוצרים את קובץ ה-APK, אפשר להעביר אותו למכשיר Meta Quest באמצעות ADB דרך USB או Wi-Fi:
adb install app-release-signed.apk
אם משתמשים ב-Bubblewrap CLI כדי לארוז את ה-PWA, הוא מספק פקודת כינוי נוחה להעברה צדדית של קובץ ה-APK:
bubblewrap install
אפליקציות שהותקנו באמצעות העברה צדדית מופיעות בקטע מקורות לא ידועים במגירת האפליקציות.
שליחת אפליקציה
העלאה ושליחה של אפליקציות PWA לחנות Oculus מוסברות בפירוט במסמכים של Oculus Developer Center.
בנוסף לשליחת אפליקציות ל-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 שלי. אם רוצים לבדוק את החבילה לעומק, יש לי גם גרסה מפורקת. הוראות הבנייה זמינות בכתובת package.json.
השימוש באפליקציה ב-Oculus תקין, כולל האפשרות לפתוח ולשמור קבצים. דפדפן Oculus לא תומך ב-File System Access API, אבל הגישה החלופית עוזרת. הדבר היחיד שלא פעל הוא שינוי גודל התצוגה באמצעות צביטה. ציפיתי שהיא תפעל אם אלחץ על כפתור ההדק בשני הבקרים ואז אזיז את הבקרים בכיוונים מנוגדים. חוץ מזה, כל השאר היה יעיל והגיב במהירות, כמו שאפשר לראות בצילום המסך המוטמע.
אפליקציות PWA תלת-ממדיות ב-WebXR
התמיכה ב-PWA ב-Oculus Quest לא מוגבלת לאפליקציות שטוחות בדו-ממד. מפתחים יכולים ליצור חוויות תלת-ממד עשירות למציאות מדומה באמצעות WebXR API.
רוצה לדעת איך המערכת מטפלת בהנחיות שונות (התקנת PWA, בקשות הרשאה, התראות) מתוך VR, אם בכלל?
User Agent Prompts test הוא סרטון מסך מתוך WebXR Tests של Immersive Web Working Group.
כפי שניתן לראות, כדי להיכנס למצב VR נדרשת הרשאה מהמשתמש. בקשות ההרשאה נשלחות פעם אחת לכל מקור. בקשת הרשאות מוציאה אתכם ממצב ההפעלה. אין כרגע תמיכה בהתראות.
מעקב אחר תנועות הידיים
אפשר להשתמש בידיים כדי לבצע פעולות ב-PWA במצב סוחף, הודות ל-WebXR Hand Input API ולמערכת מבוססת-AI למעקב אחרי תנועות הידיים של Meta.
הנה צילום מסך של Hand Tracking Sample מתוך WebXR Samples של Immersive Web Working Group.
מציאות רבודה/משולבת (העברה)
כפי שהודע בכנס Meta Connect 2022, נוסף תמיכה ב-Meta Quest Browser במציאות רבודה (AR) ב-WebXR, שנקראת גם מציאות משולבת (MR), במכשירי 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 הן כיפיות ומבטיחות מאוד. הלוח הווירטואלי האינסופי מאפשר למשתמשים לשנות את גודל המסך כך שיתאים בצורה הטובה ביותר למשימה הנוכחית, ויש לו פוטנציאל גדול לשנות את אופן העבודה שלנו בעתיד. הקלדה במציאות מדומה באמצעות מעקב אחר תנועות הידיים עדיין נמצאת בשלבי פיתוח ראשוניים, ולפחות אצלי היא עדיין לא עובדת בצורה אמינה במיוחד. עם זאת, היא עובדת מספיק טוב כדי להזין כתובות URL או להקליד טקסטים קצרים.
מה שהכי אהבתי ב-PWA ב-Oculus Quest 2 זה שהם פשוט PWA רגילים שאפשר להשתמש בהם ללא שינוי בכרטיסיית דפדפן או דרך עטיפת APK דקה ללא ממשקי API ספציפיים לפלטפורמה. מעולם לא היה קל יותר לטרגט כמה פלטפורמות באמצעות אותו קוד. Here's to PWAs in VR and AR on the web. העתיד ורוד!
תודות
תמונה של Oculus Quest 2 מאת Maximilian Prandstätter ב-Flickr. תמונות של האפליקציות Instagram, Facebook, Oculus Browser ו-Spike מ-Oculus Store, וגם איור של גילוי אפליקציות ואנימציה של מעקב אחרי תנועות הידיים באדיבות Meta. תמונה ראשית (Hero) מאת Arnau Marín i Puig. הפוסט הזה נבדק על ידי Joe Medley.