تصميم ثلاثي الأبعاد تفاعلي على الويب باستخدام أجهزة Google: تجارب تعليمية من الجيل التالي للمنتجات

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

تتولى مؤسسة "التسويق للأجهزة والخدمات" في Google الإشراف على استراتيجية التسويق لمجموعة كبيرة من المنتجات، مثل الهواتف الذكية والساعات وسماعات الأذن والأجهزة اللوحية والأجهزة المنزلية الذكية والاشتراكات ذات الصلة، والتي تتوفر جميعها من خلال Google Store وبائعي الجهات الخارجية على مستوى العالم. يتعرّف المستخدمون على هذه المنتجات على الإنترنت وفي متاجر البيع بالتجزئة.

يواجه هذا الفريق تحديًا مستمرًا يتمثل في تثقيف المستهلكين وبائعي التجزئة حول حالات الاستخدام والمزايا التي توفّرها المنظومة المتكاملة لأجهزة Google وتجارب الذكاء الاصطناعي المتقدمة. لمساعدة المستهلكين على فهم المنتجات و وظائفها بشكل أفضل، أنشأ فريق DSM مساحة افتراضية ثلاثية الأبعاد باستخدام تكنولوجيا متقدمة لصفحات الويب بهدف معالجة العديد من هذه التحديات. في هذه الدراسة، يمكنك الاطّلاع على كيف وفّر الفريق تجربة أكثر تفاعلاً للعملاء، من خلال إطلاق هذه التجارب الجديدة بسرعة أكبر أربع مرات وبنصف تكلفة مواد العرض الرقمية التقليدية.

التحدّي: المحتوى التعليمي عن المنتجات

إنّ تعليم موظفي المبيعات والعملاء الذين يستخدمون منتجات أجهزة Google لأول مرة حول مزايا ميزات مثل إمكانية التشغيل التفاعلي والذكاء الاصطناعي هو أمر مكلف وصعب. تعتمد الاستراتيجيات التقليدية للتعليم حول المنتجات على المحتوى الرقمي الذي يتم إنتاجه باستخدام المنتجات المادية، ثم يتم استضافته على منصات التعلّم الرقمي. توفّر منصات التعلّم هذه المواصفات الفنية للمنتجات والصور والفيديوهات، ولكن لا تتيح الوصول إلى المنتجات المادية أو المتصلة.

إنّ إنتاج محتوى تعليمي، مثل الفيديو، باهظ التكلفة، كما أنّه من المعقد غالباً ترجمة هذا المحتوى وجعله متاحًا في الأسواق العالمية، ومن شبه المستحيل إعادة استخدامه في المنتجات الأخرى. يتطلّب إنشاء مواد العرض الأولية ميزانيات لاختيار الممثلين وتوفير الملابس والبحث عن المواقع الجغرافية ودفع رسوم المواقع الجغرافية ورسوم الاستوديو وفرق الأفلام وأعمال ما بعد الإنتاج. يجب أيضًا مراعاة تكاليف الإنتاج والمواد التي يتم تسليمها في ما يتعلّق بالترجمة والنشر، ويُعدّ تعديل مواد العرض والمواقع الجغرافية والمنتجات والنصوص والعناصر المرئيّة من الصعوبات التي تواجه التسويق التقليدي على نطاق واسع. وإذا أخذنا في الاعتبار أنّ معظم المنتجات المتوافقة تطرح ميزات جديدة كل شهرَين، تصبح مواد العرض هذه قديمة بحلول وقت الانتهاء منها.

استكشاف طرق أفضل لمشاركة معلومات المنتجات

في محاولة للعثور على طريقة أفضل لمشاركة معلومات المنتجات، حاول فريق DSM تجربة تجارب الواقع الافتراضي/الواقع المعزّز في أحد التطبيقات. وكانت النتائج واعدة، إذ ساهمت في strengthening both engagement and increased basket sizes at points of sale. ومع ذلك، كانت عمليات تنزيل التطبيقات عائقًا كبيرًا أمام كلّ من موظفي المبيعات وعملائها، وكان حصر التجربة على تطبيق يعني أنّه لا يمكن دمجها في خدمات أخرى تابعة للطرف الأول أو لجهات خارجية، مثل store.google.com.

حلول خفيفة باستخدام <model-viewer>

بعد أن شاهد الفريق نجاح نماذج المنتجات الثلاثية الأبعاد في تقديم معلومات عن المنتجات، قرر استخدام هذا الأسلوب على الويب. وإحدى الطرق لتحقيق ذلك هي استخدام <model-viewer> لإنشاء تجارب ثلاثية الأبعاد باستخدام منتجات فردية.

