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

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

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

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

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

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

תוכלו להתעמק בהדגמות או לנסות את ה-Codelab שלנו.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מתחילים בקריאה חוזרת (callback) של 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. אפשר לעשות זאת אם אתם באמת שאפתנים. עם זאת, מומלץ להשתמש ב-framework. בדוגמאות לאינטרנט העשירו נעשה שימוש רק בשביל הדגמות שנקרא Cottontail, ו-Three.js תומך ב-WebXR מאז מאי.

הצבת אובייקט

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

סיכום

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

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