Augmented Reality สำหรับเว็บ

โจ เมดเลย์
โจ้ เมดเลย์
Twitter GitHub

ใน Chrome 67 เราได้ประกาศ WebXR Device API สำหรับทั้ง Augmented Reality (AR) และ Virtual Reality (VR) แม้ว่าจะเปิดใช้เพียงฟีเจอร์ VR เท่านั้น VR คือประสบการณ์ อิงตามสิ่งที่อยู่ในอุปกรณ์คอมพิวเตอร์ ในขณะที่ AR ทำให้คุณสามารถแสดงผล วัตถุเสมือนจริงในโลกแห่งความเป็นจริง ในการอนุญาตให้วางและติดตามออบเจ็กต์ดังกล่าว เราเพิ่งเพิ่ม WebXR Hit Test API ลงใน Chrome Canary ซึ่งเป็นวิธีการใหม่ที่ช่วยให้โค้ดเว็บแบบสมจริงนำวัตถุมาวางในโลกแห่งความเป็นจริง

ฉันจะดูได้จากที่ใด

API นี้มีไว้เพื่ออยู่ใน Canary ต่อไปในอนาคต เราต้องการระยะเวลาการทดสอบที่ยืดออกไป เนื่องจากเป็นข้อเสนอ API ที่ใหม่มาก และเราต้องการให้การทดสอบมีประสิทธิภาพและเหมาะกับนักพัฒนาซอฟต์แวร์

นอกจาก Chrome Canary แล้ว คุณจะต้องมีสิ่งต่อไปนี้ด้วย

คุณสามารถเจาะลึกการสาธิตหรือลองใช้ Codelab ของเราได้

นี่เป็นแค่เว็บ

ที่ Google IO ในปีนี้ เราได้แสดง Augmented Reality ด้วย Chrome รุ่นแรกๆ ผมพูดบางอย่างกับนักพัฒนาซอฟต์แวร์และผู้ที่ไม่ใช่นักพัฒนาซอฟต์แวร์ซ้ำๆ ระหว่างช่วง 3 วันดังกล่าว ซึ่งผมอยากให้เราใส่ลงใน บทความเรื่องเว็บที่สมจริงว่า "นี่แค่เว็บเท่านั้น"

"ฉันต้องติดตั้งส่วนขยายใดของ Chrome" "ไม่มีส่วนขยาย ที่เป็นแค่เว็บ"

"ฉันจำเป็นต้องใช้เบราว์เซอร์พิเศษหรือไม่" "ซึ่งเป็นแค่เว็บเท่านั้น"

"ฉันต้องติดตั้งแอปอะไร" "ไม่มีแอปเป็นพิเศษ มีแต่เว็บ"

คุณอาจเห็นได้ชัดเจนเพราะคุณกำลังอ่านข้อความนี้บนเว็บไซต์โดยเฉพาะ หากคุณสร้างการสาธิตด้วย API ใหม่นี้ ให้เตรียมพร้อมสำหรับ คำถามนี้ คุณจะเข้าใจได้หลายอย่างเลย

พูดถึง IO หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเว็บสมจริงโดยทั่วไป สตรีมอยู่ที่ไหน ดูได้ที่ไหน ดูวิดีโอนี้

มีประโยชน์อย่างไร

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

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

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

สิ่งหนึ่งที่การสาธิตและวิดีโอไม่แสดงคือวิธีที่ AR สามารถแสดงขนาดของวัตถุจริง วิดีโอนี้จะแสดงการสาธิตด้านการศึกษาที่เราสร้างขึ้นในชื่อ Chacmool บทความที่แสดงร่วมกันอธิบายการสาธิตนี้โดยละเอียด สิ่งสำคัญสำหรับการพูดคุยครั้งนี้คือ เมื่อวางรูปปั้น Chacmool ใน Augmented Reality คุณจะเห็นขนาดราวกับว่าอยู่ในห้องกับคุณจริงๆ

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

เรย์แคสต์ ทดสองตัว และเส้นโครง

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

ตอนนี้เป็นเวลาที่เหมาะสมสำหรับการทดลองใช้ตัวอย่างโค้ดใหม่ใน Chrome Canary ก่อนดําเนินการใดๆ โปรดตรวจสอบอีกครั้งว่าคุณเปิดใช้การแฟล็กที่ถูกต้องแล้ว โหลดตัวอย่างเพลงแล้วคลิก "เริ่ม AR"

โปรดสังเกตบางอย่าง อย่างแรก มาตรวัดความเร็วที่คุณอาจจดจำได้จากตัวอย่างสมจริงอื่นๆ จะแสดง 30 เฟรมต่อวินาทีแทนที่จะเป็น 60 ซึ่งเป็นอัตราที่หน้าเว็บรับรูปภาพจากกล้อง

AR ทำงานที่ 30 ภาพต่อวินาที

การสาธิตการทดสอบ Hit ของ AR

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

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

ลงไปที่โค้ด

