Virtual Reality ขึ้นสู่เว็บแล้ว

ข้อมูลเบื้องต้นที่จะช่วยให้คุณพร้อมรับประสบการณ์ที่สมจริงแบบหลายรูปแบบ ไม่ว่าจะเป็น Virtual Reality, Augmented Reality และอื่นๆ

Joe Medley
Joe Medley
GitHub

ประสบการณ์ที่สมจริงได้เข้ามาสู่เว็บใน Chrome 79 WebXR Device API จะนำเทคโนโลยีความจริงเสมือนมาสู่โลกแห่งความเป็นจริง ส่วนการรองรับเทคโนโลยีความจริงเสริมจะพร้อมใช้งานใน Chrome 81 ขณะที่การอัปเดต GamePad API ได้ขยายการใช้งานการควบคุมขั้นสูงไปสู่ VR เบราว์เซอร์อื่นๆ จะรองรับข้อกำหนดเหล่านี้ในเร็วๆ นี้ ซึ่งรวมถึง Firefox Reality, Oculus Browser, Edge และเบราว์เซอร์ Helio ของ Magic Leap และอื่นๆ

บทความนี้เริ่มต้นเป็นซีรีส์บนเว็บแบบสมจริง บทความนี้จะกล่าวถึงการตั้งค่าแอปพลิเคชัน WebXR พื้นฐาน รวมถึงการเข้าและออกจากเซสชัน XR บทความต่อๆ ไปจะกล่าวถึงเฟรมลูป (เครื่องมือหลักของประสบการณ์ WebXR) ข้อมูลเฉพาะของเทคโนโลยีความจริงเสริม และ WebXR Hit Test API ซึ่งเป็นวิธีตรวจหาพื้นผิวในเซสชัน AR ทุกอย่างที่เราพูดถึงในบทความนี้และบทความต่อๆ ไปจะมีผลกับทั้ง AR และ VR เท่าๆ กัน เว้นแต่จะระบุไว้เป็นอย่างอื่น

เว็บที่สมจริงคืออะไร

แม้ว่าเราจะใช้ 2 คำเพื่ออธิบายประสบการณ์ที่สมจริง ซึ่งได้แก่ เทคโนโลยีความจริงเสริม (AR) และเทคโนโลยีความจริงเสมือน (VR) แต่หลายคนก็มองว่าเทคโนโลยีเหล่านี้อยู่ในสเปกตรัมตั้งแต่ความจริงทั้งหมดไปจนถึงเสมือนจริงทั้งหมด โดยมีระดับการสมจริงอยู่ระหว่างกลาง ส่วน "X" ใน "XR" มีไว้เพื่อสะท้อนแนวคิดดังกล่าวโดยเป็นตัวแปรทางพีชคณิตที่แทนสิ่งต่างๆ ในสเปกตรัมของประสบการณ์ที่สมจริง

กราฟที่แสดงสเปกตรัมของประสบการณ์ภาพตั้งแต่ภาพเสมือนจริงสมบูรณ์แบบไปจนถึงภาพสมจริงที่สมจริง
ช่วงของประสบการณ์ที่สมจริง

ตัวอย่างประสบการณ์ที่สมจริง ได้แก่

  • เกม
  • วิดีโอ 360 องศา
  • วิดีโอ 2 มิติ (หรือ 3 มิติ) แบบดั้งเดิมที่นำเสนอในสภาพแวดล้อมที่สมจริง
  • การซื้อบ้าน
  • การดูผลิตภัณฑ์ในบ้านก่อนซื้อ
  • ศิลปะที่สมจริง
  • ไอเดียเจ๋งๆ ที่ไม่มีใครเคยคิดมาก่อน

แนวคิดและการใช้งาน

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

โค้ดในบทความนี้อิงตามตัวอย่างพื้นฐานของกลุ่มทํางานเว็บที่สมจริง (เดโม, ซอร์ส) แต่มีการแก้ไขเพื่อให้เข้าใจง่ายและชัดเจน

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

