แหล่งข้อมูลอินพุต WebXR: การเรียนรู้การควบคุมคอนโทรลเลอร์และการติดตามมือเพื่อประสบการณ์ที่สมจริง

WebXR นำเสนอเครื่องมืออันทรงพลังสำหรับสร้างประสบการณ์ความเป็นจริงเสมือนและความเป็นจริงเสริมที่สมจริงได้โดยตรงในเบราว์เซอร์ แง่มุมที่สำคัญของแอปพลิเคชันที่สมจริงคือวิธีที่ผู้ใช้โต้ตอบกับโลกเสมือน WebXR ให้การสนับสนุนที่แข็งแกร่งสำหรับแหล่งข้อมูลอินพุตต่างๆ โดยหลักคือคอนโทรลเลอร์และการติดตามมือ การทำความเข้าใจวิธีใช้ประโยชน์จากวิธีการป้อนข้อมูลเหล่านี้มีความสำคัญอย่างยิ่งต่อการสร้างสรรค์ประสบการณ์ที่ใช้งานง่ายและน่าดึงดูดสำหรับผู้ชมทั่วโลก

ทำความเข้าใจเกี่ยวกับแหล่งข้อมูลอินพุตของ WebXR

ใน WebXR แหล่งข้อมูลอินพุต (input source) หมายถึงอุปกรณ์ทางกายภาพหรือวิธีการที่ใช้ในการโต้ตอบกับสภาพแวดล้อมเสมือน แหล่งข้อมูลอินพุตเหล่านี้มีได้ตั้งแต่คอนโทรลเลอร์คล้ายเกมแพดธรรมดาไปจนถึงระบบติดตามมือที่ซับซ้อน แหล่งข้อมูลอินพุตแต่ละแหล่งจะให้สตรีมข้อมูลที่นักพัฒนาสามารถใช้เพื่อควบคุมวัตถุ นำทางในฉาก และกระตุ้นการกระทำภายในประสบการณ์ XR

ประเภทของแหล่งข้อมูลอินพุต

• คอนโทรลเลอร์ (Controllers): อุปกรณ์ทางกายภาพที่มีปุ่ม, จอยสติ๊ก, ไกปืน (triggers) และทัชแพดที่ผู้ใช้ถือและควบคุม คอนโทรลเลอร์เป็นวิธีการป้อนข้อมูลที่พบบ่อยและเชื่อถือได้สำหรับประสบการณ์ VR
• การติดตามมือ (Hand Tracking): ใช้กล้องและอัลกอริทึมคอมพิวเตอร์วิทัศน์ (computer vision) เพื่อตรวจจับและติดตามมือของผู้ใช้ในพื้นที่ 3 มิติ สิ่งนี้ช่วยให้เกิดการโต้ตอบที่เป็นธรรมชาติและใช้งานง่ายกับสภาพแวดล้อมเสมือน
• แหล่งข้อมูลอินพุตอื่นๆ: แม้จะพบได้น้อยกว่า แต่ WebXR ยังสามารถรองรับแหล่งข้อมูลอินพุตอื่นๆ เช่น การติดตามศีรษะ (โดยใช้การโต้ตอบตามการจ้องมอง) และการจดจำเสียง

การทำงานกับคอนโทรลเลอร์ใน WebXR

คอนโทรลเลอร์เป็นแหล่งข้อมูลอินพุตที่รองรับอย่างกว้างขวางและค่อนข้างตรงไปตรงมาสำหรับการพัฒนา WebXR มีความสมดุลระหว่างความแม่นยำและความสะดวกในการใช้งาน ทำให้เหมาะสำหรับแอปพลิเคชันที่หลากหลาย

การตรวจจับและเข้าถึงคอนโทรลเลอร์

WebXR API มีอีเวนต์ (event) เพื่อแจ้งให้นักพัฒนาทราบเมื่อมีแหล่งข้อมูลอินพุตใหม่เชื่อมต่อหรือตัดการเชื่อมต่อ อีเวนต์ xr.session.inputsourceschange เป็นวิธีหลักในการตรวจจับการเปลี่ยนแปลงของแหล่งข้อมูลอินพุตที่มีอยู่

            xrSession.addEventListener('inputsourceschange', (event) => {
  // New input source connected
  event.added.forEach(inputSource => {
    console.log('New input source:', inputSource);
    // Handle the new input source
  });

  // Input source disconnected
  event.removed.forEach(inputSource => {
    console.log('Input source removed:', inputSource);
    // Handle the disconnected input source
  });
});

            

              
                Copy
              
            
          

