WebXR Hit Test Manager: הטמעת מערכת Ray Casting עבור חוויות סוחפות

העלייה של טכנולוגיות מציאות רבודה (AR) ומציאות מדומה (VR) פתחה אפשרויות חדשות ומלהיבות ליצירת חוויות דיגיטליות סוחפות ואינטראקטיביות. WebXR, ממשק API של JavaScript לגישה ליכולות VR ו-AR בדפדפני אינטרנט, מאפשר למפתחים ברחבי העולם לבנות חוויות אלה על פני מספר רב של מכשירים. מרכיב מרכזי ביצירת חוויות WebXR משכנעות הוא היכולת ליצור אינטראקציה עם הסביבה הווירטואלית. כאן נכנסים לתמונה WebXR Hit Test Manager ו-ray casting.

מה זה Ray Casting ומדוע הוא חשוב?

Ray casting, בהקשר של WebXR, היא טכניקה המשמשת לקבוע אם קרן וירטואלית (קו ישר) מצטלבת עם משטח בעולם האמיתי שזוהה על ידי מערכת ה-AR או אובייקט וירטואלי בסביבת ה-VR. חשבו על זה כמו להאיר מצביע לייזר לסביבה שלכם ולראות איפה הוא פוגע. WebXR Hit Test Manager מספק את הכלים לביצוע ray casts אלה ולאחזר את התוצאות. מידע זה חיוני למגוון אינטראקציות, כולל:

• מיקום אובייקט: לאפשר למשתמשים למקם אובייקטים וירטואליים על משטחים בעולם האמיתי, כמו הצבת כיסא וירטואלי בסלון שלהם (AR). שקלו משתמש בטוקיו המקשט את הדירה שלו באופן וירטואלי לפני שהוא מתחייב לרכישות רהיטים.
• מיקוד ובחירה: לאפשר למשתמשים לבחור אובייקטים וירטואליים או ליצור אינטראקציה עם רכיבי UI באמצעות מצביע וירטואלי או יד (AR/VR). תארו לעצמכם מנתח בלונדון המשתמש ב-AR כדי להטמיע מידע אנטומי על מטופל, ולבחור אזורים ספציפיים לבדיקה.
• ניווט: העברת האווטאר של המשתמש בעולם הווירטואלי על ידי הצבעה על מיקום והוראה לו לעבור לשם (VR). מוזיאון בפריז עשוי להשתמש ב-VR כדי לאפשר למבקרים לנווט בין תערוכות היסטוריות.
• זיהוי מחוות: שילוב של hit testing עם מעקב ידיים כדי לפרש מחוות משתמש, כמו צביטה כדי להתקרב או החלקה כדי לגלול (AR/VR). ניתן להשתמש בזה בפגישת עיצוב שיתופית בסידני, שבה משתתפים מתפעלים מודלים וירטואליים יחד.

הבנת WebXR Hit Test Manager

WebXR Hit Test Manager הוא חלק חיוני ב-WebXR API המאפשר ray casting. הוא מספק שיטות ליצירה וניהול של מקורות hit test, המגדירים את המקור והכיוון של הקרן. לאחר מכן המנהל משתמש במקורות אלה כדי לבצע בדיקות hit מול העולם האמיתי (ב-AR) או העולם הווירטואלי (ב-VR) ומחזיר מידע על כל הצטלבות. מושגי מפתח כוללים:

• XRFrame: XRFrame מייצג תמונת מצב בזמן של סצנת ה-XR, כולל תנוחת הצופה וכל המישורים או התכונות שזוהו. בדיקות Hit מתבצעות מול XRFrame.
• XRHitTestSource: מייצג את מקור הקרן שתוקרן. הוא מגדיר את המקור (היכן הקרן מתחילה) ואת הכיוון (לאן הקרן מצביעה). בדרך כלל תיצרו XRHitTestSource אחד לכל שיטת קלט (למשל, בקר, יד).
• XRHitTestResult: מכיל מידע על פגיעה מוצלחת, כולל התנוחה (מיקום וכיוון) של נקודת החיתוך והמרחק ממקור הקרן.
• XRHitTestTrackable: מייצג תכונה במעקב (כמו מישור) בעולם האמיתי.

הטמעת מערכת Hit Test בסיסית

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