ขอเซสชัน

การป้อนเซสชัน XR ต้องใช้ท่าทางสัมผัสของผู้ใช้ หากต้องการดำเนินการดังกล่าว ให้ใช้การตรวจหาองค์ประกอบเพื่อทดสอบ XRSystem (ผ่าน navigator.xr) แล้วโทรไปที่ XRSystem.isSessionSupported() โปรดทราบว่าใน Chrome เวอร์ชัน 79 และ 80 ออบเจ็กต์ XRSystem จะเรียกว่า XR

ในตัวอย่างด้านล่าง ผมระบุว่าผมต้องการเซสชัน Virtual Reality ที่มีประเภทเซสชัน 'immersive-vr' ประเภทเซสชันอื่นๆ ได้แก่ 'immersive-ar' และ 'inline' เซสชันในบรรทัดใช้สำหรับแสดงเนื้อหาภายใน HTML และมักใช้สำหรับเนื้อหาตัวอย่าง ตัวอย่างเซสชัน AR แบบสมจริงจะแสดงให้เห็นถึงเรื่องนี้ เราจะอธิบายเรื่องนี้ในบทความถัดไป

เมื่อทราบว่ารองรับเซสชัน Virtual Reality แล้ว ฉันจะเปิดใช้ปุ่มที่ทำให้ฉันขอท่าทางสัมผัสของผู้ใช้ได้

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-vr');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter VR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

