อินเทอร์แอกทีฟ 3 มิติบนเว็บด้วยฮาร์ดแวร์ของ Google: ประสบการณ์ด้านการศึกษาเกี่ยวกับผลิตภัณฑ์ยุคใหม่

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish

องค์กรการตลาดด้านอุปกรณ์และบริการ (DSM) ของ Google ดูแลกลยุทธ์ในการเปิดตัวผลิตภัณฑ์ที่หลากหลาย เช่น สมาร์ทโฟน นาฬิกา หูฟังเอียร์บัด แท็บเล็ต อุปกรณ์สมาร์ทโฮม และการสมัครใช้บริการที่เกี่ยวข้อง ซึ่งทั้งหมดนี้พร้อมให้บริการทั้งผ่าน Google Store และผู้ให้บริการบุคคลที่สามทั่วโลก ผู้คนจะดูข้อมูลเกี่ยวกับผลิตภัณฑ์เหล่านี้ทางออนไลน์และในร้านค้าปลีกจริง

ความท้าทายอย่างหนึ่งที่ทีมนี้พบอยู่เสมอคือการให้ความรู้แก่ผู้บริโภคและผู้ค้าปลีกเกี่ยวกับกรณีการใช้งานและประโยชน์ของระบบนิเวศฮาร์ดแวร์ของ Google และประสบการณ์ AI ขั้นสูง ทีม DSM ได้สร้างพื้นที่เสมือนจริง 3 มิติด้วยเทคโนโลยีเว็บขั้นสูงเพื่อแก้ปัญหาเหล่านี้จำนวนมาก เพื่อช่วยผู้บริโภคให้เข้าใจผลิตภัณฑ์และฟังก์ชันการทำงานได้ดียิ่งขึ้น ในตัวอย่างนี้ คุณจะได้เห็นวิธีที่ทีมสร้างประสบการณ์ที่สมจริงยิ่งขึ้นให้แก่ลูกค้า โดยเปิดตัวประสบการณ์ใหม่ๆ เหล่านี้เร็วขึ้น 4 เท่าและประหยัดค่าใช้จ่ายได้ครึ่งหนึ่งของชิ้นงานดิจิทัลแบบดั้งเดิม

ปัญหา: การให้ความรู้เกี่ยวกับผลิตภัณฑ์

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

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

สำรวจวิธีแชร์ข้อมูลผลิตภัณฑ์ที่ดีขึ้น

ทีม DSM พยายามหาวิธีแชร์ข้อมูลผลิตภัณฑ์ที่ดีขึ้น จึงทดลองใช้ประสบการณ์ VR/AR ในแอป ผลลัพธ์ที่ได้นั้นน่าพอใจ ทั้งการมีส่วนร่วมที่เพิ่มขึ้นและขนาดตะกร้าที่เพิ่มขึ้น ณ จุดขาย อย่างไรก็ตาม การดาวน์โหลดแอปเป็นอุปสรรคสำคัญในการเข้าถึงทั้งสำหรับตัวแทนฝ่ายขายและลูกค้า และการจำกัดประสบการณ์การใช้งานไว้ที่แอปหมายความว่าจะฝังแอปในผลิตภัณฑ์และบริการอื่นๆ ของบุคคลที่หนึ่งหรือบุคคลที่สาม เช่น store.google.com ไม่ได้

โซลูชันน้ำหนักเบาด้วย <model-viewer>

เมื่อเห็นความสำเร็จของโมเดลผลิตภัณฑ์ 3 มิติสำหรับข้อมูลผลิตภัณฑ์ ทีมจึงตัดสินใจนำแนวทางนี้มาใช้กับเว็บ วิธีหนึ่งในการทำเช่นนี้คือการใช้ <model-viewer> เพื่อสร้างประสบการณ์ 3 มิติกับผลิตภัณฑ์แต่ละรายการ

<model-viewer> เป็นคอมโพเนนต์เว็บที่ช่วยให้คุณเพิ่มโมเดล 3 มิติลงในหน้าเว็บได้แบบประกาศขณะโฮสต์โมเดลในเว็บไซต์ของคุณเอง คุณจะเห็นการใช้งานฟีเจอร์นี้ในหน้า Pixel Fold ใน Google Store ซึ่ง <model-viewer> ช่วยให้ผู้ใช้เห็น Pixel Fold จากทุกมุมด้วยตำแหน่งการพับต่างๆ การผสานรวมโมเดล 3 มิติเข้ากับ UX ของ HTML ที่เหลือนั้นทําได้ง่ายๆ ด้วยปุ่มบอกเล่าเรื่องราวผ่านมุมกล้องและสีต่างๆ แบบอินเทอร์แอกทีฟ <model-viewer> จะช่วยให้คุณมอบประสบการณ์การใช้งานแบบใดก็ได้ที่คุณต้องการให้แก่ผู้ใช้

