พัฒนาสำหรับเว็บใน Android XR

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ
ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →
ชุดหูฟัง XR
แว่นตา XR แบบใช้สาย
ดูข้อมูลเกี่ยวกับอุปกรณ์ XR ประเภทต่างๆ →

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

Chrome สำหรับ Android XR รองรับฟีเจอร์ WebXR ต่อไปนี้

หากต้องการดู WebXR ในการทำงาน ให้เปิด Chrome ในอุปกรณ์ Android XR หรือโปรแกรมจำลอง Android XR แล้วเรียกดูตัวอย่าง WebXR อย่างเป็นทางการ

ข้อกำหนดเบื้องต้น: เลือกเฟรมเวิร์ก WebXR

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

  • หากต้องการควบคุมฉาก 3 มิติอย่างเต็มที่และสร้างการโต้ตอบที่กำหนดเองหรือซับซ้อน เราขอแนะนำ three.js และ babylon.js
  • หากต้องการสร้างต้นแบบอย่างรวดเร็วหรือใช้ไวยากรณ์ที่คล้ายกับ HTML เพื่อกำหนดฉาก 3 มิติ เรา ขอแนะนำ A-Frame และ model-viewer
  • นอกจากนี้ คุณยังดูเฟรมเวิร์กและโค้ดตัวอย่างเพิ่มเติมได้ด้วย

หากต้องการใช้ JavaScript และ WebGL แบบเนทีฟ โปรดดู WebXR ใน GitHub เพื่อสร้างการทดลอง WebXR ครั้งแรก

ปรับให้เหมาะกับ Android XR

หากคุณมีประสบการณ์การใช้งาน WebXR ที่ทำงานบนอุปกรณ์อื่นๆ อยู่แล้ว คุณอาจต้องอัปเดตโค้ดเพื่อให้รองรับ WebXR บน Android XR อย่างเหมาะสม ตัวอย่างเช่น ประสบการณ์การใช้งาน WebXR ที่เน้นอุปกรณ์เคลื่อนที่จะต้องปรับจากหน้าจอเดียวเป็น 2 หน้าจอแบบสเตอริโอใน Android XR ประสบการณ์การใช้งาน WebXR ที่กำหนดเป้าหมายเป็นอุปกรณ์เคลื่อนที่หรือชุดหูฟังที่มีอยู่อาจต้องปรับโค้ดอินพุตให้เป็นแบบใช้มือเป็นหลัก

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

เกี่ยวกับการสร้างความรู้สึกถึงความลึกใน WebXR

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

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

Depth Sensing ใน Android XR เป็นแบบสเตอริโอ ซึ่งสตรีมแผนที่ความลึก 2 รายการแบบเรียลไทม์สำหรับการมองเห็นด้วยตาสองข้าง ซึ่งแตกต่างจาก Depth Sensing ในโทรศัพท์มือถือ คุณอาจต้องอัปเดตโค้ด WebXR เพื่อรองรับเฟรมความลึกแบบสเตอริโออย่างเหมาะสม

ตัวอย่างต่อไปนี้จะแสดงข้อมูลความลึกแบบสเตอริโอ

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

ประเด็นสำคัญเกี่ยวกับโค้ด

  • ต้องแสดงท่าทางที่ถูกต้องเพื่อเข้าถึงข้อมูลความลึก
  • pose.views จะแสดงมุมมองสำหรับตาแต่ละข้าง และลูป for ที่เกี่ยวข้องจะทำงาน 2 ครั้ง

การแสดงภาพความลึกแบบเรียลไทม์โดยใช้ WebXR Depth Sensing API สีแดงหมายถึงพิกเซลที่อยู่ใกล้กว่า ส่วนสีน้ำเงินหมายถึงพิกเซลที่อยู่ไกลกว่า

เพิ่มการโต้ตอบด้วยมือใน WebXR

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

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

อุปกรณ์บางอย่าง เช่น โทรศัพท์มือถือหรืออุปกรณ์ XR ที่เน้นคอนโทรลเลอร์อาจยังไม่รองรับ Hand Input คุณอาจต้องอัปเดตโค้ด WebXR เพื่อรองรับ Hand Input อย่างเหมาะสม Immersive VR Session with Hands จะแสดง วิธีผสานรวมการติดตามการเคลื่อนไหวของมือเข้ากับโปรเจ็กต์ WebXR

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

การสาธิต WebXR เกี่ยวกับการใช้การบีบมือเพื่อปัดหน้าจอออกเพื่อให้มองเห็นความเป็นจริง

สิทธิ์ใน WebXR

เมื่อคุณใช้ WebXR API ที่ต้องได้รับสิทธิ์ Chrome จะขอให้ผู้ใช้ให้สิทธิ์แก่เว็บไซต์ WebXR API ทั้งหมดต้องได้รับสิทธิ์การทำแผนที่ 3 มิติและการติดตามกล้อง นอกจากนี้ สิทธิ์ยังช่วยปกป้องการเข้าถึงข้อมูลใบหน้า ดวงตา และมือที่ติดตาม หากได้รับสิทธิ์ที่จำเป็นทั้งหมด การเรียก navigator.xr.requestSession('immersive-ar', options) จะแสดงผล เซสชัน WebXR ที่ถูกต้อง

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

เช่นเดียวกับสิทธิ์ทั้งหมดบนเว็บ คุณควรจัดการสถานการณ์ที่ระบบปฏิเสธสิทธิ์อย่างเหมาะสม