Augmented Reality: คุณอาจรู้อยู่แล้ว

หากคุณเคยใช้ WebXR Device API อยู่แล้ว ก็ถือว่าเกือบเสร็จแล้ว

Joe Medley
Joe Medley
GitHub

WebXR Device API เปิดตัวไปเมื่อฤดูใบไม้ร่วงที่แล้วใน Chrome 79 ตามที่ได้แจ้งไปก่อนหน้านี้ การใช้งาน API ของ Chrome ยังอยู่ระหว่างดำเนินการ Chrome ยินดีที่จะประกาศว่างานบางส่วนเสร็จสมบูรณ์แล้ว Chrome 81 มีฟีเจอร์ใหม่ 2 รายการ ได้แก่

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

ดูข้อมูลเกี่ยวกับการทดสอบ Hit ได้ที่บทความการวางตำแหน่งวัตถุเสมือนจริงในมุมมองในชีวิตจริง โค้ดในบทความนี้อิงตามตัวอย่างเซสชัน AR แบบสมจริง (demosource) จากตัวอย่าง WebXR Device API ของกลุ่มทํางานเว็บที่สมจริง

ก่อนที่จะเจาะลึกโค้ด คุณควรใช้ตัวอย่างเซสชัน AR ที่สมจริงอย่างน้อย 1 ครั้ง คุณต้องมีโทรศัพท์ Android รุ่นใหม่ที่ใช้ Chrome 81 ขึ้นไป

มีประโยชน์สำหรับอะไรบ้าง

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

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

เราพูดไปไกลหน่อย ถ้าจะทำอย่างที่บอกไว้ คุณต้องมี ฟังก์ชัน AR และวิธีตรวจหาแพลตฟอร์มต่างๆ บทความนี้กล่าวถึงเรื่องแรก บทความประกอบเกี่ยวกับ WebXR Hit Test API (ลิงก์ไว้ด้านบน) จะกล่าวถึงกรณีหลัง

กำลังขอเซสชัน

การขอเซสชันจะคล้ายกับสิ่งที่คุณเคยเห็นมาก่อน ก่อนอื่น ให้ตรวจสอบว่าอุปกรณ์ปัจจุบันมีเซสชันประเภทที่ต้องการหรือไม่โดยเรียกใช้ xr.isSessionSupported() แทนที่จะขอ 'immersive-vr' เหมือนก่อนหน้านี้ ให้ขอ 'immersive-ar'

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

การดำเนินการนี้จะเปิดใช้ปุ่ม "เข้าสู่ AR" เช่นเดียวกับก่อนหน้านี้ เมื่อผู้ใช้คลิก ให้เรียกใช้ xr.requestSession() ซึ่งผ่าน 'immersive-ar' ด้วย

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

พร็อพเพอร์ตี้เพื่อประโยชน์

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

การเข้าเซสชัน

โปรดดูลักษณะของ onSessionStarted() ในบทความก่อนหน้านี้

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

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

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

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

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

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

  if (session.isImmersive) {
    removeBackground();
  }

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

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

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

พื้นที่อ้างอิง

บทความก่อนหน้านี้ของฉันพูดถึงพื้นที่อ้างอิงเพียงเล็กน้อย ตัวอย่างที่ผมอธิบายนี้ใช้ทั้ง 2 แบบ ตอนนี้ก็ถึงเวลาแก้ไขการละเว้น

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

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

สําหรับพื้นที่อ้างอิงทั้งหมด พิกัด X จะแสดงด้านซ้ายและขวา พิกัด Y จะแสดงด้านบนและด้านล่าง และพิกัด Z จะแสดงด้านหน้าและด้านหลัง ค่าบวกคือขวา ขึ้น และย้อนกลับ ตามลำดับ

พิกัดที่ XRFrame.getViewerPose() แสดงจะขึ้นอยู่กับประเภทพื้นที่อ้างอิงที่ขอ อธิบายเพิ่มเติมเกี่ยวกับเรื่องนี้เมื่อไปถึงเฟรมแบบวนซ้ำ ตอนนี้เราต้องเลือกประเภทการอ้างอิงที่เหมาะสำหรับ Augmented Reality อีกครั้ง โดยใช้พร็อพเพอร์ตี้ my convenience

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

  if (session.isImmersive) {
    removeBackground();
  }

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

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

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

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

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

viewer - ใช้บ่อยที่สุดสำหรับเนื้อหาที่แสดงในบรรทัดในหน้า โดยเว้นวรรคตามอุปกรณ์ที่ดู เมื่อส่งไปยัง getViewerPose จะไม่มีการเทร็ก และรายงานท่าทางที่จุดเริ่มต้นเสมอ เว้นแต่แอปพลิเคชันจะแก้ไขด้วย XRReferenceSpace.getOffsetReferenceSpace() ตัวอย่างนี้ใช้ฟีเจอร์นี้เพื่อเปิดใช้การแพนกล้องด้วยการสัมผัส

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

โดยหลักการแล้ว ไม่มีอะไรเปลี่ยนแปลงจากสิ่งที่ฉันทำในเซสชัน VR ที่อธิบายไว้ในบทความก่อนหน้านี้ของฉัน ส่งประเภทพื้นที่อ้างอิงไปยัง XRFrame.getViewerPose() XRViewerPose ที่แสดงผลจะเป็นประเภทพื้นที่อ้างอิงปัจจุบัน การใช้ viewer เป็นค่าเริ่มต้นจะช่วยให้หน้าเว็บแสดงตัวอย่างเนื้อหาได้ก่อนที่จะขอความยินยอมจากผู้ใช้สำหรับ AR หรือ VR ตัวอย่างนี้แสดงประเด็นสำคัญ: เนื้อหาในบรรทัดใช้ห่วงเฟรมเดียวกันกับเนื้อหาสมจริง ซึ่งช่วยลดจำนวนโค้ดที่ต้องดูแล

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

บทสรุป

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

รูปภาพโดย David Grandmougin ใน Unsplash