หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Joe Medley

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

ฉันจะซื้อได้จากที่ใด

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

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

สมาร์ทโฟนที่เข้ากันได้ที่ใช้ Android O ขึ้นไป
วิธีติดตั้ง ARCore
Chrome Flag 2 รายการ (chrome://flags): WebXRDevice API (#webxr) และ WebXR Hit Testing (#webxr-hit-test)

ข้อมูลเหล่านี้จะช่วยให้คุณดูข้อมูลเดโมหรือลองใช้ Codelab ได้

เป็นเพียงเว็บ

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

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

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

"ฉันต้องติดตั้งแอปใด" "ไม่มีแอปพิเศษ เป็นเพียงเว็บเท่านั้น"

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

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

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

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

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

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

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

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

การแคสต์เรย์ การทดสอบการตี และเป้า

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

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

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

AR ทำงานที่ 30 เฟรมต่อวินาที

การสาธิต Hit Test ของ AR

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

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

ลงลึกถึงโค้ด

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

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

API ใหม่

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

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

อาร์กิวเมนต์ 3 รายการของเมธอดนี้แสดงการแคสต์เรย์ การแคสต์เรย์จะกำหนดโดยจุด 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 Test แต่คุณยังคงต้องวนดูวิวเพื่อวาดฉาก การวาดภาพทำได้โดยใช้ WebGL API คุณทำได้หากมีความทะเยอทะยานมาก แต่เราขอแนะนำให้ใช้เฟรมเวิร์ก ตัวอย่างเว็บที่สมจริงใช้เว็บที่สร้างขึ้นเพื่อแสดงตัวอย่างโดยเฉพาะซึ่งเรียกว่า Cottontail และ Three.js รองรับ WebXR มาตั้งแต่เดือนพฤษภาคม

การวางวัตถุ

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

บทสรุป

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

เรายังไม่หยุดสร้าง Web API แบบสมจริง เราจะเผยแพร่บทความใหม่ที่นี่เมื่อดำเนินการเสร็จสิ้น