פיתוח לאינטרנט ב-Android XR

מכשירי XR רלוונטיים
ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים האלה.
מידע על סוגי מכשירי XR →
משקפי XR
משקפי AR חוטיים
מידע על סוגי מכשירי XR →

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

התכונות הבאות של 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 מחזירה תצוגה לכל עין, והלולאה המתאימה שלה פועלת פעמיים.

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

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

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

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

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

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

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

הרשאות ב-WebXR

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

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

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