שלב 1: בקשת WebXR Session ותמיכה ב-Hit Test

תחילה, עליכם לבקש WebXR session ולוודא שתכונת 'hit-test' מופעלת. תכונה זו נדרשת לשימוש ב-Hit Test Manager.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

הסבר:

• `navigator.xr.requestSession('immersive-ar', ...)`: מבקש immersive AR session. הארגומנט הראשון מציין את סוג ה-session ('immersive-ar' עבור AR, 'immersive-vr' עבור VR).
• `requiredFeatures: ['hit-test']`: מבקש באופן מכריע את התכונה 'hit-test', המאפשרת את ה-Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: יוצר XRHitTestSource, המגדיר את המקור והכיוון של הקרן. בדוגמה בסיסית זו, אנו משתמשים ב-reference space 'viewer', המתאים לנקודת המבט של המשתמש.

שלב 2: יצירת Render Loop

ה-render loop הוא הלב של יישום WebXR שלכם. שם אתם מעדכנים את הסצנה ומעבדים כל פריים. בתוך ה-render loop, תבצעו את ה-hit test ותעדכנו את מיקום האובייקט הווירטואלי שלכם.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

הסבר:

• `xrFrame.getHitTestResults(xrHitTestSource)`: מבצע את ה-hit test באמצעות XRHitTestSource שנוצר קודם לכן. הוא מחזיר מערך של אובייקטי XRHitTestResult, המייצגים את כל ההצטלבות שנמצאו.
• `hitTestResults[0]`: אנו לוקחים את תוצאת ה-hit הראשונה. בתרחישים מורכבים יותר, ייתכן שתרצו לחזור על כל התוצאות ולבחור את המתאימה ביותר.
• `hit.getPose(xrReferenceSpace)`: מאחזר את התנוחה (מיקום וכיוון) של ה-hit ב-reference space שצוין.
• `object3D.position.set(...)` ו-`object3D.quaternion.set(...)`: עדכן את המיקום והכיוון של האובייקט הווירטואלי שלך (object3D) כך שיתאימו לתנוחת ה-hit. זה ממקם את האובייקט בנקודת החיתוך.
• `object3D.visible = true/false`: שולט על הנראות של האובייקט הווירטואלי, וגורם לו להופיע רק כאשר נמצא hit.

שלב 3: הגדרת הסצנה התלת-ממדית שלכם (דוגמה עם Three.js)

דוגמה זו משתמשת ב-Three.js, ספריית JavaScript תלת-ממדית פופולרית, כדי ליצור סצנה פשוטה עם קובייה. אתם יכולים להתאים זאת לשימוש בספריות אחרות כמו Babylon.js או A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

חשוב: ודאו שאתם כוללים את ספריית Three.js בקובץ ה-HTML שלכם:

            


            

              
                Copy
              
            
          

טכניקות מתקדמות ואופטימיזציות

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

1. סינון תוצאות Hit Test

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

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. שימוש במקורות קלט חולפים

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

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. אופטימיזציה של ביצועים

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

• צמצמו את תדירות בדיקות ה-Hit: ביצוע בדיקות hit בכל פריים יכול להיות יקר. שקלו לצמצם את התדירות, במיוחד אם תנועת המשתמש איטית. אתם יכולים להשתמש בטיימר או לבצע בדיקות hit רק כאשר המשתמש יוזם פעולה.
• השתמשו בהיררכיית נפח תוחם (BVH): אם יש לכם סצנה מורכבת עם אובייקטים רבים, שימוש ב-BVH יכול להאיץ משמעותית את זיהוי ההתנגשויות. Three.js ו-Babylon.js מציעים יישומי BVH.
• LOD (רמת פירוט): השתמשו ברמות פירוט שונות עבור המודלים התלת-ממדיים שלכם בהתאם למרחק שלהם מהמצלמה. זה מצמצם את מספר הפוליגונים שצריך לעבד עבור אובייקטים מרוחקים.
• Occlusion Culling: אל תעבדו אובייקטים המוסתרים מאחורי אובייקטים אחרים. זה יכול לשפר משמעותית את הביצועים בסצנות מורכבות.

4. טיפול ב-Reference Spaces שונים

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