<model-viewer> هو مكوّن ويب، يتيح لك إضافة تصميم ثلاثي الأبعاد إلى صفحة ويب بشكل صريح، مع استضافة التصميم على موقعك الإلكتروني. يمكنك الاطّلاع على هذه الميزة في صفحة Pixel Fold على Google Store، حيث تتيح <model-viewer> للمستخدمين الاطّلاع على هاتف Pixel Fold من أي زاوية وبوضعيات مختلفة للطي. كان من السهل دمج النموذج الثلاثي الأبعاد في بقية تجربة المستخدم في HTML، مع أزرار لسرد قصة من خلال زوايا الكاميرا ونماذج الألوان التفاعلية. باستخدام <model-viewer>، يمكنك منح المستخدمين أي نوع من التجارب التي تتخيلها.

إنشاء النماذج الثلاثية الأبعاد

الخطوة الأولى لتطوير تجربة افتراضية ثلاثية الأبعاد هي إنشاء نماذج المنتجات الثلاثية الأبعاد. أنشأ فريق DSM النماذج الثلاثية الأبعاد باستخدام برنامج التصميم بمساعدة الكمبيوتر (CAD). ومن خلال العمل عن كثب مع المصمّمين الذين ينشئون نماذج CAD للمنتجات، تمكّن فريق DSM من تصدير نماذج منخفضة التفاصيل يمكن تحسينها للويب. في ما يلي بعض أفضل الممارسات التي استخدموها لتحقيق ذلك في المجالات التالية.

  • الأشكال الهندسية:
    • ركِّز على جعل الأشكال الهندسية (الشكل والمقياس) دقيقة من كل زاوية.
    • تجنَّب استخدام الخرائط العادية لتسطيح الحواف.
    • أنشئ الملصقات كأشكال هندسية منفصلة.
  • الألوان والمواد:
    • الهدف: عرض مرئي متسق للمواصفات
    • خذ في الاعتبار الديناميكيات في الإضاءة في الوقت الفعلي.
    • استخدِم مجموعات مواد وصور ظلّية منفصلة لكل نوع من أنواع الشبكة (غير الشفاف، الشفاف، الملصق).
    • كرِّر التصاميم مع مصمّمي CAD الأصليين إذا لزم إجراء تعديلات إضافية.
  • حجم الملف:
    • تصدير التصميم كنموذج منخفض الدقة بتنسيق GLB ليتمكّن <model-viewer> من استخدامه
    • ضغط الشبكات الهندسية يدويًا بواسطة مصمّم ثلاثي الأبعاد أو من خلال مزوّد أو من خلال برنامج ضغط مثل DRACO (نظام التشغيل)

ولأنّه سيتم استخدام هذه النماذج الثلاثية الأبعاد غالبًا على الهواتف الجوّالة، تم تحسينها من خلال ضبط الحد الأقصى لحجم الملف مع مواد العرض التي تبلغ 2 ميغابايت، وذلك لتتوافق مع الأجهزة القديمة واتصالات الإنترنت الضعيفة.

<model-viewer>

يستخدم فريق DSM مكوّن الويب <model-viewer> المفتوح المصدر من Google لتضمين نماذج ثلاثية الأبعاد تم إنشاؤها حديثًا في صفحات الويب. لكي تكون النماذج التي تم إنشاؤها في الخطوة الأولى متوافقة مع <model-viewer>، يجب أن تكون مواد العرض بتنسيق glTF أو GLB (بامتداد ‎ .glb). كلا التنسيقَين مكثّفَان وقابلَان للضغط ويُحمَّلان بسرعة في وحدة معالجة الرسومات. يتوفّر المكوّن <model-viewer> في جميع المتصفحات الرئيسية التي لا تتوقف عن التحديث.

خلال هذه الخطوة، كان أكبر تحدٍّ واجهه فريق DSM هو عدم عرض لوحة ألوان أجهزة Google بدقة. اكتشف الفريق في نهاية المطاف أنّ ميزة ACES tone mapping (معيار في مجال صناعة الأفلام) هي المسؤولة عن فقدان الألوان. لحلّ هذه المشكلة، طوّروا أداة جديدة لتحويل الدرجات اللونية المحايدة في نموذج 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. لاختبار نماذجك الثلاثية الأبعاد وتنزيل موقع إلكتروني كامل للمبتدئين، جرِّب أداة التعديل.

الحلول الثقيلة باستخدام three.js

