פיתוח אפליקציה של מציאות רבודה (AR) באמצעות WebXR Device API

1. לפני שמתחילים

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

אתם משתמשים ב-WebXR Device API שמשלב פונקציות AR ומציאות מדומה (VR). מתמקדים בתוספי AR ל-WebXR Device API כדי ליצור אפליקציית AR פשוטה שפועלת באינטרנט האינטראקטיבי.

מה זה AR?

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

השימוש ב-AR נפוץ באפליקציות אחרי השקת ה-ARCore של Google ו-ARKit של Apple, בין אם מדובר בפילטרים של תמונות סלפי או במשחקים מבוססי AR.

מה תפַתחו

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

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

מה תלמדו

• איך משתמשים ב-WebXR Device API
• איך להגדיר סצנת AR בסיסית
• איך מוצאים פלטפורמה מסוימת באמצעות ערכות היטים של AR
• איך לטעון ולעבד מודל תלת-ממדי שמסונכרן עם פיד המצלמה בעולם האמיתי
• איך לעבד צלליות על סמך המודל התלת-ממדי

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

למה תזדקק?

• תחנת עבודה לתכנות ולאירוח תוכן סטטי באינטרנט
• מכשיר Android עם יכולות ARCore עם Android 8.0 Oreo
• Google Chrome
• התקנת את Google Play Services למציאות רבודה (Chrome יציג הנחיה אוטומטית להתקין אותו במכשירים תואמים)
• שרת אינטרנט לבחירתך
• כבל USB שמחברים את מכשיר ה-AR לתחנת העבודה
• הקוד לדוגמה
• כלי לעריכת טקסט
• ידע בסיסי ב-HTML , CSS , JavaScript והכלים למפתחים של Google Chrome

צריך ללחוץ על אני רוצה לנסות במכשיר ה-AR כדי לנסות את השלב הראשון של ה-Codelab הזה. אם מופיע דף עם ההודעה 'בדפדפן שלך אין תכונות AR', כדאי לוודא שמותקנת במכשיר Android שלכם אפליקציית Google Play Services למציאות רבודה.

לניסיון

2. הגדרת סביבת הפיתוח

להורדת הקוד

1. צריך ללחוץ על הקישור הבא כדי להוריד את כל הקוד של ה-Codelab הזה בתחנת העבודה שלך:

להורדת קוד המקור

2. פורקים את קובץ ה-ZIP שהורדתם. הפעולה הזו פורקת תיקיית בסיס (ar-with-webxr-master), שמכילה ספריות של כמה שלבים ב-Codelab הזה, יחד עם כל המשאבים הדרושים.

התיקיות step-03 ו-step-04 מכילות את מצב הסיום הרצוי של השלבים השלישיים והרביעיים ב-Codelab הזה, וגם את התוצאה final. הם זמינים לעיון.

כל העבודה על התכנות מתבצעת בספרייה work.

התקנת שרת האינטרנט

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

התקנת שרת אינטרנט ל-Chrome

2. לאחר התקנת האפליקציה 'שרת האינטרנט ל-Chrome', עבור אל chrome://apps ולחץ על הסמל של שרת האינטרנט:

בשלב הבא תראו את תיבת הדו-שיח הבאה, שבה אפשר להגדיר את שרת האינטרנט המקומי:

3. לוחצים על בחירת תיקייה ובוחרים את התיקייה ar-with-webxr-master. ההגדרה הזו מאפשרת להציג את העבודה בתהליך באמצעות כתובת ה-URL שמודגשת בתיבת הדו-שיח של שרת האינטרנט (בקטע כתובות URL של שרת האינטרנט).
4. בקטע אפשרויות (נדרשת הפעלה מחדש), בוחרים את תיבת הסימון הצג באופן אוטומטי index.html.
5. מעבירים את הלחצן שרת האינטרנט למצב Stop, ולאחר מכן חוזרים אל התחילו.
6. מוודאים שמופיעה לפחות כתובת URL אחת של שרת אינטרנט: http://127.0.0.1:8887 — כתובת ה-URL של המארח המקומי שמוגדרת כברירת מחדל.

הגדרת העברה ליציאה אחרת

מגדירים את מכשיר ה-AR כך שיקבל גישה לאותה יציאה בתחנת העבודה כשמבקרים ב-localhost:8887 במכשיר.