• Local: המקור של מערכת הקואורדינטות קבוע ביחס למיקום ההתחלתי של המשתמש. זה מתאים לחוויות שבהן המשתמש נשאר באזור קטן.
• Bounded-floor: המקור נמצא בגובה הרצפה, ומישור ה-XZ מייצג את הרצפה. זה מתאים לחוויות שבהן המשתמש יכול להסתובב בחדר.
• Unbounded: המקור אינו קבוע, והמשתמש יכול להסתובב בחופשיות. זה מתאים לחוויות AR בקנה מידה גדול.

בחירת ה-reference space המתאים חשובה כדי להבטיח שחוויית ה-WebXR שלכם תפעל כהלכה בסביבות שונות. אתם יכולים לבקש reference space ספציפי כאשר אתם יוצרים את ה-XR session.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. התמודדות עם תאימות מכשירים

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

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

עליכם גם לבדוק את חוויית ה-WebXR שלכם במגוון מכשירים כדי להבטיח שהיא פועלת כהלכה.

שיקולי בינאום

בעת פיתוח יישומי WebXR עבור קהל גלובלי, חשוב לקחת בחשבון בינאום (i18n) ולוקליזציה (l10n).

• טקסט ורכיבי UI: השתמשו בספריית לוקליזציה כדי לתרגם טקסט ורכיבי UI לשפות שונות. ודאו שפריסת ה-UI שלכם יכולה להכיל אורכי טקסט שונים. לדוגמה, מילים בגרמנית נוטות להיות ארוכות יותר ממילים באנגלית.
• יחידות מידה: השתמשו ביחידות מידה מתאימות לאזורים שונים. לדוגמה, השתמשו במטרים וקילומטרים ברוב המדינות, אך השתמשו ברגליים ומיילים בארצות הברית ובבריטניה. אפשרו למשתמשים לבחור את יחידות המידה המועדפות עליהם.
• פורמטים של תאריך ושעה: השתמשו בפורמטים מתאימים של תאריך ושעה לאזורים שונים. לדוגמה, השתמשו בפורמט YYYY-MM-DD במדינות מסוימות, ובפורמט MM/DD/YYYY באחרות.
• מטבעות: הציגו מטבעות בפורמט המתאים לאזורים שונים. השתמשו בספרייה לטיפול בהמרות מטבע.
• רגישות תרבותית: היו מודעים להבדלים תרבותיים והימנעו משימוש בתמונות, סמלים או שפה שעלולים להיות פוגעניים לתרבויות מסוימות. לדוגמה, למחוות ידיים מסוימות עשויות להיות משמעויות שונות בתרבויות שונות.

כלי WebXR ומשאבים לפיתוח

מספר כלים ומשאבים יכולים לעזור לכם בפיתוח WebXR:

• Three.js: ספריית JavaScript תלת-ממדית פופולרית ליצירת חוויות מבוססות WebGL.
• Babylon.js: מנוע JavaScript תלת-ממדי עוצמתי נוסף עם התמקדות בתמיכה ב-WebXR.
• A-Frame: מסגרת אינטרנט לבניית חוויות VR באמצעות HTML.
• WebXR Emulator: הרחבת דפדפן המאפשרת לכם לבדוק חוויות WebXR מבלי להזדקק למכשיר VR או AR פיזי.
• WebXR Device API Specification: מפרט ה-WebXR הרשמי מ-W3C.
• Mozilla Mixed Reality Blog: משאב נהדר ללמידה על WebXR וטכנולוגיות קשורות.

מסקנה

WebXR Hit Test Manager הוא כלי רב עוצמה ליצירת חוויות AR/VR אינטראקטיביות וסוחפות. על ידי הבנת המושגים של ray casting ו-Hit Test API, אתם יכולים לבנות יישומים משכנעים המאפשרים למשתמשים ליצור אינטראקציה עם העולם הווירטואלי בצורה טבעית ואינטואיטיבית. ככל שטכנולוגיית WebXR ממשיכה להתפתח, האפשרויות ליצירת חוויות חדשניות ומרתקות הן אינסופיות. זכרו לבצע אופטימיזציה של הקוד שלכם לביצועים ולשקול בינאום בעת פיתוח עבור קהל גלובלי. אמצו את האתגרים והתגמולים של בניית הדור הבא של חוויות אינטרנטיות סוחפות.