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

Melissa Mitchell

Aron Halil

Bernice Yung

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 มิติ ลงในส่วนที่เหลือของ HTML UX นั้นทำได้ง่ายๆ โดยใช้ปุ่มเพื่อบอกเล่าเรื่องราวผ่านมุมกล้องและตัวแปรสีแบบอินเทอร์แอกทีฟ <model-viewer> ช่วยให้คุณ มอบประสบการณ์ในแบบที่ใฝ่ฝันแก่ผู้ใช้

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

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

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

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

<model-viewer>

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

โซลูชันขนาดใหญ่ที่มี third.js

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

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

Dialogflow

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

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

ผลลัพธ์: iframe แบบฝังได้

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

ผลลัพธ์

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

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