การสาธิต Chacmool จะแสดงว่า AR จะมีลักษณะอย่างไรในแอปเวอร์ชันที่ใช้งานจริง โชคดีที่มีการสาธิตที่ง่ายขึ้นมากในที่เก็บตัวอย่าง WebXR โค้ดตัวอย่างของฉันมาจาก AR Hit Test ในที่เก็บนั้น โปรดทราบว่าฉันอยากจะเพิ่มตัวอย่างโค้ดให้ดูเรียบง่ายขึ้น เพื่อช่วยให้คุณเข้าใจว่าเกิดอะไรขึ้น

พื้นฐานในการเข้าสู่เซสชัน AR และเรียกใช้ลูปการแสดงผลใน AR จะเหมือนกันกับ VR หากไม่คุ้นเคย ก็อ่านบทความก่อนหน้านี้ได้ เพื่อให้เจาะจงมากขึ้น การเข้าและใช้งานเซสชัน AR จะมีลักษณะแทบจะเหมือนกับการเข้าสู่เซสชันหน้าต่างเวทมนตร์ VR ประเภทเซสชันต้องเป็นแบบ "ไม่ใหญ่" และเฟรมของประเภทการอ้างอิงต้องเป็น 'eye-level' เช่นเดียวกับ Magic Window

API ใหม่

ตอนนี้ เราจะแสดงวิธีใช้ API ใหม่ ให้จำได้ว่าใน AR เส้นโครงจะพยายามหาพื้นผิวก่อนวางสิ่งของ ซึ่งทดสอบได้ด้วย การทดสอบ Hit หากต้องการทดสอบ Hit ให้เรียก XRSession.requestHitTest() ซึ่งมีลักษณะดังนี้

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

อาร์กิวเมนต์ทั้ง 3 รายการของเมธอดนี้แสดงถึงการฉายแสง (Ray Cast) การแคสต์แสงจะกำหนดโดยจุด 2 จุดบนรังสี (origin และ direction) และจุดที่มีการคำนวณจาก (frameOfReference) จุดเริ่มต้นและทิศทางมีทั้งเวกเตอร์ 3 มิติ ไม่ว่าคุณจะส่งค่าใด ระบบจะปรับค่าให้เป็นมาตรฐาน (แปลงเป็น 1)

ย้ายเส้นริ้ว

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

เริ่มต้นด้วยการเรียกกลับ requestAnimationFrame() เช่นเดียวกับ VR คุณต้องมีเซสชันและท่าทาง

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

เมื่อคุณได้เซสชันและโพสท่าแล้ว ให้ตรวจดูว่าแสงที่แคสต์นั้นอยู่ที่ส่วนใด โค้ดตัวอย่างใช้ ไลบรารีคณิตศาสตร์ gl-matrix แต่ gl-matrix ไม่ได้มีความจำเป็น สิ่งสำคัญคือการรู้ว่ากำลังคำนวณอะไรกับตัวเลขนั้น และคำนวณโดยอิงจากตำแหน่งของอุปกรณ์ ดึงข้อมูลตำแหน่งอุปกรณ์จาก XRPose.poseModalMatrix เมื่อพกรังสีไว้ในมือแล้ว ให้โทรหา requestHitTest()

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

แม้ว่าตัวอย่างการทดสอบ Hit จะไม่เด่นชัดเท่าใดนัก แต่คุณก็ยังต้องวนซ้ำ เพื่อวาดฉาก การวาดจะใช้ API ของ WebGL คุณสามารถทำได้ถ้าคุณ มีความทะเยอทะยานมากๆ อย่างไรก็ตาม เราขอแนะนำให้ใช้กรอบ ตัวอย่างเว็บแบบสมจริงใช้ตัวอย่างเว็บที่สร้างขึ้นสำหรับการสาธิตที่เรียกว่า Cottontail และ Three.js รองรับ WebXR โดยเฉพาะตั้งแต่เดือนพฤษภาคม

การวางวัตถุ

วัตถุจะวางในโหมด AR เมื่อผู้ใช้แตะหน้าจอ ดังนั้น ให้ใช้เหตุการณ์ select สิ่งสำคัญในขั้นตอนนี้คือการรู้ว่าจะวางโฆษณาไว้ที่ใด เนื่องจากเส้นเป้าที่เคลื่อนที่เป็นแหล่งที่มาของการทดสอบการกระแทกที่สม่ำเสมอ วิธีที่ง่ายที่สุดในการวางวัตถุคือการวาดวัตถุที่จุดเส้นริ้วในการทดสอบการตีครั้งสุดท้าย หากจำเป็น สมมติคุณมีเหตุผลอันชอบธรรมที่จะไม่แสดงเส้นควบคุมเวลา คุณสามารถเรียก requestHitTest() ในเหตุการณ์ที่เลือกดังที่แสดงในตัวอย่าง

บทสรุป

วิธีที่ดีที่สุดในการทำความเข้าใจเรื่องนี้คือการทำตามขั้นตอนโค้ดตัวอย่างหรือลองใช้ Codelab ฉันหวังว่าคุณจะให้ภูมิหลังเพียงพอสำหรับการทำความเข้าใจทั้ง 2 อย่าง

เรายังไม่เสร็จสิ้นการสร้าง API เว็บที่สมจริง แม้จะเป็นไปอย่างยาวนาน เราจะเผยแพร่บทความใหม่ๆ ที่นี่ในขณะที่เรากำลังดำเนินการ