เมื่อตรวจพบแหล่งข้อมูลอินพุตแล้ว คุณสามารถเข้าถึงคุณสมบัติต่างๆ เพื่อระบุความสามารถและวิธีการโต้ตอบกับมันได้ อาร์เรย์ inputSource.profiles ประกอบด้วยรายการโปรไฟล์มาตรฐานที่อธิบายเลย์เอาต์และฟังก์ชันการทำงานของคอนโทรลเลอร์ โปรไฟล์ที่พบบ่อย ได้แก่ 'generic-trigger', 'oculus-touch' และ 'google-daydream'

การรับข้อมูลจากคอนโทรลเลอร์

ในการรับสถานะปัจจุบันของคอนโทรลเลอร์ (เช่น การกดปุ่ม, ตำแหน่งจอยสติ๊ก, ค่าไกปืน) คุณต้องใช้เมธอด XRFrame.getControllerState() เมธอดนี้จะคืนค่าออบเจ็กต์ XRInputSourceState ที่มีค่าอินพุตปัจจุบันของคอนโทรลเลอร์

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (inputSource.hand) continue; // Skip hand tracking

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Access button states
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Handle button press event
            console.log('Button pressed:', button);
          }
        }

        // Access axes values (e.g., joystick positions)
        for (const axis of inputSourceState.axes) {
          console.log('Axis value:', axis);
          // Use axis value to control movement or other actions
        }

         //Access squeeze state (if available)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze pressed");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

การแสดงผลคอนโทรลเลอร์ในโลกเสมือน

สิ่งสำคัญคือต้องให้การตอบสนองทางภาพแก่ผู้ใช้เพื่อบ่งชี้การมีอยู่และตำแหน่งของคอนโทรลเลอร์ในโลกเสมือน คุณสามารถทำได้โดยการสร้างโมเดล 3 มิติของคอนโทรลเลอร์และอัปเดตตำแหน่งและการวางแนวตามท่าทาง (pose) ของคอนโทรลเลอร์

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Skip hand tracking
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Update the controller model's position and rotation
        controllerModel.position.set(gripPose.transform.position.x, gripPose.transform.position.y, gripPose.transform.position.z);
        controllerModel.quaternion.set(gripPose.transform.orientation.x, gripPose.transform.orientation.y, gripPose.transform.orientation.z, gripPose.transform.orientation.w);
    }
}

            

              
                Copy
              
            
          

ตัวอย่าง: การโต้ตอบโดยใช้คอนโทรลเลอร์ – การเคลื่อนย้าย (Teleportation)

กรณีการใช้งานทั่วไปสำหรับคอนโทรลเลอร์คือการเคลื่อนย้าย (teleportation) ซึ่งช่วยให้ผู้ใช้สามารถเคลื่อนที่ได้อย่างรวดเร็วภายในสภาพแวดล้อมเสมือน นี่คือตัวอย่างง่ายๆ ของวิธีการใช้การเคลื่อนย้ายโดยใช้ไกปืนของคอนโทรลเลอร์:

            // Check if the trigger button is pressed
if (inputSourceState.buttons[0].pressed) {
  // Perform teleportation logic
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

การใช้ประโยชน์จากพลังของการติดตามมือใน WebXR

การติดตามมือเป็นวิธีการโต้ตอบที่เป็นธรรมชาติและใช้งานง่ายกว่าคอนโทรลเลอร์ ช่วยให้ผู้ใช้สามารถจัดการวัตถุเสมือนได้โดยตรง ทำท่าทาง และโต้ตอบกับสภาพแวดล้อมโดยใช้มือของตนเอง

การเปิดใช้งานการติดตามมือ

การติดตามมือจำเป็นต้องร้องขอคุณสมบัติเสริม (optional feature) 'hand-tracking' เมื่อสร้างเซสชัน WebXR

            navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: [],
  optionalFeatures: ['hand-tracking']
}).then(session => {
  xrSession = session;
  // ...
});

            

              
                Copy
              
            
          

การเข้าถึงข้อมูลมือ

เมื่อเปิดใช้งานการติดตามมือแล้ว คุณสามารถเข้าถึงข้อมูลมือผ่านคุณสมบัติ inputSource.hand ได้ คุณสมบัตินี้จะคืนค่าออบเจ็กต์ XRHand ซึ่งแสดงถึงมือของผู้ใช้ ออบเจ็กต์ XRHand ให้การเข้าถึงตำแหน่งและการวางแนวของข้อต่อในมือ เช่น ปลายนิ้ว ข้อนิ้ว และฝ่ามือ

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (!inputSource.hand) continue; // Skip controllers

      // Get the XRHand object
      const hand = inputSource.hand;

      // Iterate through the joints of the hand
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Get the pose of the joint
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Access the joint's position and orientation
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Update the position and rotation of a 3D model representing the joint
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

การแสดงผลมือในโลกเสมือน

