مخصص المجوهرات ثلاثي الأبعاد وتجربة الواقع المعزز (AR)

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

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

إليكم كيف أدرنا العملية التقنية.

The Asset Pipeline

تبدأ المجوهرات كملفات CAD ثقيلة. غالبًا ما تتجاوز هذه الملفات 50 ميجابايت وتحتوي على ملايين المضلعات (polygons). لا يمكننا استخدام هذه الملفات على الويب، لذا قمنا ببناء مسار تحسين مخصص:

  • إعادة بناء الشبكة (Remeshing): استخدمنا Blender لتقليل عدد المضلعات مع الحفاظ على الأشكال النظيفة.
  • خبز التفاصيل (Baking Details): قمنا بتحويل الهندسة المعقدة إلى خرائط طبيعية (Normal Maps) ثنائية الأبعاد. هذا يجعل الإضاءة تبدو مفصلة دون إضافة ملفات ثقيلة.
  • إكساء PBR: قمنا بضبط خرائط محددة للخشونة (roughness) والمعدنية (metalness) لضمان ظهور الأسطح بشكل واقعي.
  • الضغط: قمنا بتصدير الأصول بصيغة GLTF/GLB. واستخدمنا ضغط Google Draco لتقليص حجم الملفات من 50 ميجابايت إلى أقل من 2 ميجابايت.

The Rendering Engine

استخدمنا Three.js للاتصال مباشرة بمعالج الرسوميات (GPU) الخاص بالمستخدم. ولجعل المعادن تبدو بمستوى فاخر، قمنا برسم صورة عالية النطاق الديناميكي (HDRI) كخريطة بيئة (environment map). يتيح ذلك للمعدن إظهار انعكاسات في الوقت الفعلي أثناء تدوير المستخدم للخاتم.

تعاملنا مع تغيير المواد من خلال الكود. عندما يختار المستخدم معدنًا، نقوم بالتنقل عبر مشهد GLTF وتحديث قيم اللون والخشونة والمعدنية فورًا.

Augmented Reality (AR)

قمنا بتنفيذ سير عمل بمحرك مزدوج لمستخدمي الهاتف المحمول:

  • Android: استخدمنا تكامل Scene Viewer.
  • iOS: استخدمنا معايير الويب لضمان دعم المنصات المختلفة.

The Lesson

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

هل قمت ببناء عناصر ثلاثية الأبعاد تفاعلية أو استخدمت WebXR في أحد مشاريعك؟ أخبرني بطرق التحسين التي تتبعها في التعليقات.

Source: https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4