سه بعدی تعاملی در وب با سخت افزار Google: تجربیات آموزشی محصول نسل بعدی

Melissa Mitchell

Aron Halil

Bernice Yung

Emmett Lalish

سازمان بازاریابی دستگاه‌ها و خدمات Google (DSM) بر استراتژی‌های عرضه به بازار برای طیف گسترده‌ای از محصولات نظارت می‌کند: تلفن‌های هوشمند، ساعت‌ها، هدفون‌های هدفون، تبلت‌ها، دستگاه‌های خانه هوشمند، و اشتراک‌های مرتبط که همگی از طریق Google در دسترس هستند. فروشگاه و فروشندگان شخص ثالث جهانی. مردم در مورد این محصولات به صورت آنلاین و در فروشگاه های خرده فروشی فیزیکی اطلاعات کسب می کنند.

یکی از چالش‌های همیشگی این تیم آموزش مصرف‌کنندگان و خرده‌فروشان در مورد موارد استفاده و مزایای اکوسیستم سخت‌افزاری گوگل و تجربیات هوش مصنوعی پیشرفته است. برای کمک به مصرف کنندگان در درک بهتر محصولات و عملکرد، تیم DSM یک فضای مجازی سه بعدی با فناوری وب پیشرفته ایجاد کرد تا بسیاری از این چالش ها را برطرف کند. در این مطالعه موردی، می‌توانید بیاموزید که چگونه تیم تجربه‌ای همهجانبه‌تر برای مشتریان ایجاد کرد و این تجربیات جدید را چهار برابر سریع‌تر و با نصف هزینه دارایی‌های دیجیتال سنتی راه‌اندازی کرد.

چالش: آموزش محصول

آموزش همکاران فروش و مشتریانی که تازه با محصولات سخت افزاری Google آشنا شده اند در مورد مزایای ویژگی هایی مانند قابلیت همکاری و هوش مصنوعی پرهزینه و دشوار است. استراتژی‌های آموزش سنتی محصول بر محتوای دیجیتالی متکی است که با استفاده از محصولات فیزیکی تولید می‌شود و سپس بر روی پلت‌فرم‌های یادگیری دیجیتال میزبانی می‌شود. این پلتفرم های یادگیری مشخصات فنی محصول، تصاویر و ویدئوها را ارائه می دهند، اما به محصولات فیزیکی یا متصل دسترسی ندارند.

تولید محتوای آموزشی مانند ویدیو پرهزینه است، بومی سازی آن برای بازارهای جهانی پیچیده است و استفاده مجدد بین محصولات تقریباً غیرممکن است. ایجاد دارایی‌های اولیه به بودجه‌هایی برای بازیگران، کمد لباس، جستجوی مکان، هزینه‌های لوکیشن، هزینه‌های استودیو، خدمه فیلم‌برداری و کارهای پست تولید نیاز دارد. هزینه های تولید و محصولات قابل تحویل نیز باید بومی سازی را در نظر بگیرند. اصلاح دارایی ها، مکان ها، محصولات، کپی و استعدادها به ویژه برای مدیریت بازاریابی سنتی در مقیاس چالش برانگیز است. و وقتی در نظر می گیرید که اکثر محصولات پشتیبانی شده هر چند ماه یکبار کاهش ویژگی دارند، این دارایی ها در زمان اتمام آنها منسوخ شده اند.

کشف راه های بهتر برای اشتراک گذاری اطلاعات محصول

تیم DSM در تلاش برای یافتن راهی بهتر برای اشتراک‌گذاری اطلاعات محصول، تجربیات VR/AR را در یک برنامه آزمایش کرد. نتایج هم با تقویت تعامل و هم افزایش اندازه سبد در نقاط فروش امیدوارکننده بود. با این حال، بارگیری برنامه مانع مهمی برای ورود هم برای همکاران فروش و هم برای مشتریان بود، و محدود کردن تجربه به یک برنامه به این معنی بود که در سایر ویژگی‌های شخص اول یا ثالث مانند store.google.com قابل جاسازی نبود.

راه حل های سبک با <model-viewer>

با مشاهده موفقیت مدل های محصول سه بعدی برای آموزش محصول، تیم تصمیم گرفت این رویکرد را به وب بیاورد. یکی از راه‌های انجام این کار، استفاده از <model-viewer> برای ایجاد تجربیات سه بعدی با محصولات جداگانه است.