1. בתחנת העבודה של הפיתוח, עוברים אל chrome://inspect ולוחצים על יציאה ליציאה...:
2. אפשר להשתמש בתיבת הדו-שיח הגדרות העברה ליציאה אחרת כדי להעביר את היציאה 8887 אל Localhost:8887.
3. מסמנים את תיבת הסימון הפעלת העברה ליציאה אחרת:

אימות ההגדרה

בדיקת החיבור:

1. מחברים את מכשיר ה-AR לתחנת העבודה באמצעות כבל USB.
2. במכשיר ה-AR ב-Chrome, מזינים http://localhost:8887 בסרגל הכתובות. מכשיר ה-AR שלכם אמור להעביר את הבקשה הזו לשרת האינטרנט של תחנת הפיתוח. אמורה להופיע ספרייה של קבצים.
3. במכשיר ה-AR, לוחצים על step-03 כדי לטעון את הקובץ step-03/index.html בדפדפן.

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

החיבור לשרת האינטרנט אמור לפעול עכשיו עם מכשיר ה-AR שלכם.

4. לוחצים על התחלת מציאות רבודה. יכול להיות שתופיע הנחיה להתקין את ARCore.

בפעם הראשונה שמריצים אפליקציית AR מוצגת בקשה להרשאות גישה למצלמה.

←

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

חשוב: משיקולי אבטחה, WebXR Device API יכול לפעול רק בסביבות מאובטחות (HTTPS), למעט בפיתוח מקומי. אם נתקלתם בבעיות בהפעלת WebXR, ודאו שאתם משתמשים במסמך מאובטח או בכתובת URL של מארח מקומי.

מעכשיו והלאה, כל הבדיקות והאימות (בקטע Test It בשלבים הבאים) מחייבים כניסה לקישור במכשיר ה-AR שלכם.

3. הגדרת WebXR

בשלב הזה נסביר איך להגדיר סשן WebXR וסצנה בסיסית של AR. דף ה-HTML מגיע עם עיצוב CSS ו-JavaScript כדי לאפשר פונקציונליות בסיסית של AR. הפעולה הזו מזרזת את תהליך ההגדרה ומאפשרת ל-Codelab להתמקד בתכונות AR.

דף ה-HTML

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

כדי להשתמש בתכונות AR נדרשת תנועת משתמש כדי להפעיל אותן, לכן יש כמה רכיבים של עיצוב חדשני (Material Design) להצגת הלחצן הפעלת AR ואת ההודעה שאינה נתמכת בדפדפן.

הקובץ index.html שכבר נמצא בספרייה work אמור להיראות בערך כך. זו קבוצת משנה של התוכן עצמו. אל תעתיקו את הקוד הזה לקובץ שלכם.

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

פתיחת קוד ה-JavaScript של המפתח

נקודת ההתחלה של האפליקציה היא בapp.js. הקובץ הזה מספק הנחיות סטנדרטיות להגדרה של חוויית AR.

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

ספריית העבודה שלך כבר כוללת את קוד האפליקציה (app.js).

חיפוש תמיכה ב-WebXR וב-AR

לפני שמשתמש יוכל לעבוד עם AR, עליך לבדוק אם קיים navigator.xr ואת תכונות ה-XR הנדרשות. האובייקט navigator.xr הוא נקודת הכניסה של WebXR Device API, ולכן הוא צריך להיות קיים אם המכשיר תואם. בנוסף, צריך לוודא שיש תמיכה במצב הסשן של "immersive-ar".

אם הכול בסדר, לחיצה על הלחצן הזנת מציאות רבודה תנסה ליצור סשן XR. אחרת, מתבצעת קריאה של onNoXRDevice() (ב-shared/utils.js) שמוצגת בה הודעה שמציינת שאין תמיכה ב-AR.

הקוד הזה כבר קיים בapp.js, לכן לא צריך לבצע שינוי.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

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

בקשת XRSession

כשלוחצים על הזנת מציאות רבודה, הקוד קורא לפונקציה activateXR(). הפעולה הזו תתחיל את חוויית ה-AR.

1. מחפשים את הפונקציה activateXR() ב-app.js. חלק מהקוד נותר:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

