หน้านี้ได้รับการแปลโดย 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 ที่ใหม่มาก และเราต้องการตรวจสอบให้แน่ใจว่ามีประสิทธิภาพและเหมาะสมสำหรับนักพัฒนาซอฟต์แวร์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นักแสดงเรย์ การทดสอบการกระแทก และเป้าสายตา

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

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

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

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

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

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

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

ลงไปที่โค้ด

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

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

API ใหม่

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

การวางวัตถุ

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

บทสรุป

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

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