<model-viewer> یک مؤلفه وب است که به شما امکان می‌دهد به صورت اعلامی یک مدل سه بعدی را به یک صفحه وب اضافه کنید، در حالی که مدل را در سایت خود میزبانی می‌کنید. این را می‌توانید در صفحه Pixel Fold در Google Store مشاهده کنید، جایی که <model-viewer> به کاربران اجازه می‌دهد تا Pixel Fold را از هر زاویه‌ای با موقعیت‌های مختلف تا شده ببینند. ادغام مدل سه بعدی در بقیه HTML UX با دکمه هایی برای گفتن داستان از طریق زوایای دوربین و انواع رنگ های تعاملی آسان بود. با <model-viewer> ، می‌توانید هر نوع تجربه‌ای را که می‌توانید رویاپردازی کنید، به کاربران خود بدهید.

ایجاد مدل های سه بعدی

اولین قدم برای توسعه یک تجربه مجازی سه بعدی، ایجاد مدل های محصول سه بعدی است. تیم DSM مدل های سه بعدی خود را در CAD ایجاد کردند. با همکاری نزدیک با طراحان تولید کننده محصول CAD، تیم DSM توانست رندرهای کم پلی را صادر کند که می تواند برای وب بهینه شود. برخی از بهترین شیوه هایی که آنها برای رسیدن به این هدف استفاده کردند در زمینه های زیر بود.

• هندسه:
  • روی درست کردن هندسه (شکل و مقیاس) از هر زاویه تمرکز کنید.
  • از استفاده از نقشه های معمولی برای لبه های مورب خودداری کنید.
  • برگردان ها را به صورت هندسه جداگانه ایجاد کنید.
• رنگ ها و مواد:
  • هدف: نمایش بصری ثابت خواص فیزیکی.
  • دینامیک نور در زمان واقعی را در نظر بگیرید.
  • از مجموعه‌های بافت و مواد جداگانه برای هر نوع مش (مادر، شفاف، برگردان) استفاده کنید.
  • در صورت نیاز به تنظیمات بیشتر، طرح ها را با طراحان اصلی CAD تکرار کنید.
• حجم فایل:
  • به عنوان یک مدل low poly در قالب GLB صادر کنید تا مدل بتواند توسط <model-viewer> استفاده شود.
  • مش های هندسی را به صورت دستی توسط یک طراح سه بعدی، با فروشنده یا از طریق نرم افزار فشرده سازی مانند DRACO (OS) فشرده کنید.

از آنجایی که این مدل‌های سه‌بعدی اغلب در تلفن‌های همراه مورد استفاده قرار می‌گیرند، با تنظیم حداکثر اندازه فایل با بافت‌های ۲ مگابایتی، برای پشتیبانی از دستگاه‌های نسل قدیمی و اتصالات ضعیف اینترنت بهینه‌سازی شدند.

<model-viewer>

تیم DSM از مؤلفه وب منبع باز <model-viewer> Google برای جاسازی مدل های سه بعدی جدید در صفحات وب خود استفاده می کند. برای اینکه مدل‌های ایجاد شده در مرحله یک با <model-viewer> سازگار باشند، دارایی‌ها باید در قالب gITF یا GLB باشند (پسوند .glb). هر دو فرمت فشرده، فشرده، و به سرعت در GPU بارگذاری می شوند. مؤلفه <model-viewer> توسط همه مرورگرهای اصلی همیشه سبز پشتیبانی می شود.

در طول این مرحله، بزرگترین چالشی که تیم DSM با آن مواجه شد این بود که پالت رنگ سخت افزاری گوگل به درستی رندر نمی شد. تیم در نهایت متوجه شد که نقشه تون ACES (استاندارد صنعت فیلم) مسئول رنگ‌های از دست رفته است. برای حل این مشکل، آن‌ها یک نقشه‌نگار جدید Khronos PBR Neutral Tone Mapper را توسعه دادند تا به‌طور خاص این کمبودها را برطرف کند و رنگ‌ها را دقیقاً روی صفحه نمایش دهد، در حالی که از نقاط برجسته و تغییر رنگ مرتبط با نگاشت تن خطی اجتناب می‌کند.

<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 مراجعه کنید. برای آزمایش مدل های سه بعدی خود و دانلود یک وب سایت کامل، ویرایشگر ما را امتحان کنید.

