พัฒนาด้วย WebXR

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

การตรวจจับความลึกใน Android XR เป็นแบบสเตอริโอสโคป ซึ่งจะสตรีมแผนที่ความลึก 2 แผนที่แบบเรียลไทม์สำหรับการทำงานร่วมกันของ 2 ตา คุณอาจต้องอัปเดตโค้ด 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 ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้ด้วยการเปิดใช้ประสบการณ์ที่ใช้งานง่ายและสมจริงยิ่งขึ้น

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

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

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

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

สิทธิ์ใน WebXR

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

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

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