หลังจากเปิดใช้ปุ่มแล้ว ฉันจะรอเหตุการณ์คลิกแล้วขอเซสชัน

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-vr')
    .then((session) => {
      xrSession = session;
      xrButton.textContent = 'Exit XR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

โปรดสังเกตลำดับชั้นของออบเจ็กต์ในโค้ดนี้ โดยจะย้ายจาก navigator ไปยัง xr ไปยังอินสแตนซ์ XRSession ใน API เวอร์ชันแรกๆ สคริปต์ต้องขออุปกรณ์ก่อนขอเซสชัน ปัจจุบันผู้ใช้ได้อุปกรณ์มาโดยปริยาย

เข้าสู่เซสชัน

หลังจากได้รับเซสชันแล้ว ฉันต้องเริ่มและเข้าสู่เซสชัน แต่ก่อนอื่น ผมต้องตั้งค่าบางอย่าง เซสชันต้องมีตัวแฮนเดิลเหตุการณ์ onend เพื่อให้แอปหรือหน้าเว็บรีเซ็ตได้เมื่อผู้ใช้ออก

ฉันยังต้องการองค์ประกอบ <canvas> เพื่อวาดฉากด้วย โดยจะต้องเป็น WebGLRenderingContext หรือ WebGL2RenderingContext ที่ใช้ร่วมกับ XR ได้ การวาดทั้งหมดจะดำเนินการโดยใช้องค์ประกอบเหล่านี้หรือเฟรมเวิร์กที่ใช้ WebGL เช่น Three.js

ตอนนี้ฉันมีที่วาดแล้ว แต่ต้องมีแหล่งที่มาของเนื้อหาที่จะวาด ด้วยเหตุนี้ เราจึงสร้างอินสแตนซ์ของ XRWebGLLayer ฉันเชื่อมโยงกับแคนวาสโดยเรียกใช้ XRSession.updateRenderState()

เมื่ออยู่ในเซสชัน ฉันต้องการวิธีระบุตำแหน่งของสิ่งต่างๆ ในระบบเสมือนจริง ฉันต้องการพื้นที่อ้างอิง พื้นที่อ้างอิง 'local-floor' คือพื้นที่ที่จุดเริ่มต้นอยู่ใกล้กับผู้ดู และแกน y มีค่า 0 ที่ระดับพื้น และคาดว่าจะไม่เคลื่อนไหว มีพื้นที่อ้างอิงประเภทอื่นๆ แต่เป็นหัวข้อที่ซับซ้อนกว่าที่ผมจะอธิบายได้เลยนะ ฉันบันทึกพื้นที่อ้างอิงไปยังตัวแปรเนื่องจากต้องใช้เมื่อวาดบนหน้าจอ

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  webGLRenContext = canvas.getContext('webgl', { xrCompatible: true });

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

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

หลังจากได้พื้นที่อ้างอิงแล้ว เราจะโทรหา XRSession.requestAnimationFrame() นี่คือจุดเริ่มต้นของการแสดงเนื้อหาเสมือนจริง ซึ่งทำในเฟรม Loop

เรียกใช้เฟรมวน

เฟรมวนซ้ำคือลูปอนันต์ที่ควบคุมโดย User Agent ซึ่งจะวาดเนื้อหาซ้ำๆ บนหน้าจอ เนื้อหาจะวาดเป็นบล็อกแยกต่างหากที่เรียกว่าเฟรม เฟรมที่แสดงต่อกันจะทำให้เกิดภาพลวงตาว่าเคลื่อนไหว สำหรับแอปพลิเคชัน VR เฟรมต่อวินาทีอาจอยู่ที่ 60-144 AR สำหรับ Android จะทำงานที่ 30 เฟรมต่อวินาที โค้ดไม่ควรกำหนดอัตราเฟรมใดๆ

ขั้นตอนพื้นฐานของเฟรมลูปมีดังนี้

  1. โทรมาที่ XRSession.requestAnimationFrame() ในการตอบกลับ User Agent จะเรียกใช้ XRFrameRequestCallback ที่คุณกำหนดไว้
  2. ในฟังก์ชัน Callback ให้ทำดังนี้
    1. โทรหา XRSession.requestAnimationFrame() อีกครั้ง
    2. จับท่าทางของผู้ชม
    3. ส่ง ('bind') WebGLFramebuffer จาก XRWebGLLayer ไปยัง WebGLRenderingContext
    4. วนผ่านออบเจ็กต์ XRView แต่ละรายการ โดยดึงข้อมูล XRViewport จาก XRWebGLLayer และส่งไปยัง WebGLRenderingContext
    5. วาดรูปภาพลงในเฟรมบัฟเฟอร์

ส่วนที่เหลือของบทความนี้จะอธิบายขั้นตอนที่ 1 และบางส่วนของขั้นตอนที่ 2 ซึ่งได้แก่ การตั้งค่าและการเรียกใช้ XRFrameRequestCallback รายการที่เหลือของขั้นตอนที่ 2 จะอธิบายในส่วนที่ 2

XRFrameRequestCallback

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

ก่อนที่จะทำอะไรอย่างอื่น ฉันจะขอเฟรมภาพเคลื่อนไหวถัดไป ดังที่กล่าวไว้ก่อนหน้านี้ ช่วงเวลาของเฟรมจะกำหนดโดย User Agent ตามฮาร์ดแวร์พื้นฐาน การขอเฟรมถัดไปก่อนจะช่วยให้มั่นใจได้ว่าเฟรมจะวนซ้ำต่อไปได้หากเกิดข้อผิดพลาดระหว่างการเรียกกลับ

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  // Render a frame.
}

ตอนนี้ถึงเวลาวาดอะไรให้ผู้ชมดู การสนทนานี้ไว้สำหรับส่วนที่ 2 ก่อนไปดูส่วนนั้น เราขอแสดงวิธีสิ้นสุดเซสชันให้คุณดู

สิ้นสุดเซสชัน

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

โปรดจำจากส่วนการเข้าสู่เซสชันว่าในระหว่างการตั้งค่า เราได้เพิ่มตัวแฮนเดิลเหตุการณ์ onend

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);
  // More setup…
}

ภายในตัวแฮนเดิลเหตุการณ์ ให้คืนค่าสถานะของแอปก่อนที่ผู้ใช้จะเข้าสู่เซสชัน

function onSessionEnded(event) {
  xrSession = null;
  xrButton.textContent = 'Enter VR';
}

บทสรุป

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

รูปภาพโดย JESHOOTS.COM ใน Unsplash