Google का डिवाइस ऐंड सर्विसेज़ मार्केटिंग (डीएसएम) संगठन, कई तरह के प्रॉडक्ट के लिए मार्केट में आने वाली स्ट्रेटजी पर नज़र रखता है. जैसे: स्मार्ट फ़ोन, स्मार्टवॉच, ईयरबड, टैबलेट, स्मार्ट होम डिवाइस, और काम की सदस्यताएं. ये सभी Google Store और तीसरे पक्ष के ग्लोबल वेंडर, दोनों के लिए उपलब्ध हैं. लोगों को ऑनलाइन और खुदरा दुकानों पर इन प्रॉडक्ट के बारे में जानकारी मिलती है.
इस टीम के लिए बड़ी चुनौती यह है कि वे अपने उपभोक्ताओं और खुदरा दुकानदारों को Google के हार्डवेयर नेटवर्क के इस्तेमाल के उदाहरणों और फ़ायदों के बारे में जानकारी दें. साथ ही, उन्हें एआई के बेहतर अनुभवों के बारे में भी जानकारी देनी होगी. प्रॉडक्ट और उनके फ़ंक्शन को समझने में उपभोक्ताओं की बेहतर तरीके से मदद करने के लिए, DSM टीम ने बेहतर वेब टेक्नोलॉजी का इस्तेमाल करके 3D वर्चुअल स्पेस बनाया है, ताकि इनमें से कई चुनौतियों का सामना किया जा सके. इस केस स्टडी में बताया गया है कि टीम ने किस तरह ग्राहकों को बेहतर अनुभव दिया. इसकी वजह से, इन सुविधाओं को चार गुना तेज़ी से लॉन्च किया जा सका और पारंपरिक डिजिटल एसेट की लागत से आधा.
चुनौती: प्रॉडक्ट के बारे में जानकारी
Google के हार्डवेयर प्रॉडक्ट के नए उपयोगकर्ताओं और सेल्स असोसिएट को इंटरऑपरेबिलिटी और एआई जैसी सुविधाओं के फ़ायदों के बारे में बताना, महंगा और मुश्किल होता है. पारंपरिक प्रॉडक्ट सीखने की रणनीतियों में ऐसे डिजिटल कॉन्टेंट का इस्तेमाल किया जाता है जिसे फ़िज़िकल प्रॉडक्ट का इस्तेमाल करके बनाया गया हो और फिर उसे डिजिटल लर्निंग प्लैटफ़ॉर्म पर होस्ट किया गया हो. सिखाने वाले इन प्लैटफ़ॉर्म पर, प्रॉडक्ट की तकनीकी जानकारी, इमेज, और वीडियो उपलब्ध होते हैं. हालांकि, इनके पास फ़िज़िकल प्रॉडक्ट या आपस में जुड़े प्रॉडक्ट का ऐक्सेस नहीं होता.
वीडियो जैसे लर्निंग कॉन्टेंट को बनाना महंगा होता है, दुनिया भर के बाज़ारों के लिए उसे स्थानीय भाषा में तैयार करना मुश्किल होता है, और प्रॉडक्ट के बीच दोबारा इस्तेमाल करना करीब-करीब नामुमकिन होता है. शुरुआती एसेट बनाने के लिए, कास्ट करने, कपड़ों, लोकेशन स्कॉउटिंग, लोकेशन फ़ीस, स्टूडियो की फ़ीस, फ़िल्म क्रू, और पोस्ट प्रोडक्शन के लिए बजट की ज़रूरत होती है. प्रोडक्शन की लागत और डिलीवर किए जा सकने वाले कॉन्टेंट को भी स्थानीय भाषा में लिखना ज़रूरी है. ऐसेट, जगह, प्रॉडक्ट, कॉपी, और टैलेंट में बदलाव करना खास तौर पर परंपरागत मार्केटिंग के लिए बड़े पैमाने पर मैनेज करने के लिए काफ़ी मुश्किल है. जब आपको लगता है कि काम करने वाले ज़्यादातर प्रॉडक्ट में हर कुछ महीने में सुविधाओं में गिरावट आती है, तो ये ऐसेट खत्म होने से पहले ही पुरानी हो जाती हैं.
प्रॉडक्ट की जानकारी शेयर करने के बेहतर तरीके खोजने के लिए
प्रॉडक्ट की जानकारी शेयर करने का बेहतर तरीका खोजने के लिए, DSM टीम ने एक ऐप्लिकेशन में वीआर/एआर अनुभव के साथ प्रयोग किया. नतीजा यह रहा कि बिक्री की जगहों पर लोगों की दिलचस्पी बढ़े और उनके बास्केट साइज़ बढ़े. हालांकि, बिक्री के लिए काम करने वाले सहयोगियों और ग्राहकों, दोनों के लिए ऐप्लिकेशन को डाउनलोड करने में बहुत रुकावट होती थी. साथ ही, इस अनुभव को किसी ऐप्लिकेशन तक सीमित रखने का मतलब यह था कि उसे store.google.com जैसे पहले या तीसरे पक्ष की अन्य प्रॉपर्टी में एम्बेड नहीं किया जा सकता.
<model-viewer> की मदद से आसान समाधान
प्रॉडक्ट की शिक्षा के लिए 3D प्रॉडक्ट मॉडल की सफलता देखने के बाद, टीम ने
इस तरीके को वेब पर लाने का फ़ैसला किया. ऐसा करने का एक तरीका यह है कि आप <model-viewer> का इस्तेमाल करके, अलग-अलग प्रॉडक्ट के साथ 3D अनुभव बनाएं.
<model-viewer> एक वेब कॉम्पोनेंट है. इसकी मदद से, अपनी साइट पर मॉडल को होस्ट करते समय, वेब पेज में 3D मॉडल को जानकारी के साथ जोड़ा जा सकता है.
इसे Google Store पर
Pixel Fold
पेज पर देखा जा सकता है. इस पेज पर <model-viewer> लोगों को Pixel Fold को किसी भी ऐंगल से देखने की सुविधा मिलती है. 3D मॉडल को बाकी एचटीएमएल UX के साथ
इंटिग्रेट करना आसान था. साथ ही, इन बटन की मदद से कैमरा ऐंगल और
इंटरैक्टिव कलर वैरिएंट के ज़रिए कहानी बताई जा सकती थी. <model-viewer> की मदद से, उपयोगकर्ताओं को
अपनी पसंद का अनुभव दिया जा सकता है.
3D मॉडल बनाना
3D वर्चुअल अनुभव को डेवलप करने का पहला कदम है, 3D प्रॉडक्ट मॉडल बनाना. DSM टीम ने CAD में अपने 3D मॉडल बनाए. प्रॉडक्ट CAD बनाने वाले डिज़ाइनरों के साथ मिलकर काम करके DSM टीम लो पॉलीरेंडर को एक्सपोर्ट कर पाई, जिन्हें वेब के लिए ऑप्टिमाइज़ किया जा सकता था. ऐसा करने के लिए, संगठन ने इन तरीक़ों में से कुछ सबसे सही तरीक़ों का इस्तेमाल किया.
- ज्यामिति:
- हर ऐंगल से ज्यामिति (आकार और स्केल) को सटीक बनाने पर फ़ोकस करें.
- किनारों को जोड़ने के लिए सामान्य मैप का इस्तेमाल करने से बचें.
- अलग-अलग ज्यामिति के तौर पर स्टिकर बनाएं.
- रंग और सामग्री:
- लक्ष्य: भौतिक गुणों का लगातार विज़ुअल प्रज़ेंटेशन.
- रीयल-टाइम में रोशनी की डाइनैमिक वैल्यू का इस्तेमाल करें.
- हर तरह के मेश टाइप (ओपेक, पारदर्शी, डेकल) के लिए अलग-अलग टेक्सचर सेट और मटीरियल का इस्तेमाल करें.
- अगर आगे और अडजस्टमेंट की ज़रूरत है, तो ओरिजनल सीएडी डिज़ाइनर के साथ डिज़ाइन पर दोहराएं.
- फ़ाइल का साइज़:
- लो पॉली मॉडल को GLB फ़ॉर्मैट में एक्सपोर्ट करें, ताकि
<model-viewer>इस मॉडल का इस्तेमाल कर सके. - जियोमेट्रिक मेश को किसी 3D डिज़ाइनर, वेंडर या DRACO (ओएस) जैसे कंप्रेशन सॉफ़्टवेयर की मदद से, मैन्युअल तरीके से कंप्रेस करें.
- लो पॉली मॉडल को GLB फ़ॉर्मैट में एक्सपोर्ट करें, ताकि
इन 3D मॉडल का इस्तेमाल अक्सर मोबाइल फ़ोन पर किया जाता था. इसलिए, इन्हें 2 एमबी की बनावट के साथ ज़्यादा से ज़्यादा फ़ाइल साइज़ पर सेट करके ऑप्टिमाइज़ किया गया. इससे पुरानी जनरेशन के डिवाइस और कमज़ोर इंटरनेट कनेक्शन को सपोर्ट किया जा सकता है.
<model-viewer>
DSM टीम, नए बनाए गए 3D मॉडल को अपने वेबपेजों में एम्बेड करने के लिए, Google के <model-viewer> ओपन सोर्स वेब कॉम्पोनेंट का इस्तेमाल करती है. पहले चरण में बनाए गए मॉडल
<model-viewer> के साथ काम करें, इसके लिए एसेट, gITF या GLB फ़ॉर्मैट (.glb) में होनी चाहिए. दोनों फ़ॉर्मैट छोटे और कंप्रेस किए जा सकते हैं. साथ ही, ये जीपीयू में तेज़ी से लोड होते हैं. <model-viewer> कॉम्पोनेंट, सभी खास
ब्राउज़र पर काम करता है.
इस चरण के दौरान, DSM टीम के सामने सबसे बड़ी चुनौती यह थी कि Google का हार्डवेयर रंग पटल सही तरीके से रेंडर नहीं हो पाया. टीम को आखिरकार पता चला कि खोए हुए रंगों के लिए ACES टोन मैपिंग (एक फ़िल्म इंडस्ट्री स्टैंडर्ड) ज़िम्मेदार थी. इसे ठीक करने के लिए, उन्होंने Kronos PBR न्यूट्रल टोन मैपर बनाया. यह खास तौर पर, इन कमियों को दूर करने और स्क्रीन पर कलर को सही तरीके से पेश करने के लिए, लीनियर टोन मैपिंग से जुड़े ब्लो-आउट हाइलाइट और कलर शिफ़्ट से बचा.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer> के बारे में ज़्यादा जानने के लिए, modelviewer.dev पर जाएं. अपने 3D मॉडल टेस्ट करने और पूरी स्टार्टर वेबसाइट डाउनलोड करने के लिए, हमारे एडिटर को आज़माएं.
तीन.js के साथ हैवीवेट समाधान
किसी 3D मॉडल को दिखाने और उसके साथ इंटरैक्ट करने के लिए, <model-viewer> एक बेहतरीन और बेहतर तरीका है. हालांकि, कभी-कभी DSM टीम को <model-viewer> के मुकाबले ज़्यादा इमर्सिव और एक-दूसरे से जुड़े वेब अनुभव की ज़रूरत होती थी. इसका एक उदाहरण
Nest Mini + C लॉन्च करना था. <model-viewer>, संभावित ग्राहकों को वेब पर 3D में प्रॉडक्ट का अनुभव दे सकता है. हालांकि, Google के अन्य हार्डवेयर प्रॉडक्ट और Assistant जैसी एआई सुविधाओं के साथ इस्तेमाल करने पर, यह प्रॉडक्ट इसकी अहमियत नहीं दिखा सकता.
इस टास्क के लिए टीम ने लाइब्रेरी की मदद से, <model-viewer>,three.js का इस्तेमाल किया. Think.js एक ओपन सोर्स JavaScript गेम इंजन है. साथ ही, टीम को वर्चुअल होम एनवायरमेंट के लिए, फिर से इस्तेमाल की जा सकने वाली ऐसेट का फ़्रेमवर्क बनाने की सुविधा मिली. इस फ़्रेमवर्क में Nest के इनडोर कैमरे, लाइटें, और स्पीकर शामिल थे. इससे टीम को रीयल-टाइम में फ़ीडबैक देने की बुनियाद मिली. इससे पता चलता है कि
डिवाइस एक-दूसरे से कैसे इंटरैक्ट करते हैं.
Dialogflow
आपस में जुड़े हुए अनुभव को बनाने का आखिरी हिस्सा है Google Assistant को जोड़ना. इसका मतलब यह था कि लोग इंटरनेट से जुड़े वर्चुअल अनुभव की मदद से, सही निर्देशों और रूटीन को आज़मा सकते थे. हालाँकि, उपयोगकर्ता के मौजूदा खाते से Google Assistant को शामिल करने से, निजता को लेकर कई तरह की समस्याएं पैदा हो सकती हैं. उपयोगकर्ताओं की निजता को सुरक्षित रखने के लिए, DSM ने Google Cloud Dialogflow सेवा के साथ काम किया. इसका मकसद, इस स्पेस में Google Assistant की तरह काम करना है. नीचे दिया गया हाई लेवल डायग्राम, दिखाता है कि वेब ऐप्लिकेशन ने Dialogflow के एपीआई का इस्तेमाल कैसे किया है. इसे Dialogflow बेसिक से ऑप्टिमाइज़ किया गया है. बातचीत के हर मोड़ के लिए, वेब ऐप्लिकेशन ने Dialogflow के इंटेंट क्लासिफ़िकेशन का इस्तेमाल किया. साथ ही, एपीआई ने पहले से तय किए गए, असली उपयोगकर्ता के वे एक्सप्रेशन दिखाए जो इंटेंट से मेल खाते थे.
डायलॉग फ़्लो के बारे में ज़्यादा जानने के लिए, Google Cloud के दस्तावेज़ पर जाएं.
आखिरी नतीजा: एम्बेड किया जा सकने वाला iframe
आखिरी नतीजा, एसेट की एक लाइब्रेरी है जिसे <model-viewer> वाले वेब पेज में जोड़ा जा सकता है या पूरे वर्चुअल एनवायरमेंट में इस्तेमाल किया जा सकता है. इससे ग्राहकों को अलग-अलग प्रॉडक्ट और आपस में जुड़े प्रॉडक्ट के बारे में ज़्यादा जानकारी मिलती है. इसका अनुभव भरोसेमंद, बढ़ाने लायक, और किफ़ायती है. यह पहला वर्चुअल वर्शन
मई 2021 में लॉन्च किया गया था. Google Store की वेबसाइट पर यह सुविधा बंद होने के बाद भी, इसे आज़माया जा सकता है.
नतीजे
Nest Mini +C के लॉन्च के बाद से, DSM ने पिछले दो सालों में Pixel पोर्टफ़ोलियो के लॉन्च होने वाले फ़्रेमवर्क को दोबारा इस्तेमाल किया और उसमें कई तरह के बदलाव किए. इससे कंपनी की सफलता में बढ़ोतरी हुई. इन 3D ऐसेट को बार-बार लागू करके और अनुभवों को आज़माकर, टीम अब तक इंटरैक्टिव प्रॉडक्ट के बारे में सीखने-सिखाने से जुड़े अनुभवों की संख्या को दोगुना कर चुकी है. साथ ही, इस वेब टेक्नोलॉजी से फ़ायदा पाने वाले प्रॉडक्ट की संख्या को तीन गुना बढ़ा सकती है.
आखिरी नतीजा यह है कि प्रॉडक्ट के बारे में सही जानकारी दी जाएगी. यह प्रॉडक्ट इस्तेमाल के उदाहरणों में ऐसे बदलाव करता है जो पिछली रणनीतियों की तुलना में ज़्यादा टिकाऊ, आपस में जुड़े, और इंटरैक्टिव हों. आने वाले समय में, DSM टीम के पास इमर्सिव अनुभव के लिए कॉम्पोनेंट का एक मज़बूत पोर्टफ़ोलियो है. इन्हें कारोबार के डाइनैमिक टारगेट के हिसाब से तेज़ी से अपनाया जा सकता है. इन सुधारों की वजह से DSM टीम को प्रॉडक्ट के बारे में जानकारी देने वाला अपना नया कॉन्टेंट चार गुना तेज़ी से लॉन्च कर पाई. साथ ही, इसकी पुरानी प्रोसेस के मुकाबले, आधी से भी कम कीमत चुकानी पड़ी.