องค์กรการตลาดด้านอุปกรณ์และบริการ (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)
- ส่งออกเป็นโมเดล Low Poly ในรูปแบบ GLB เพื่อให้
เนื่องจากโมเดล 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 เท่าและมีต้นทุนน้อยกว่าครึ่งเมื่อเทียบกับกระบวนการแบบดั้งเดิมก่อนหน้านี้