เช่นเดียวกับคอนโทรลเลอร์ การให้การตอบสนองทางภาพแก่ผู้ใช้เพื่อแสดงมือของพวกเขาในโลกเสมือนเป็นสิ่งสำคัญ คุณสามารถทำได้โดยการสร้างโมเดล 3 มิติของมือและอัปเดตตำแหน่งและการวางแนวตามข้อมูลการติดตามมือ หรือคุณสามารถใช้การแสดงภาพที่เรียบง่ายขึ้น เช่น ทรงกลมหรือลูกบาศก์เพื่อแสดงตำแหน่งข้อต่อ

ตัวอย่าง: การโต้ตอบโดยใช้มือ – การหยิบจับวัตถุ

หนึ่งในกรณีการใช้งานที่พบบ่อยและเป็นธรรมชาติที่สุดสำหรับการติดตามมือคือการหยิบจับและจัดการกับวัตถุเสมือน นี่คือตัวอย่างง่ายๆ ของวิธีการใช้การหยิบจับวัตถุโดยใช้การติดตามมือ:

            // Check if a finger is close to an object
if (distanceBetweenFingerAndObject < threshold) {
  // Grab the object
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Attach the object to the hand
}

// When the finger moves away from the object
if (distanceBetweenFingerAndObject > threshold) {
  // Release the object
  grabbedObject.parent = null; // Detach the object from the hand
  // Apply velocity to the object based on the hand's movement
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

แนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาอินพุต WebXR

เพื่อสร้างประสบการณ์ WebXR ที่น่าสนใจและใช้งานง่าย สิ่งสำคัญคือต้องปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

• ให้การตอบสนองทางภาพที่ชัดเจน: ควรให้การตอบสนองทางภาพแก่ผู้ใช้เสมอเพื่อบ่งชี้การมีอยู่และสถานะของอุปกรณ์อินพุต (คอนโทรลเลอร์หรือมือ)
• ให้ความสำคัญกับการโต้ตอบที่ใช้งานง่าย: ออกแบบการโต้ตอบที่ให้ความรู้สึกเป็นธรรมชาติและใช้งานง่ายสำหรับผู้ใช้ พิจารณาใช้การติดตามมือสำหรับงานที่เกี่ยวข้องกับการจัดการโดยตรง และใช้คอนโทรลเลอร์สำหรับงานที่ต้องการความแม่นยำหรือการควบคุมที่ซับซ้อนมากขึ้น
• ปรับปรุงประสิทธิภาพให้เหมาะสม: การติดตามมือและอินพุตจากคอนโทรลเลอร์อาจใช้ประสิทธิภาพสูง ควรปรับโค้ดของคุณเพื่อลดความล่าช้าและให้แน่ใจว่าประสบการณ์จะราบรื่นและตอบสนองได้ดี พิจารณาใช้เทคนิคต่างๆ เช่น object pooling และ LOD (Level of Detail) เพื่อปรับปรุงประสิทธิภาพ
• จัดการอีเวนต์อินพุตอย่างมีประสิทธิภาพ: หลีกเลี่ยงการดำเนินการที่ใช้ทรัพยากรสูงโดยตรงภายในตัวจัดการอีเวนต์อินพุต แต่ให้จัดคิวอีเวนต์อินพุตและประมวลผลในเธรดแยกต่างหากหรือใช้ requestAnimationFrame เพื่อหลีกเลี่ยงการบล็อกเธรดการเรนเดอร์หลัก
• รองรับแหล่งข้อมูลอินพุตหลายแหล่ง: จัดเตรียมกลไกสำรองสำหรับผู้ใช้ที่ไม่มีการเข้าถึงการติดตามมือหรือคอนโทรลเลอร์บางประเภท พิจารณาให้ผู้ใช้สามารถสลับระหว่างวิธีการป้อนข้อมูลต่างๆ ตามความต้องการและฮาร์ดแวร์ที่มีอยู่
• การเข้าถึงได้ (Accessibility): ออกแบบประสบการณ์ XR ของคุณโดยคำนึงถึงการเข้าถึงได้ จัดเตรียมวิธีการป้อนข้อมูลทางเลือกสำหรับผู้ใช้ที่มีความพิการ เช่น การควบคุมด้วยเสียงหรือการโต้ตอบตามการจ้องมอง ตรวจสอบให้แน่ใจว่าการโต้ตอบทั้งหมดสื่อสารอย่างชัดเจนผ่านสัญญาณภาพและเสียง

ข้อควรพิจารณาในระดับสากลสำหรับการออกแบบอินพุต

เมื่อออกแบบประสบการณ์ WebXR สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาความแตกต่างทางวัฒนธรรมและข้อกำหนดด้านการเข้าถึงได้ นี่คือปัจจัยสำคัญบางประการที่ควรคำนึงถึง:

• ความแตกต่างทางวัฒนธรรมในการจดจำท่าทาง: ท่าทางต่างๆ อาจมีความหมายแตกต่างกันในวัฒนธรรมที่แตกต่างกัน หลีกเลี่ยงการใช้ท่าทางที่อาจไม่เหมาะสมหรือถูกตีความผิดในบางภูมิภาค พิจารณาให้มีวิธีการโต้ตอบทางเลือกหรืออนุญาตให้ผู้ใช้ปรับแต่งการจับคู่ท่าทางได้ ตัวอย่างเช่น ท่าทางยกนิ้วโป้ง (thumbs-up) เป็นสัญลักษณ์เชิงบวกในหลายวัฒนธรรมตะวันตก แต่อาจเป็นที่น่ารังเกียจในบางส่วนของตะวันออกกลางและอเมริกาใต้
• ความหลากหลายของขนาดและรูปร่างของมือ: อัลกอริทึมการติดตามมืออาจต้องปรับให้เข้ากับความหลากหลายของขนาดและรูปร่างของมือในกลุ่มประชากรที่แตกต่างกัน จัดเตรียมตัวเลือกการสอบเทียบเพื่อให้ผู้ใช้สามารถปรับแต่งการติดตามมือให้เข้ากับลักษณะเฉพาะของมือของตนได้
• ภาษาและการแปล (Localization): ตรวจสอบให้แน่ใจว่าข้อความและเสียงทั้งหมดได้รับการแปลอย่างถูกต้องสำหรับภาษาต่างๆ พิจารณาใช้อินเทอร์เฟซที่ใช้ไอคอนเพื่อลดความจำเป็นในการแปลข้อความ
• การเข้าถึงได้สำหรับผู้ใช้ที่มีความพิการ: ออกแบบประสบการณ์ XR ของคุณโดยคำนึงถึงการเข้าถึงได้ตั้งแต่เริ่มต้น จัดเตรียมวิธีการป้อนข้อมูลทางเลือกสำหรับผู้ใช้ที่มีความพิการ เช่น การควบคุมด้วยเสียง การโต้ตอบตามการจ้องมอง หรือการเข้าถึงด้วยสวิตช์ ตรวจสอบให้แน่ใจว่าการโต้ตอบทั้งหมดสื่อสารอย่างชัดเจนผ่านสัญญาณภาพและเสียง พิจารณาให้มีตัวเลือกในการปรับแต่งขนาดและสีของข้อความและไอคอนเพื่อปรับปรุงการมองเห็น
• ความพร้อมใช้งานและราคาของฮาร์ดแวร์: คำนึงถึงความพร้อมใช้งานและราคาของฮาร์ดแวร์ XR ในภูมิภาคต่างๆ ออกแบบประสบการณ์ของคุณให้เข้ากันได้กับอุปกรณ์หลากหลายประเภท รวมถึงชุดหูฟัง VR มือถือระดับล่างและสมาร์ทโฟนที่รองรับความเป็นจริงเสริม

สรุป

การเรียนรู้แหล่งข้อมูลอินพุตของ WebXR ซึ่งรวมถึงคอนโทรลเลอร์และการติดตามมือ เป็นสิ่งจำเป็นสำหรับการสร้างประสบการณ์ที่สมจริง น่าสนใจ และใช้งานง่าย ด้วยการทำความเข้าใจความสามารถของวิธีการป้อนข้อมูลแต่ละวิธีและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบการโต้ตอบ คุณสามารถสร้างแอปพลิเคชัน XR ที่น่าดึงดูด เข้าถึงได้ และสนุกสนานสำหรับผู้ชมทั่วโลก ในขณะที่เทคโนโลยี WebXR ยังคงพัฒนาต่อไป เราคาดหวังว่าจะได้เห็นวิธีการป้อนข้อมูลที่ซับซ้อนมากยิ่งขึ้น ซึ่งจะทำให้เส้นแบ่งระหว่างโลกทางกายภาพและโลกเสมือนเลือนลางยิ่งขึ้น

ด้วยการใส่ใจในรายละเอียดของการโต้ตอบของผู้ใช้และนำแนวทางปฏิบัติที่ดีที่สุดเหล่านี้มาใช้ นักพัฒนาสามารถสร้างประสบการณ์ WebXR ที่สมจริง ใช้งานง่าย และเข้าถึงได้สำหรับผู้ใช้ทั่วโลก อนาคตของ XR นั้นสดใส และด้วยการมุ่งเน้นไปที่การออกแบบที่รอบคอบและเน้นผู้ใช้เป็นศูนย์กลาง เราสามารถปลดล็อกศักยภาพสูงสุดของเทคโนโลยีที่เปลี่ยนแปลงโลกนี้ได้