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

ג'ו מדלי
ג'ו מדלי
Twitter GitHub

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

איפה אפשר להשיג אותו?

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

מלבד Chrome Canary, יש צורך גם ב:

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

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

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

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

"האם דרוש לי דפדפן מיוחד?" "זה רק האינטרנט."

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

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

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

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

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

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

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

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

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

טילי קרניים, בדיקות היט ורשתיות

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

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

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

AR פועל בקצב של 30 פריימים לשנייה

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

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

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

מעבר לקוד

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

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

ה-API החדש

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