การสร้างโมเดล 3 มิติ

ขั้นตอนแรกในการพัฒนาประสบการณ์เสมือนจริง 3 มิติคือการสร้างโมเดลผลิตภัณฑ์ 3 มิติ ทีม DSM ได้สร้างโมเดล 3 มิติใน CAD โดยทำงานร่วมกับนักออกแบบที่ผลิต CAD ของผลิตภัณฑ์อย่างใกล้ชิด ทีม DSM จึงส่งออกเรนเดอร์แบบ Low Poly ที่เพิ่มประสิทธิภาพสำหรับเว็บได้ แนวทางปฏิบัติแนะนำบางส่วนที่พวกเขาใช้เพื่อให้บรรลุเป้าหมายนี้อยู่ในขอบเขตต่อไปนี้

  • เรขาคณิต:
    • มุ่งเน้นที่การสร้างเรขาคณิต (รูปร่างและขนาด) ให้ถูกต้องจากทุกมุม
    • หลีกเลี่ยงการใช้แผนที่ปกติสำหรับการลบมุม
    • สร้างป้ายเป็นเรขาคณิตแยกต่างหาก
  • สีและวัสดุ
    • เป้าหมาย: การนำเสนอภาพสถานที่จริงที่สอดคล้องกัน
    • พิจารณาแสงแบบไดนามิกแบบเรียลไทม์
    • ใช้ชุดพื้นผิวและวัสดุแยกกันสำหรับเมชทุกประเภท (ทึบแสง โปร่งแสง ป้าย)
    • ปรับการออกแบบกับนักออกแบบ CAD คนเดิมหากจําเป็นต้องปรับเพิ่มเติม
  • ขนาดไฟล์:
    • ส่งออกเป็นโมเดล Low Poly ในรูปแบบ GLB เพื่อให้ <model-viewer> ใช้โมเดลได้
    • บีบอัดเมชเชิงเรขาคณิตด้วยตนเองโดยนักออกแบบ 3 มิติ กับผู้ให้บริการ หรือผ่านซอฟต์แวร์การบีบอัด เช่น DRACO (OS)

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

<model-viewer>

ทีม DSM ใช้<model-viewer>คอมโพเนนต์เว็บแบบโอเพนซอร์สของ Google เพื่อฝังโมเดล 3 มิติที่สร้างขึ้นใหม่ลงในหน้าเว็บ ชิ้นงานต้องอยู่ในรูปแบบ gITF หรือ GLB (นามสกุล .glb) เพื่อให้โมเดลที่สร้างในขั้นตอนที่ 1 ใช้งานร่วมกับ <model-viewer> ได้ ทั้งสองรูปแบบมีขนาดกะทัดรัด บีบอัดได้ และโหลดลงใน GPU ได้อย่างรวดเร็ว เบราว์เซอร์หลักๆ ทั้งหมดรองรับคอมโพเนนต์ <model-viewer>

ในระหว่างขั้นตอนนี้ ปัญหาที่ใหญ่ที่สุดที่ทีม DSM พบคือจานสีของฮาร์ดแวร์ Google แสดงผลอย่างไม่ถูกต้อง ในที่สุดทีมก็พบว่าการแมปโทนสี ACES (มาตรฐานอุตสาหกรรมภาพยนตร์) เป็นสาเหตุที่ทำให้สีหายไป ในการแก้ปัญหานี้ ทางบริษัทได้พัฒนาโปรแกรมแมปโทนสีกลางแบบ PBR ของ Khronos เวอร์ชันใหม่ขึ้นมาเพื่อแก้ปัญหาเหล่านี้โดยเฉพาะ และนำเสนอสีบนหน้าจออย่างแม่นยำ ทั้งยังหลีกเลี่ยงไฮไลต์ที่สว่างเกินไปและการเปลี่ยนสีที่เชื่อมโยงกับการแมปโทนสีเชิงเส้น

<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>

ดูข้อมูลเพิ่มเติมเกี่ยวกับ <model-viewer> ได้ที่ modelviewer.dev หากต้องการทดสอบโมเดล 3 มิติและดาวน์โหลดเว็บไซต์เริ่มต้นทั้งเว็บไซต์ ให้ลองใช้เครื่องมือแก้ไข

โซลูชันที่มีประสิทธิภาพสูงด้วย three.js

