3D جیولری کسٹمائزر اور AR تجربہ

اعلیٰ معیار کی جیولری خریدنے والوں کو محض سادہ تصاویر سے زیادہ کی ضرورت ہوتی ہے۔ وہ دیکھنا چاہتے ہیں کہ سونا روشنی کو کیسے منعکس کرتا ہے یا ہیرے کی کٹائی حقیقت میں کیسی نظر آتی ہے۔

میری ٹیم اور میں نے ایک جیولری کلائنٹ کے لیے پروڈکشن کے قابل eCommerce پلیٹ فارم تیار کیا۔ ہم نے ایک 3D کسٹمائزر اور Augmented Reality (AR) ٹرائی آن فیچر بنایا۔ ہم نے اسے اس طرح بنایا کہ یہ موبائل براؤزر پر ڈیوائسز کو کریش کیے بغیر کام کر سکے۔

یہاں بتایا گیا ہے کہ ہم نے تکنیکی عمل کو کیسے سنبھالا۔

The Asset Pipeline

جیولری کا آغاز بھاری CAD فائلوں سے ہوتا ہے۔ یہ فائلیں اکثر 50MB سے زیادہ ہوتی ہیں اور ان میں لاکھوں polygons ہوتے ہیں۔ ہم انہیں ویب پر استعمال نہیں کر سکتے۔ ہم نے ایک کسٹم آپٹیمائزیشن پائپ لائن بنائی:

  • Remeshing: ہم نے صاف شکلیں برقرار رکھتے ہوئے polygon کی تعداد کم کرنے کے لیے Blender کا استعمال کیا۔
  • Baking Details: ہم نے پیچیدہ جیومیٹری کو 2D Normal Maps میں تبدیل کر دیا۔ اس سے بھاری فائلیں شامل کیے بغیر لائٹنگ تفصیلی نظر آتی ہے۔
  • PBR Texturing: ہم نے سطحوں کو حقیقی دکھانے کے لیے roughness اور metalness کے لیے مخصوص میپس سیٹ کیے۔
  • Compression: ہم نے اثاثہ جات کو GLTF/GLB فارمیٹ میں ایکسپورٹ کیا۔ ہم نے فائلوں کو 50MB سے کم کر کے 2MB سے نیچے لانے کے لیے Google Draco compression کا استعمال کیا۔

The Rendering Engine

ہم نے صارف کے GPU سے براہ راست منسلک ہونے کے لیے Three.js کا استعمال کیا۔ دھاتوں کو لگژری درجے کا دکھانے کے لیے، ہم نے ایک high-dynamic-range image (HDRI) کو environment map کے طور پر استعمال کیا۔ اس سے دھات میں real-time reflections نظر آتے ہیں جب صارفین انگوٹھی کو گھماتے ہیں۔

ہم نے کوڈ کے ذریعے میٹریل کی تبدیلیوں کو سنبھالا۔ جب صارف کوئی دھات منتخب کرتا ہے، تو ہم GLTF scene کا جائزہ لیتے ہیں اور رنگ، roughness، اور metalness کی ویلیوز کو فوری طور پر اپ ڈیٹ کر دیتے ہیں۔

Augmented Reality (AR)

ہم نے موبائل صارفین کے لیے ایک ڈوئل انجن ورک فلو نافذ کیا:

  • Android: ہم نے Scene Viewer integration کا استعمال کیا۔
  • iOS: ہم نے کراس پلیٹ فارم سپورٹ کو یقینی بنانے کے لیے ویب اسٹینڈرڈز کا استعمال کیا۔

The Lesson

جدید فرنٹ اینڈ انجینئرنگ کا مقصد موثر پائپ لائنز بنانا ہے۔ آپ کو بھاری فائلوں کو ہلکے پھلکے اثاثوں (assets) میں تبدیل کرنا ہوگا۔ آپ کو اس بات کو یقینی بنانا ہوگا کہ ہائی فائیڈیلیٹی تجربات عام موبائل براؤزرز پر کام کریں۔

کیا آپ نے کسی پروجیکٹ میں انٹرایکٹو 3D عناصر بنائے ہیں یا WebXR کا استعمال کیا ہے؟ مجھے کمنٹس میں اپنے آپٹیمائزیشن کے طریقے بتائیں۔

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