3D জুয়েলারি কাস্টমাইজ়ার এবং AR অভিজ্ঞতা

হাই-এন্ড জুয়েলারি ক্রেতাদের কেবল দ্বিমাত্রিক (flat) ছবির চেয়ে বেশি কিছু প্রয়োজন। তারা দেখতে চান কীভাবে সোনা আলো প্রতিফলিত করে বা একটি হীরার কাট বাস্তবে কেমন দেখায়।

আমি এবং আমার টিম একজন জুয়েলারি ক্লায়েন্টের জন্য একটি প্রোডাকশন-রেডি ই-কমার্স প্ল্যাটফর্ম তৈরি করেছি। আমরা একটি 3D কাস্টমাইজ়ার এবং একটি Augmented Reality (AR) ট্রাই-অন ফিচার তৈরি করেছি। আমরা এটি এমনভাবে তৈরি করেছি যাতে মোবাইল ব্রাউজারে ডিভাইস ক্র্যাশ না করেই এটি কাজ করতে পারে।

আমরা কীভাবে প্রযুক্তিগত প্রক্রিয়াটি পরিচালনা করেছি তা নিচে দেওয়া হলো।

The Asset Pipeline

জুয়েলারি ডিজাইন শুরু হয় ভারী CAD ফাইল হিসেবে। এই ফাইলগুলো প্রায়শই 50MB এর বেশি হয় এবং এতে লক্ষ লক্ষ পলিগন থাকে। আমরা এগুলো ওয়েবে ব্যবহার করতে পারি না। তাই আমরা একটি কাস্টম অপ্টিমাইজেশন পাইপলাইন তৈরি করেছি:

  • Remeshing: আমরা আকৃতি ঠিক রেখে পলিগন সংখ্যা কমাতে Blender ব্যবহার করেছি।
  • Baking Details: আমরা জটিল জ্যামিতিকে 2D Normal Maps-এ রূপান্তর করেছি। এটি ভারী ফাইল যোগ না করেই লাইটিংকে বিস্তারিত দেখায়।
  • PBR Texturing: পৃষ্ঠতলগুলো বাস্তবসম্মত দেখানোর জন্য আমরা roughness এবং metalness-এর জন্য নির্দিষ্ট ম্যাপ সেট করেছি।
  • Compression: আমরা অ্যাসেটগুলোকে GLTF/GLB ফরম্যাটে এক্সপোর্ট করেছি। ফাইলগুলোকে 50MB থেকে ২MB-এর নিচে নামিয়ে আনতে আমরা Google Draco compression ব্যবহার করেছি।

The Rendering Engine

আমরা সরাসরি ইউজারের GPU-এর সাথে সংযোগ স্থাপনের জন্য Three.js ব্যবহার করেছি। ধাতুগুলোকে লাক্সারি-গ্রেড দেখানোর জন্য, আমরা একটি high-dynamic-range image (HDRI)-কে এনভায়রনমেন্ট ম্যাপ হিসেবে ম্যাপ করেছি। এটি ব্যবহারকারীরা যখন আংটিটি ঘোরায়, তখন ধাতুর রিয়েল-টাইম প্রতিফলন দেখতে সাহায্য করে।

আমরা কোডের মাধ্যমে ম্যাটেরিয়াল পরিবর্তনগুলো পরিচালনা করেছি। যখন একজন ব্যবহারকারী কোনো ধাতু নির্বাচন করেন, আমরা GLTF সিনটি ট্রাভার্স করি এবং তাৎক্ষণিকভাবে রঙ, roughness এবং metalness ভ্যালুগুলো আপডেট করি।

Augmented Reality (AR)

আমরা মোবাইল ব্যবহারকারীদের জন্য একটি ডুয়াল-ইঞ্জিন ওয়ার্কফ্লো বাস্তবায়ন করেছি:

  • Android: আমরা Scene Viewer ইন্টিগ্রেশন ব্যবহার করেছি।
  • iOS: ক্রস-প্ল্যাটফর্ম সাপোর্ট নিশ্চিত করতে আমরা ওয়েব স্ট্যান্ডার্ড ব্যবহার করেছি।

The Lesson

আধুনিক ফ্রন্টএন্ড ইঞ্জিনিয়ারিং হলো দক্ষ পাইপলাইন তৈরি করা। আপনাকে ভারী ফাইলগুলোকে লাইটওয়েট অ্যাসেটে রূপান্তর করতে হবে। আপনাকে নিশ্চিত করতে হবে যে হাই-ফিডেলিটি অভিজ্ঞতাগুলো সাধারণ মোবাইল ব্রাউজারে কাজ করে।

আপনি কি কোনো প্রজেক্টে ইন্টারেক্টিভ 3D এলিমেন্ট তৈরি করেছেন বা WebXR ব্যবহার করেছেন? আপনার অপ্টিমাইজেশন পদ্ধতিগুলো কমেন্টে জানান।

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