<model-viewer>เป็นวิธีที่มีประสิทธิภาพในการแสดงและโต้ตอบกับโมเดล 3 มิติ 1 รายการ อย่างไรก็ตาม บางครั้งทีม DSM ต้องการประสบการณ์การใช้งานเว็บที่สมจริงและเชื่อมโยงกันมากกว่าที่ <model-viewer> ทำได้ ตัวอย่างหนึ่งคือการเปิดตัว Nest Mini + C <model-viewer> ช่วยให้ผู้มีโอกาสเป็นลูกค้าเห็นผลิตภัณฑ์แบบ 3 มิติบนเว็บได้ แต่ไม่แสดงให้เห็นถึงประโยชน์เมื่อใช้ร่วมกับผลิตภัณฑ์ฮาร์ดแวร์อื่นๆ ของ Google และฟีเจอร์ AI เช่น Assistant

ทีมหันมาใช้ไลบรารีที่รองรับ <model-viewer> อย่าง three.js Three.js เป็นเครื่องมือเกม JavaScript แบบโอเพนซอร์ส และทีมของเราสามารถสร้างเฟรมเวิร์กของชิ้นงานที่นํากลับมาใช้ซ้ำได้สําหรับสภาพแวดล้อมบ้านเสมือนจริงที่มีกล้อง ไฟ และลําโพง Nest สำหรับใช้ในอาคาร ข้อมูลนี้ช่วยให้ทีมมีพื้นฐานในการให้ความคิดเห็นแบบเรียลไทม์เกี่ยวกับวิธีที่อุปกรณ์โต้ตอบกัน

Dialogflow

ขั้นตอนสุดท้ายในการสร้างประสบการณ์การใช้งานที่เชื่อมโยงถึงกันคือการเพิ่ม Google Assistant ซึ่งหมายความว่าผู้ใช้สามารถลองใช้คำสั่งและกิจวัตรที่แท้จริงด้วยประสบการณ์เสมือนจริงที่เชื่อมโยงถึงกัน อย่างไรก็ตาม การป้อน Google Assistant จากบัญชีที่มีอยู่ของผู้ใช้จะทำให้เกิดข้อกังวลด้านความเป็นส่วนตัวหลายประการ DSM ทำงานร่วมกับบริการ Dialogflow ของ Google Cloud เพื่อเลียนแบบ Google Assistant ในพื้นที่นี้เพื่อสร้างโซลูชันที่มุ่งเน้นความเป็นส่วนตัว แผนภาพระดับสูงต่อไปนี้แสดงวิธีที่เว็บแอปใช้ API ของ Dialogflow (ปรับมาจากพื้นฐานของ Dialogflow) สําหรับการโต้ตอบแต่ละรอบ เว็บแอปใช้การจัดประเภท Intent ของ Dialogflow และ API จะแสดงผลนิพจน์ของผู้ใช้ปลายทางที่กำหนดไว้ล่วงหน้าซึ่งตรงกับ Intent

แผนภาพโฟลว์ผู้ใช้

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Dialogflow ได้ที่เอกสารประกอบของ Google Cloud

ผลลัพธ์ที่ได้คือ iframe ที่ฝังได้

ผลลัพธ์ที่ได้คือคลังชิ้นงานที่ฝังลงในหน้าเว็บได้ด้วย <model-viewer> หรือใช้ในสภาพแวดล้อมเสมือนจริงแบบสมบูรณ์เพื่อช่วยให้ลูกค้าได้เรียนรู้เพิ่มเติมเกี่ยวกับผลิตภัณฑ์แต่ละรายการและวิธีที่ผลิตภัณฑ์เชื่อมต่อกัน ประสบการณ์การใช้งานทั้งน่าเชื่อถือ ปรับขนาดได้ และคุ้มค่า ประสบการณ์เสมือนจริงครั้งแรกนี้เปิดตัวไปเมื่อเดือนพฤษภาคม 2021 และแม้ว่าจะไม่ได้แสดงบนเว็บไซต์ของ Google Store แล้ว แต่คุณก็ยังคงลองใช้ได้

ผลลัพธ์

นับตั้งแต่เปิดตัว Nest Mini +C ทาง DSM ได้ใช้เฟรมเวิร์กนี้ซ้ำและขยายเฟรมเวิร์กดังกล่าวเพื่อเปิดตัวผลิตภัณฑ์ Pixel ในช่วง 2 ปีที่ผ่านมาได้อย่างประสบความสำเร็จมากขึ้นเรื่อยๆ การใช้ชิ้นงาน 3 มิติและประสบการณ์เหล่านี้ซ้ำๆ ช่วยให้ทีมเพิ่มจำนวนประสบการณ์ด้านการศึกษาผลิตภัณฑ์แบบอินเทอร์แอกทีฟเป็น 4 เท่า และเพิ่มจำนวนผลิตภัณฑ์ที่ใช้ประโยชน์จากเทคโนโลยีเว็บนี้ได้ 3 เท่า

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