𝟯𝗗 𝗝𝗲𝘄𝗲𝗹𝗿𝘆 𝗖𝘂𝘀𝘁𝗼𝗺𝗶𝘇𝗲𝗿 𝗮𝗻𝗱 𝗔𝗥 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲

हाई-एंड ज्वेलरी खरीदारों को केवल साधारण तस्वीरों से कहीं अधिक की आवश्यकता होती है। वे देखना चाहते हैं कि सोना रोशनी को कैसे परावर्तित (reflect) करता है या हीरे की कटिंग असल जिंदगी में कैसी दिखती है।

मेरी टीम और मैंने एक ज्वेलरी क्लाइंट के लिए प्रोडक्शन-रेडी ई-कॉमर्स प्लेटफॉर्म बनाया। हमने एक 3D कस्टमाइज़र और ऑगमेंटेड रियलिटी (AR) ट्राई-ऑन फीचर तैयार किया। हमने इसे इस तरह बनाया कि यह मोबाइल ब्राउज़र पर डिवाइस क्रैश किए बिना काम कर सके।

यहाँ बताया गया है कि हमने तकनीकी प्रक्रिया को कैसे प्रबंधित किया।

The Asset Pipeline

ज्वेलरी की शुरुआत भारी CAD फाइलों से होती है। ये फाइलें अक्सर 50MB से अधिक की होती हैं और इनमें लाखों पॉलीगॉन (polygons) होते हैं। हम इन्हें वेब पर उपयोग नहीं कर सकते। हमने एक कस्टम ऑप्टिमाइज़ेशन पाइपलाइन बनाई:

  • Remeshing: हमने साफ आकृतियों (shapes) को बनाए रखते हुए पॉलीगॉन की संख्या कम करने के लिए Blender का उपयोग किया।
  • Baking Details: हमने जटिल ज्योमेट्री (geometry) को 2D Normal Maps में बदल दिया। इससे भारी फाइलें जोड़े बिना लाइटिंग विस्तृत (detailed) दिखाई देती है।
  • PBR Texturing: हमने सतहों को वास्तविक दिखाने के लिए roughness और metalness के लिए विशिष्ट मैप्स सेट किए।
  • Compression: हमने एसेट्स को GLTF/GLB फॉर्मेट में एक्सपोर्ट किया। हमने फाइलों को 50MB से घटाकर 2MB से कम करने के लिए Google Draco कंप्रेशन का उपयोग किया।

The Rendering Engine

हमने सीधे यूजर के GPU से जुड़ने के लिए Three.js का उपयोग किया। धातुओं को लग्जरी-ग्रेड दिखाने के लिए, हमने एक हाई-डायनेमिक-रेंज इमेज (HDRI) को एनवायरनमेंट मैप के रूप में मैप किया। इससे यूजर द्वारा अंगूठी घुमाने पर धातु में रियल-टाइम रिफ्लेक्शन दिखाई देते हैं।

हमने कोड के माध्यम से मटेरियल बदलावों को संभाला। जब कोई यूजर धातु चुनता है, तो हम GLTF सीन को ट्रेवर्स (traverse) करते हैं और रंग, roughness और metalness वैल्यू को तुरंत अपडेट कर देते हैं।

Augmented Reality (AR)

हमने मोबाइल यूजर्स के लिए एक ड्यूल-इंजन वर्कफ़्लो लागू किया:

  • Android: हमने Scene Viewer इंटीग्रेशन का उपयोग किया।
  • iOS: हमने क्रॉस-प्लेटफ़ॉर्म सपोर्ट सुनिश्चित करने के लिए वेब स्टैंडर्ड्स का उपयोग किया।

The Lesson

आधुनिक फ्रंटएंड इंजीनियरिंग कुशल पाइपलाइन बनाने के बारे में है। आपको भारी फाइलों को हल्के एसेट्स में बदलना होगा। आपको यह सुनिश्चित करना होगा कि हाई-फिडेलिटी (high-fidelity) अनुभव मानक मोबाइल ब्राउज़रों पर काम करें।

क्या आपने किसी प्रोजेक्ट में इंटरैक्टिव 3D एलिमेंट्स बनाए हैं या WebXR का उपयोग किया है? मुझे कमेंट्स में अपने ऑप्टिमाइज़ेशन तरीके बताएं।

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