<model-viewer> هي طريقة رائعة وعالية الأداء لعرض ملف واحد من نماذج BIM ثلاثية الأبعاد والتفاعل معه. ومع ذلك، كان فريق DSM يحتاج أحيانًا إلى تجربة ويب أكثر تفاعلية وأكثر ترابطة مما هو ممكن باستخدام <model-viewer>. ومن الأمثلة على ذلك إطلاق Nest Mini + C. يمكن أن تسمح <model-viewer> للعملاء المحتملين بتجربة منتج ثلاثي الأبعاد على الويب، ولكن لا يمكنها إظهار فائدته عند دمجها مع منتجات Google Hardware الأخرى وميزات الذكاء الاصطناعي ، مثل "مساعد Google".

لهذه المهمة، اعتمد الفريق على مكتبة <model-viewer>، three.js. ‫Three.js هو محرك ألعاب JavaScript مفتوح المصدر، وتمكّن الفريق من إنشاء إطار عمل لملفات أصول قابلة لإعادة الاستخدام لبيئة منزلية افتراضية تتضمّن كاميرات Nest الداخلية والأضواء ومكبّرات الصوت. وقدّم ذلك للفريق أسسًا لتقديم ملاحظات في الوقت الفعلي حول كيفية تفاعل الأجهزة مع بعضها.

Dialogflow

الخطوة الأخيرة لإنشاء تجربة مترابطة هي إضافة "مساعد Google". وهذا يعني أنّه يمكن للمستخدمين تجربة الأوامر والإجراءات المعتادة من خلال التجربة الافتراضية المترابطة. ومع ذلك، فإنّ إدراج "مساعد Google" من حساب المستخدم الحالي سيؤدي إلى ظهور عدد من المسائل المتعلّقة بالخصوصية. لإنشاء حلّ يراعي الخصوصية، تعاونت DSM مع خدمة Dialogflow من Google Cloud لمحاكاة "مساعد Google" في هذه المساحة. يوضّح المخطّط البياني التالي على مستوى عالٍ كيفية استخدام تطبيق الويب لواجهة برمجة تطبيقات Dialogflow (تم اقتباسه من أساسيات Dialogflow). في كل خطوة من خطوات المحادثة، استخدم تطبيق الويب تصنيف الأهداف في Dialogflow، وعرض واجهة برمجة التطبيقات تعابير محدّدة مسبقًا للمستخدِم النهائي تطابق الهدف.

مخطّط بياني لتدفّقات المستخدِمين

لمزيد من المعلومات عن Dialogflow، يُرجى الانتقال إلى مستندات Google Cloud.

النتيجة النهائية: إطار iframe قابل للتضمين

والنتيجة النهائية هي مكتبة من مواد العرض التي يمكن تضمينها في صفحة ويب باستخدام <model-viewer> أو استخدامها في بيئة افتراضية كاملة لمساعدة العملاء في الاطّلاع على مزيد من المعلومات عن المنتجات الفردية وكيفية ربط المنتجات ببعضها. أن تكون التجربة أصيلة وقابلة للتوسّع وفعالة من حيث التكلفة تم إطلاق هذه التجربة الافتراضية الأولى في أيار (مايو) 2021، ومع أنّها لم تعُد متوفّرة على الموقع الإلكتروني لمتجر Google Store، فإنه لا يزال بإمكانك تجربتها.

النتائج

منذ إطلاق Nest Mini +C، تمكّنت DSM من إعادة استخدام الإطار المرجعي وتوسيع نطاقه على مدار العامين الماضيين من عمليات إطلاق مجموعة منتجات Pixel بنجاح متزايد. ومن خلال استخدام هذه مواد العرض والتجارب الثلاثية الأبعاد، تمكّن الفريق حتى الآن من زيادة عدد التجارب التعليمية التفاعُلية للمنتجات بمقدار أربعة أضعاف وزيادة عدد المنتجات التي تستفيد من تكنولوجيا الويب هذه بمقدار ثلاثة أضعاف.

والنتيجة النهائية هي تقديم معلومات أصلية عن المنتج تحمل علامة تجارية معيّنة لعدد متزايد من حالات الاستخدام على نطاق واسع، وهي أكثر استدامة وانسجامًا وتفاعلية من الاستراتيجيات السابقة. وفي المستقبل، أصبح لدى فريق DSM الآن مجموعة قوية من مكوّنات تجربة غامرة يمكنه التكيّف معها بسرعة مع استهدافات النشاط التجاري الديناميكية. تتيح هذه التحسينات لفريق DSM إطلاق محتوى تعليمي جديد عن المنتجات بسرعة أكبر أربع مرات وبتكلفة أقل من نصف التكلفة مقارنةً بالعمليات التقليدية السابقة.