מותאם אישית לתכשיטים בתלת-ממד וחוויית AR

קונים של תכשיטים יוקרתיים זקוקים ליותר מאשר תמונות שטוחות. הם רוצים לראות איך הזהב מחזיר אור או איך נראה חיתוך יהלום במציאות.

הצוות שלי ואני בנינו פלטפורמת eCommerce מוכנה לייצור עבור לקוח בתחום התכשיטים. יצרנו כלי התאמה אישית בתלת-ממד (3D customizer) ותכונת מדידה באמצעות מציאות רבודה (AR try-on). בנינו זאת כך שיעבוד בדפדפן בנייד מבלי להכביד על המכשירים.

כך ניהלנו את התהליך הטכני.

תהליך עיבוד הנכסים (The Asset Pipeline)

תכשיטים מתחילים כקבצי CAD כבדים. קבצים אלו עולים לעיתים קרובות על 50MB וכוללים מיליוני פוליגונים. אי אפשר להשתמש בהם באינטרנט. בנינו תהליך אופטימיזציה מותאם אישית:

  • Remeshing: השתמשנו ב-Blender כדי להפחית את מספר הפוליגונים תוך שמירה על צורות נקיות.
  • Baking Details: הפכנו גיאומטריה מורכבת למפות נורמלים (Normal Maps) דו-ממדיות. זה גורם לתאורה להיראות מפורטת מבלי להוסיף קבצים כבדים.
  • PBR Texturing: הגדרנו מפות ספציפיות עבור roughness ו-metalness כדי להבטיח שהמשטחים ייראו אמיתיים.
  • Compression: ייצאנו את הנכסים לפורמט GLTF/GLB. השתמשנו בדחיסת Google Draco כדי לצמצם את הקבצים מ-50MB לפחות מ-2MB.

מנוע הרינדור (The Rendering Engine)

השתמשנו ב-Three.js כדי להתחבר ישירות ל-GPU של המשתמש. כדי לגרום למתכות להיראות ברמה יוקרתית, מיפינו תמונה בעלת טווח דינמי גבוה (HDRI) כמפת סביבה (environment map). זה מאפשר למתכת להציג השתקפויות בזמן אמת בזמן שהמשתמשים מסובבים את הטבעת.

טיפלנו בשינויי חומרים באמצעות קוד. כאשר משתמש בוחר מתכת, אנחנו עוברים על סצנת ה-GLTF ומעדכנים את ערכי הצבע, ה-roughness וה-metalness באופן מיידי.

מציאות רבודה (Augmented Reality - AR)

הטמענו תהליך עבודה עם מנוע כפול עבור משתמשי מובייל:

  • Android: השתמשנו באינטגרציה של Scene Viewer.
  • iOS: השתמשנו בתקנים של האינטרנט כדי להבטיח תמיכה חוצת פלטפורמות.

הלקח (The Lesson)

הנדסת פרונטנד מודרנית עוסקת בבניית תהליכים (pipelines) יעילים. עליך להפוך קבצים כבדים לנכסים קלים. עליך להבטיח שחוויות בנאמנות גבוהה (high-fidelity) יעבדו בדפדפני מובייל סטנדרטיים.

האם בניתם אלמנטים תלת-ממדיים אינטראקטיביים או השתמשתם ב-WebXR בפרויקט כלשהו? ספרו לי על שיטות האופטימיזציה שלכם בתגובות.

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