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