נקודת הכניסה אל WebXR היא דרך XRSystem.requestSession(). אפשר להשתמש במצב immersive-ar כדי לאפשר צפייה בתוכן שעבר רינדור בסביבה בעולם האמיתי.

2. מאתחלים את this.xrSession באמצעות המצב "immersive-ar":

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

אתחול של XRReferenceSpace

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

כדי לאתחל את this.localReferenceSpace ב-onSessionStarted(), צריך להשתמש בקוד הבא:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

הגדרה של לולאת אנימציה

1. צריך להשתמש בפונקציה requestAnimationFrame של XRSession כדי להתחיל לולאת רינדור, בדומה ל-window.requestAnimationFrame.

מכשיר requestAnimationFrame של XRSession מאפשר להתחבר לקצב הרענון של מכשיר ה-XR המקורי. דפי אינטרנט רגילים לולאות רינדור מוצגות בקצב של 60 FPS, ואילו תצוגות VR חיצוניות עשויות להיות מוצגות בקצב של 120 FPS. יכול להיות שסשנים ב-AR לא בלעדיים ימשיכו לפעול בקצב של 60FPS בלבד, אבל המידע על המיקום והצפייה של המכשיר זמין רק ב-requestAnimationFrame של הסשן.

בכל פריים, הפקודה onXRFrame מופעלת עם חותמת זמן ו-XRFrame.

2. צריך להשלים את ההטמעה של onXRFrame. לאחר שרטוט מסגרת, מוסיפים:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

3. כדי להגדיר את סביבת הגרפיקה צריך להוסיף קוד. הוספה לחלק התחתון של onXRFrame:

// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);

4. כדי לקבוע את התנוחה של הצופה, צריך להשתמש בפונקציה XRFrame.getViewerPose(). הסמל XRViewerPose מתאר את המיקום והכיוון של המכשיר במרחב. היא גם מכילה מערך של XRView, שמתאר כל נקודת מבט שממנה צריך לעבד את הסצנה כדי להציג אותה כראוי במכשיר הנוכחי. ל-VR בעיצוב סטריאוסקופי יש שתי תצוגות (אחת לכל עין), אבל במכשירי AR יש רק תצוגה אחת.
   המידע שמופיע בpose.views משמש בדרך כלל להגדרה של מטריצת התצוגה ומטריצת ההקרנה של המצלמה הווירטואלית. הדבר משפיע על הפריסה של הסצנה בתלת-ממד. אפשר לעבד את הסצנה כשהמצלמה מוגדרת.
5. הוספה לחלק התחתון של onXRFrame:

// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

לבדיקה

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

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

4. הוספה של רשת טירגוט

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

הסבר על בדיקת היט

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

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

בקשת XRSession עם תכונות נוספות

כדי לבצע בדיקות התאמה, נדרשות תכונות נוספות בעת בקשת ה-XRSession.

1. בapp.js, יש לאתר את navigator.xr.requestSession.
2. מוסיפים את התכונות "hit-test" ו-"dom-overlay" כ-requiredFeature באופן הבא:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

3. הגדרת שכבת-העל של DOM. מוסיפים את הרכיב document.body מעל לתצוגת המצלמה של ה-AR, כך:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

הוספת הנחיה ליצירת תנועה

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

צריך להשתמש ב"dom-overlay" מהשלב הקודם כדי להציג הנחיית תנועה בחלק העליון של שידור המצלמה.

צריך להוסיף <div> אל index.html עם המזהה stabilization. ב<div> הזה מוצגת אנימציה למשתמשים שמייצגת את סטטוס הייצוב, ומבקשת מהם לנוע עם המכשיר שלהם כדי לשפר את תהליך הסכם רמת השירות. הערך הזה מוצג כשהמשתמש נמצא ב-AR ומוסתר ברגע שהרשת מוצאת פלטפורמה שנשלטת על ידי <body> מחלקות.

  <div id="stabilization"></div>

</body>
</html>

הוספת רשת

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

1. ב-app.js, מחליפים את הקריאה DemoUtils.createCubeScene() שבכתובת setupThreeJs() ב-Three.Scene() ריק.

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

2. מאכלסים את הסצנה החדשה באובייקט שמייצג את נקודת ההתנגשות. המחלקה שסופקה מסוג Reticle מטפלת בטעינת מודל הרשת ב-shared/utils.js.
3. הוספת Reticle לסצנה ב-setupThreeJs():

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

