ในการเตรียมความพร้อมสำหรับ Google I/O เราอยากจะเน้นย้ำถึงโอกาสที่น่าตื่นเต้นของ Augmented Reality (AR) บนเว็บ Chacmool เป็นการสาธิตการใช้งานเว็บเพื่อการศึกษาที่เราสร้างขึ้นเพื่อแสดงให้เห็นว่า AR บนเว็บช่วยให้ผู้ใช้มีส่วนร่วมกับประสบการณ์ AR ได้ง่ายเพียงใด เว็บทำให้ AR ใช้งานสะดวกและเข้าถึงได้ง่ายจากทุกที่
เราได้เปิดใช้การสาธิตนี้ใน Chrome Canary
บนอุปกรณ์ Android ที่รองรับ ARCore ที่ใช้ Android O ขึ้นไปแล้ว นอกจากนี้คุณยังต้องติดตั้ง ARCore ด้วย
การดำเนินการดังกล่าวอาศัยข้อเสนอ WebXR ใหม่ (API ทดสอบ Hit ของ WebXR) จึงอยู่ในการแจ้งว่าไม่เหมาะสมและมีเจตนาให้คงอยู่ใน Canary ในระหว่างที่เราทดสอบและปรับแต่งข้อเสนอ API ใหม่กับสมาชิกคนอื่นๆ ของ Immersive Web Group Group ในความเป็นจริง หากต้องการเข้าถึงการสาธิต คุณจะต้องเปิดใช้การแฟล็ก 2 รายการใน chrome://flags:
#webxr และ #webxr-hit-test เมื่อเปิดใช้ทั้ง 2 ฟีเจอร์และรีสตาร์ท Canary แล้ว ลองดูการสาธิต Chacmool
ประสบการณ์ AR จาก Chacmool นั้นมุ่งเน้นที่การศึกษา โดยใช้ประโยชน์จากลักษณะแบบอินเทอร์แอกทีฟที่สมจริงของ AR เพื่อช่วยให้ผู้ใช้ได้เรียนรู้เกี่ยวกับประติมากรรมโบราณของ Chacmool ผู้ใช้สามารถวางรูปปั้นขนาดจริงได้เหมือนจริง และเดินไปรอบๆ เพื่อดูประติมากรรมจากมุมและระยะทางต่างๆ ได้ ธรรมชาติที่สมจริงของ AR ช่วยให้ผู้ใช้สำรวจ ค้นพบ และเล่นเนื้อหาได้อย่างอิสระ เช่นเดียวกับในชีวิตจริง เมื่อดูวัตถุใน AR แทนที่จะเห็นบนหน้าจอ 2 มิติที่แบน เราเข้าใจสิ่งที่กำลังดูอยู่ได้อย่างลึกซึ้ง เพราะเราสามารถดูวัตถุจากมุมและระยะทางต่างๆ ได้ด้วยโมเดลการโต้ตอบที่ใช้งานง่ายมาก เช่น การเดินไปรอบๆ วัตถุ และการเข้าใกล้หรือออกห่างจากวัตถุ นอกจากนี้ ในประสบการณ์นี้จะมีคำอธิบายประกอบวางอยู่บนรูปปั้นโดยตรงด้วย ซึ่งทำให้ผู้ใช้เชื่อมโยงสิ่งที่อธิบายในข้อความได้โดยตรง และตำแหน่งขององค์ประกอบเหล่านั้นบนประติมากรรม
การสาธิตนี้สร้างขึ้นภายในระยะเวลาประมาณ 1 เดือนเพื่อสร้าง โดยใช้ประโยชน์จากองค์ประกอบบางส่วนจาก WebAR-บทความ ซึ่งเป็นการสาธิต AR บนเว็บชุดแรกของทีม WebXR ข้อมูลเกี่ยวกับประติมากรรมดังกล่าวมาจากหน้า Google Arts & Culture และโมเดล 3 มิติได้มาจาก CyArk ซึ่งเป็นพาร์ทเนอร์ของ Google Arts & Culture เพื่อให้โมเดล 3 มิติพร้อมใช้งานสำหรับเว็บ ระบบจะใช้ทั้ง Meshlab และ Mesh Mixer ในการซ่อมแซมโมเดลและลดขนาด Mesh เพื่อลดขนาดไฟล์ จากนั้นจึงใช้ Draco ซึ่งเป็นไลบรารีสำหรับบีบอัดและคลายการบีบอัด Mesh ของเรขาคณิต 3 มิติและ Point Cloud เพื่อลดขนาดไฟล์ของโมเดลจาก 44.3 เมกะไบต์เป็นเหลือเพียง 225 กิโลไบต์ สุดท้าย จะใช้ Web Worker เพื่อโหลดโมเดลบนเทรดเบื้องหลังเพื่อให้หน้าเว็บยังคงโต้ตอบได้ขณะที่โมเดลโหลดและคลายการบีบอัด ซึ่งเป็นการดำเนินการที่มักทำให้เกิดความยุ่งยากและป้องกันไม่ให้เลื่อนหน้าเว็บ
เราคงเครียดไม่น้อยเพราะตั้งแต่เรากำลังพัฒนาแอปบนเดสก์ท็อปและนำไปใช้กับโทรศัพท์ การใช้เครื่องมือแก้ไขข้อบกพร่องจากระยะไกลของ Chrome ช่วยตรวจสอบประสบการณ์การใช้งานนี้ทำให้เกิดรอบการทำซ้ำที่รวดเร็วมากระหว่างการเปลี่ยนแปลงโค้ด และมีเครื่องมืออันยอดเยี่ยมสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome สำหรับแก้ไขข้อบกพร่องและตรวจสอบประสิทธิภาพ
แนวทางปฏิบัติแนะนำสำหรับประสบการณ์ AR/VR
หลักเกณฑ์การออกแบบและวิศวกรรมส่วนใหญ่สำหรับการออกแบบเพื่อประสบการณ์ AR แบบดั้งเดิมนั้นนำไปใช้ในการสร้างประสบการณ์ AR บนเว็บได้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติแนะนำทั่วไป โปรดดูหลักเกณฑ์การออกแบบ AR ที่เราเพิ่งเปิดตัวไปเมื่อเร็วๆ นี้
โดยเฉพาะอย่างยิ่ง ในการออกแบบประสบการณ์ AR บนเว็บ วิธีที่ดีที่สุดคือการใช้ทั้งหน้าจอ (กล่าวคือ แสดงเต็มหน้าจอเหมือนกับที่โปรแกรมเล่นวิดีโอทำงานแบบเต็มหน้าจอบนอุปกรณ์เคลื่อนที่) เมื่อใช้ AR เพื่อป้องกันไม่ให้ผู้ใช้เลื่อนมุมมองหรือถูกรบกวนจากองค์ประกอบอื่นๆ ในหน้าเว็บ การเปลี่ยนผ่านไปสู่ AR ควรเป็นไปอย่างราบรื่นและไร้รอยต่อ โดยแสดงให้เห็นมุมมองกล้องก่อนเข้าสู่การเริ่มต้นใช้งาน AR (เช่น การวาดเส้นโครง) สิ่งสำคัญที่ควรทราบเกี่ยวกับ AR บนเว็บคือ นักพัฒนาซอฟต์แวร์ไม่สามารถเข้าถึงกรอบกล้อง การประมาณแสง สมอเรือ หรือเครื่องบิน (ยัง) ดังนั้นนักออกแบบและนักพัฒนาจะต้องคำนึงถึงข้อจำกัดเหล่านี้เมื่อออกแบบประสบการณ์ AR บนเว็บ
นอกจากนี้ เนื่องจากอุปกรณ์ที่ใช้ได้รับประสบการณ์การใช้งานเว็บที่มีอยู่หลากหลาย จึงจำเป็นต้องเพิ่มประสิทธิภาพเพื่อให้มอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ ดังนั้นให้กำหนดจำนวนโพลีให้ต่ำ พยายามหลีกเลี่ยงการให้แสงน้อยที่สุดเท่าที่จะทำได้ คำนวณเงาล่วงหน้าหากเป็นไปได้ และลดพื้นที่ที่วาดได้ เมื่อแสดงข้อความใน AR ให้ใช้เทคนิคการแสดงผลข้อความแบบสมัยใหม่ (เช่น ตามช่องระยะทางที่มีลายเซ็น) เพื่อให้ข้อความชัดเจนและอ่านได้จากทุกระยะและทุกมุม ขณะวางคำอธิบายประกอบ ให้คิดว่าการมองของผู้ใช้เป็นอีกอินพุตหนึ่ง และจะแสดงคำอธิบายประกอบเฉพาะเมื่อมีความเกี่ยวข้องเท่านั้น (เช่น คำอธิบายประกอบตามระยะใกล้ที่แสดงขึ้นเมื่อผู้ใช้กำลังมุ่งเน้นไปยังบริเวณที่สนใจ)
สุดท้ายนี้ เนื่องจากเนื้อหานี้อิงตามเว็บ คุณจึงต้องนำแนวทางปฏิบัติแนะนำทั่วไปในการออกแบบสำหรับเว็บไปใช้ด้วย ตรวจสอบว่าเว็บไซต์มอบประสบการณ์การใช้งานที่ดีในอุปกรณ์ต่างๆ (เดสก์ท็อป แท็บเล็ต อุปกรณ์เคลื่อนที่ ชุดหูฟัง ฯลฯ) การรองรับการเพิ่มประสิทธิภาพแบบก้าวหน้าหมายถึงการออกแบบสำหรับอุปกรณ์ที่ไม่ใช้ AR ด้วย (เช่น แสดงโปรแกรมดูโมเดล 3 มิติในอุปกรณ์ที่ไม่ใช่ AR)
หากสนใจพัฒนาประสบการณ์ AR บนเว็บของคุณเอง เรามีโพสต์ที่แสดงร่วมกันซึ่งจะให้รายละเอียดเพิ่มเติมเกี่ยวกับวิธีเริ่มต้นสร้าง AR บนเว็บด้วยตัวคุณเอง (คุณยังสามารถดูแหล่งที่มาของการสาธิต Chacmool ได้ด้วย) WebXR Device API กำลังอยู่ระหว่างการพัฒนา และเราอยากทราบความคิดเห็นจากคุณเพื่อให้เราเปิดใช้แอปพลิเคชันและกรณีการใช้งานได้ทุกประเภท โปรดไปที่ GitHub และเข้าร่วมการสนทนา