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

מכשירי XR שמתאימים לשימוש

ההנחיות האלה יעזרו לכם ליצור חוויות למכשירי XR מהסוגים הבאים.

מידע על סוגי מכשירי XR →

מידע על סוגי מכשירי XR →

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

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

• Device API
• AR Module
• Gamepads Module
• Hit Test Module
• קלט באמצעות הידיים
• עוגנים
• חישת עומק
• Light Estimation

כדי לראות את 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 ל-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

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

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

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

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

הרשאות ב-WebXR

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

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

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