מציאות רבודה באינטרנט

Joe Medley

ב-Chrome 67 הכרזנו על WebXR Device API גם למציאות רבודה (AR) וגם למציאות וירטואלית (VR), אבל רק תכונות ה-VR הופעלו. VR היא חוויה שמבוססת אך ורק על מה שמופיע במכשיר המחשוב. לעומת זאת, טכנולוגיית ה-AR מאפשרת להציג אובייקטים וירטואליים בעולם האמיתי. כדי לאפשר מיקום ומעקב אחרי העצמים האלה, הוספנו ל-Chrome Canary את WebXR Hit Test API – שיטה חדשה שעוזרת לקוד אינטרנט עשיר להציב אובייקטים בעולם האמיתי.

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

איפה אפשר לקבל אותו?

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

בנוסף ל-Chrome Canary, תצטרכו גם:

• סמארטפון תואם עם Android O ואילך.
• כדי להתקין את ARCore.
• שתי תכונות ניסיוניות של Chrome‏ (chrome://flags): WebXRDevice API‏ (#webxr) ו-WebXR Hit Test‏ (#webxr-hit-test)

בעזרתם תוכלו להיכנס לעומק הדמואים או לנסות את ה-codelab שלנו.

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

• Chacmool
• דוגמה לאינטרנט עשיר
• Codelab

זה רק האינטרנט

בכנס Google IO השנה, הדגמנו מציאות רבודה בגרסה מוקדמת של Chrome. במהלך שלושת הימים האלה אמרתי שוב ושוב למפתחים ולאנשים שלא מפתחים, משהו שהייתי רוצה לדעת ולכתוב עליו במאמר בנושא אינטרנט immersive: "זה רק האינטרנט".

"איזה תוסף ל-Chrome צריך להתקין?" "אין תוסף. זה רק האינטרנט".

"Do I need a special browser?‎" "It's just the web" (זה רק האינטרנט).

"איזו אפליקציה צריך להתקין?" "אין אפליקציה מיוחדת. זה רק באינטרנט".

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

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

למה זה שימושי?

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

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

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

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

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

הקרנות קרניים, בדיקות היפגעות ורשתות לייזר

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

זה הזמן לנסות את דוגמת הקוד החדשה ב-Chrome Canary. לפני שמבצעים פעולה כלשהי, חשוב לוודא שהדגלים הנכונים מופעלים. עכשיו אפשר לטעון את הדוגמה וללחוץ על 'התחלת AR'.

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

הדגמה של בדיקת ההיטים ב-AR

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

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

לקוד

הדגמה של Chacmool מראה איך מציאות רבודה עשויה להיראות באפליקציה שפועלת בסביבת ייצור. למרבה המזל, יש הדגמה פשוטה בהרבה במאגר הדוגמאות של WebXR. קוד הדוגמה שלי מגיע מהדגמה של AR Hit Test במאגר הזה. לידיעתך, אני אוהב לפשט דוגמאות קוד כדי לעזור לך להבין מה קורה.

העקרונות הבסיסיים של כניסה לסשן AR והפעלת לולאת רינדור זהים ב-AR וב-VR. אם לא ידוע לך מה זה, אפשר לקרוא את המאמר הקודם שלי. באופן ספציפי יותר, הכניסה לסשן AR והפעלת הסשן דומים כמעט לחלוטין לכניסה לסשן של חלון קסם ב-VR. בדומה לחלון קסום, סוג הסשן חייב להיות לא immersive והמסגרת של סוג העזרה חייבת להיות 'eye-level'.

ה-API החדש

עכשיו אראה לכם איך משתמשים ב-API החדש. חשוב לזכור שב-AR, סרגל הכוונת מנסה למצוא משטח לפני שמניחים פריט. כדי לעשות זאת, מבצעים בדיקת היטים. כדי לבצע בדיקת התאמה, קוראים ל-XRSession.requestHitTest(). כך הוא נראה:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

שלושת הארגומנטים לשיטה הזו מייצגים הקרנה של קרן. ההשלכה של קרן האור מוגדרת על ידי שתי נקודות על הקרן (origin ו-direction) והמקום שממנו נספרות הנקודות האלה (frameOfReference). המקור והכיוון הם וקטורים תלת-ממדיים. לא משנה איזה ערך תשלחו, הוא ינורמלי (יומר) באורך של 1.

הזזת כוון הראייה

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

מתחילים עם שיחת החזרה requestAnimationFrame(). כמו ב-VR, צריך סשן ותנוחה.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

אחרי שמקבלים את הסשן ואת התנוחה, קובעים לאן קרן האור מוקרנת. קוד לדוגמה שמשתמש בספריית המתמטיקה gl-matrix. אבל gl-matrix הוא לא נדרש. חשוב לדעת מה מחושב באמצעותו, והוא מבוסס על המיקום של המכשיר. אחזור המיקום של המכשיר מ-XRPose.poseModalMatrix. אחרי שמפעילים את הקרן, צריך להפעיל את הפונקציה requestHitTest().

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

למרות שזה לא ברור בדוגמאות של בדיקת ההיט, עדיין צריך לעבור בחזרה על התצוגות כדי לצייר את הסצנה. הציור מתבצע באמצעות ממשקי WebGL API. אפשר לעשות זאת אם אתם באמת שאפתנים. עם זאת, מומלץ להשתמש במסגרת. הדוגמאות לאינטרנט התלת-ממדי מבוססות על ספרייה שנוצרה במיוחד לדמואים שנקראת Cottontail, ו-Three.js תומכת ב-WebXR מאז מאי.

הצבת אובייקט

אובייקט ממוקם ב-AR כשהמשתמש מקשיב על המסך. לשם כך משתמשים באירוע select. השלב החשוב הוא לדעת איפה למקם אותו. מכיוון שהתצוגה המפורטת הנעה מספקת מקור קבוע לבדיקות היטים, הדרך הפשוטה ביותר למקם אובייקט היא לצייר אותו במיקום של התצוגה המפורטת בבדיקת ההיט האחרונה. אם יש לכם סיבה לגיטימית לא להציג כוונן, תוכלו להפעיל את requestHitTest() באירוע שנבחר כפי שמתואר בדוגמה.

סיכום

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

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