راه حل های سنگین با three.js

<model-viewer> یک روش عالی و کارآمد برای نمایش و تعامل با یک مدل سه بعدی است. با این حال، گاهی اوقات تیم DSM به تجربه وب همهجانبه‌تر و مرتبط‌تری نسبت به <model-viewer> نیاز داشت. یکی از نمونه‌ها راه‌اندازی Nest Mini + C بود. <model-viewer> می‌توانست به مشتریان بالقوه اجازه دهد یک محصول را به صورت سه بعدی در وب تجربه کنند، اما وقتی با سایر محصولات سخت‌افزار Google و ویژگی‌های هوش مصنوعی ترکیب شود، نمی‌تواند مفید بودن آن را نشان دهد. دستیار.

برای این کار، تیم به کتابخانه زیربنایی <model-viewer> ، three.js مراجعه کرد. Three.js یک موتور بازی جاوا اسکریپت منبع باز است و تیم توانست چارچوبی از دارایی های قابل استفاده مجدد برای یک محیط خانه مجازی شامل دوربین های داخلی Nest، چراغ ها و بلندگوها ایجاد کند. این به تیم پایه ای داد تا بازخوردی در زمان واقعی در مورد نحوه تعامل دستگاه ها با یکدیگر ارائه دهد.

جریان گفتگو

آخرین بخش ایجاد تجربه بهم پیوسته، اضافه کردن دستیار Google است. این بدان معناست که کاربران می توانند دستورات و روال های معتبر را با تجربه مجازی به هم پیوسته امتحان کنند. با این حال، درج Google Assistant از حساب موجود کاربر، تعدادی از نگرانی‌های مربوط به حریم خصوصی را باز می‌کند. برای ایجاد راه حلی برای حفظ حریم خصوصی، DSM با سرویس Google Cloud Dialogflow کار کرد تا از Google Assistant در این فضا تقلید کند. نمودار سطح بالا زیر نشان می دهد که چگونه برنامه وب از API Dialogflow (اقتباس شده از Dialogflow Basics ) استفاده می کند. برای هر نوبت مکالمه، برنامه وب از طبقه‌بندی هدف Dialogflow استفاده می‌کرد و API عبارات از پیش تعیین‌شده کاربر نهایی را که با هدف مطابقت داشت، برمی‌گرداند.

برای کسب اطلاعات بیشتر درباره Dialogflow، از اسناد Google Cloud دیدن کنید.

نتیجه نهایی: یک iFrame قابل جاسازی

نتیجه نهایی، کتابخانه‌ای از دارایی‌ها است که می‌تواند در یک صفحه وب با <model-viewer> جاسازی شود یا در یک محیط مجازی کامل استفاده شود تا به مشتریان کمک کند تا در مورد محصولات فردی و نحوه اتصال محصولات بیشتر بدانند. این تجربه هم معتبر، هم مقیاس پذیر و هم مقرون به صرفه است. این اولین تجربه مجازی در ماه مه 2021 راه اندازی شد و در حالی که دیگر در وب سایت فروشگاه Google موجود نیست، همچنان می توانید آن را امتحان کنید .

نتایج

از زمان راه‌اندازی Nest Mini +C، DSM توانسته است چارچوب را برای دو سال گذشته از راه‌اندازی نمونه کارهای Pixel با موفقیت فزاینده استفاده کرده و گسترش دهد. از طریق عملیاتی کردن تکرار این دارایی ها و تجربیات سه بعدی، تیم تاکنون توانسته است تعداد تجربیات آموزش تعاملی محصول را چهار برابر کند و تعداد محصولات بهره مند از این فناوری وب را سه برابر کند.

نتیجه نهایی یک آموزش محصول معتبر و مارک دار برای جابجایی رو به رشد موارد استفاده در مقیاس است که نسبت به استراتژی های قبلی پایدارتر، منسجم تر و تعاملی تر است. و با نگاه به آینده، تیم DSM اکنون مجموعه ای قوی از اجزای یک تجربه همهجانبه دارد که می توانند به سرعت با اهداف تجاری پویا سازگار شوند. این پیشرفت‌ها به تیم DSM اجازه می‌دهد محتوای آموزشی محصول جدید را چهار برابر سریع‌تر و با کمتر از نصف هزینه نسبت به فرآیندهای قدیمی‌تر و سنتی‌تر خود راه‌اندازی کند.