כדי לבצע בדיקת היט צריך להשתמש במאפיין XRReferenceSpace חדש. מרחב ההפניה הזה מציין מערכת קואורדינטות חדשה מנקודת המבט של הצופה, שמאפשרת ליצור קרן שמותאמת לכיוון התצוגה. מערכת הקואורדינטות הזו נמצאת בשימוש ב-XRSession.requestHitTestSource(), שיכול לחשב בדיקות התאמה.

4. צריך להוסיף את הפריטים הבאים אל onSessionStarted() ב-app.js:

async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}

5. באמצעות hitTestSource הזה, מבצעים בדיקת התאמה לכל פריים:
   • אם אין תוצאות לבדיקת ההיט, לא היה מספיק זמן ל-ARCore כדי להבין את הסביבה. במקרה הזה, מבקשים מהמשתמש להזיז את המכשיר באמצעות הייצוב <div>.
   • אם יש תוצאות, מזיזים את הרשת למיקום הזה.
6. שינוי onXRFrame כדי להזיז את הרשת:

onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

הוספת התנהגות בהקשה על המסך

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

1. הוספת האזנה לאירוע select בתחתית של onSessionStarted:

this.xrSession.addEventListener("select", this.onSelect);

בדוגמה הזו, הקשה על המסך גורמת למיקום של חמנייה ברשת.

2. יוצרים יישום בשביל onSelect במחלקה App:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

בדיקת האפליקציה

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

1. בזמן הפעלת האפליקציה, אמורה להופיע רשת שעוקבת אחרי הרצפה. אם לא, נסו להסתכל סביב לאט עם הטלפון.
2. אחרי שרואים את הרשת, מקישים עליו. מניחים חמנית מעליה. יכול להיות שתצטרכו לזוז קצת כדי שפלטפורמת ה-AR תוכל לזהות בצורה טובה יותר פלטפורמות בעולם האמיתי. תאורה חלשה ומשטחים ללא תכונות פוגעות באיכות של הבנת הסצנות, ומגדילות את הסיכוי לכך שהמערכת לא תזוהה. אם נתקלים בבעיות, אפשר לבדוק את הקוד step-04/app.js כדי לראות דוגמה תקינה לשלב הזה.

לניסיון

5. הוספת צללים

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

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

1. הפעלת הצלליות ב-three.js WebGLRenderer. לאחר יצירת הכלי לרינדור, מגדירים את הערכים הבאים ב-shadowMap שלו:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

בדוגמה הזו נעשה שימוש במיקום האור בתוך הקוד עבור צלליות. בעתיד, תכונות AR ל-WebXR עשויות לכלול הערכת אור וערכים אחרים, כך שהצלליות של המודל התלת-ממדי יהיו מסונכרנות גם עם העולם האמיתי. מידע נוסף מופיע במאמר בנושא תכונה: WebXR AR Lighting Estimation.

הסצנה לדוגמה שנוצרה ב-DemoUtils.createLitScene() מכילה אובייקט בשם shadowMesh, משטח אופקי ושטוח שמאפשר להציג רק צלליות. הפלטפורמה הזו נמצאת בהתחלה במיקום Y של 10,000 יחידות. לאחר שמניחים חמנייה, מזיזים את shadowMesh כך שיהיה זהה לגובה של פני השטח בעולם האמיתי, כך שצל הפרח יוצג על פני הקרקע בעולם האמיתי.

2. בפונקציה onSelect, אחרי שמוסיפים את clone לסצנה, צריך להוסיף קוד למיקום מחדש של מישור הצללית:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

יכול להיות שתצטרכו להשתמש ביכולות נוספות של הבנת סצנות כדי להציג סצנות מורכבות יותר וצלליות מדויקות.

לבדיקה

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

לניסיון

6. מקורות מידע נוספים

מעולה! הגעת לסוף של Codelab הזה ב-AR באמצעות WebXR.

מידע נוסף

• מפרט WebXR Device API
• WebXR Device API ב-MDN
• דוגמאות WebXR
• מפרט בדיקת היטים ל-WebXR
• הצעה עוגן ל-WebXR
• three.js