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

อุปกรณ์ XR ที่ใช้ได้

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

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

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

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

• Device API
• โมดูล AR
• โมดูลเกมแพด
• Hit Test Module
• การป้อนข้อมูลด้วยมือ
• แองเคอร์
• การตรวจจับความลึก
• การประมาณแสง

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

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

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

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

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

สิทธิ์ใน WebXR

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

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

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