פיתוח באמצעות WebXR

ב-Chrome ל-Android XR יש תמיכה ב-WebXR. WebXR הוא תקן פתוח של W3C שמאפשר להשתמש בממשקי XR API עם ביצועים גבוהים בדפדפנים נתמכים. אם אתם יוצרים לאינטרנט, תוכלו לשפר אתרים קיימים באמצעות מודלים תלת-ממדיים או ליצור חוויות immersive חדשות.

התכונות הבאות של WebXR נתמכות ב-Chrome ל-Android XR:

כדי לראות את WebXR בפעולה, פותחים את Chrome במכשיר Android XR או במכונה להדמיה של Android XR ועוברים על הדוגמאות הרשמיות של WebXR.

דרישה מוקדמת: בחירת מסגרת WebXR

לפני שמתחילים בפיתוח, חשוב לבחור את מסגרת WebXR המתאימה. כך תוכלו לשפר משמעותית את הפרודוקטיביות שלכם ולשפר את האיכות של החוויות שאתם יוצרים.

  • כדי לשלוט באופן מלא בסצנות תלת-ממדיות וליצור אינטראקציות מותאמות אישית או מורכבות, מומלץ להשתמש ב-three.js וב-babylon.js.
  • ליצירת אב טיפוס מהירה או לשימוש בתחביר שדומה ל-HTML כדי להגדיר סצנות תלת-ממדיות, מומלץ להשתמש ב-A-Frame וב-model-viewer.
  • אפשר גם לעיין במסגרות ובדוגמאות קוד נוספות.

אם אתם מעדיפים להשתמש ב-JavaScript וב-WebGL מקומיים, תוכלו להיעזר במאמר WebXR ב-GitHub כדי ליצור את הניסוי הראשון שלכם ב-WebXR.

התאמה ל-Android XR

אם יש לכם חוויות WebXR קיימות שפועלות במכשירים אחרים, יכול להיות שתצטרכו לעדכן את הקוד כדי לתמוך כראוי ב-WebXR ב-Android XR. לדוגמה, חוויות WebXR שמתמקדות במכשירים ניידים יצטרכו להתאים את עצמן ממסך אחד לשני מסכים סטריאופוניים ב-Android XR. יכול להיות שיהיה צורך להתאים את קוד הקלט לחוויית WebXR שמטרגטת מכשירים ניידים או אוזניות קיימות כך שיהיה ידידותי יותר.

כשעובדים עם WebXR ב-Android XR, יכול להיות שתצטרכו לעדכן את הקוד כדי לפצות על כך שיש שני מסכים – אחד לכל עין.

מידע על הוספת תחושת עומק ב-WebXR

כשמשתמש מציב אובייקט וירטואלי במרחב הפיזי שלו, הפרופורציות שלו צריכות להיות מדויקות כדי שייראה כאילו הוא באמת שייך למרחב הזה. לדוגמה, באפליקציה לקניית רהיטים, המשתמשים צריכים לסמוך על כך שכורסה וירטואלית תתאים בצורה מושלמת לסלון שלהם.

Chrome for Android XR תומך במודול לחישת עומק ב-WebXR, שמאפשר למכשיר לזהות את המימדים והקווי המתאר של הסביבה בעולם האמיתי. נתוני העומק האלה מאפשרים ליצור אינטראקציות מרתקות וריאליסטיות יותר, שיעזרו למשתמשים לקבל החלטות מושכלות.

בניגוד לחישת עומק בטלפונים ניידים, חישת העומק ב-Android XR היא סטריאוסקופית, ומתבצע סטרימינג של שתי מפות עומק בזמן אמת לצורך ראייה דו-עינית. יכול להיות שתצטרכו לעדכן את קוד WebXR כדי לתמוך כראוי בפריימים של עומק סטריאו.

בדוגמה הבאה, נתוני העומק מוצגים באופן סטריאוסקופי:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

נקודות חשובות לגבי הקוד

  • כדי לגשת לנתוני עומק, צריך להחזיר תנוחה תקינה.
  • הפונקציה pose.views מחזירה תצוגה לכל עין, ו-for loop התואם שלה פועל פעמיים.

תצוגה חזותית של עומק בזמן אמת באמצעות WebXR depth sensing API. אדום מציין פיקסלים קרובים יותר, וכחול מציין פיקסלים רחוקים יותר.

הוספת אינטראקציה באמצעות הידיים ב-WebXR

הוספת אינטראקציה עם הידיים לאפליקציית WebXR מאפשרת למשתמשים ליהנות מחוויה אינטואיטיבית וסוחפת יותר, וכך משפרת את המעורבות שלהם.

קלט ידני הוא מנגנון האינטראקציה העיקרי ב-Android XR. ב-Chrome ל-Android XR יש תמיכה ב-Hand Input API כקלט ברירת המחדל. ממשק ה-API הזה מאפשר למשתמשים לקיים אינטראקציה עם אובייקטים וירטואליים באופן טבעי, באמצעות תנועות ותנועות ידיים כדי לתפוס, לדחוף או לבצע פעולות אחרות על רכיבים בסצנה.

יכול להיות שעדיין אין תמיכה בהזנת נתונים באמצעות תנועות ידיים במכשירים כמו טלפונים ניידים או מכשירים מסוג XR שמתמקדים בבקרת שלט. יכול להיות שתצטרכו לעדכן את קוד ה-WebXR כדי לתמוך כראוי בקלט מהיד. בסרטון סשן VR עשיר עם תנועות ידיים מוסבר איך לשלב מעקב אחר תנועות ידיים בפרויקט WebXR.

האנימציה הבאה מראה דוגמה לשילוב של צביטה עם WebXR API, שבה משתמש 'מחקה' את פני השטח של מרחב וירטואלי כדי לחשוף חלון שדרכו רואים את העולם האמיתי.

הדגמה של WebXR שבה משתמשים בצביטה כדי לנגב מסכים ולראות דרך המציאות הפיזית.

הרשאות ב-WebXR

כשמשתמשים בממשקי WebXR API שדורשים הרשאה, Chrome מבקש מהמשתמש להעניק את ההרשאה לאתר. כל ממשקי ה-API של WebXR דורשים את ההרשאה למיפוי תלת-ממד ולמעקב אחר המצלמה. גם הרשאות הגישה לנתונים של הפנים, העיניים והידיים במעקב מוגנות. אם כל ההרשאות הנדרשות ניתנות, קריאה ל-navigator.xr.requestSession('immersive-ar', options) מחזירה סשן WebXR תקין.

העדפת ההרשאות שבחר המשתמש נשמרת לכל דומיין. כשתיגשו לחוויית WebXR בדומיין אחר, תופיע ב-Chrome בקשה חוזרת להענקת הרשאות. אם חוויית WebXR דורשת כמה הרשאות, ב-Chrome תוצג בקשה לכל הרשאה בנפרד.

כמו בכל ההרשאות באינטרנט, צריך לטפל כראוי במצבים שבהם ההרשאה נדחית.