तुम्ही ऑनलाइन बुटांची एक जोडी पाहत आहात. दुकान तुम्हाला समोरून आणि बाजूने दिसणारे दृश्य देते. लेदरचा पोत (texture) पाहण्याच्या आशेने तुम्ही झूम करता, पण चित्र पिक्सेल्सच्या मोझॅकमध्ये (mosaic of pixels) रूपांतरित होते. तुम्ही पुढचा फोटो पाहता. तोच बूट दुसऱ्या पायावर आहे. दहा फोटो पाहिल्यानंतरही, तुम्हाला सोल (sole) कडक आहे की लवचिक, किंवा रंग गडद निळा (navy) आहे की फिकट काळा, हे समजत नाही. पेमेंट करताना तुम्ही द्विधा मनस्थितीत असता. मग तुम्ही टॅब बंद करता.

हे दररोज लाखो वेळा घडते. सपाट चित्रे ग्राहकाला प्रत्यक्ष वस्तूची कल्पना करण्याचे मानसिक काम करण्यास भाग पाडतात. त्या कामामुळे अडथळा निर्माण होतो आणि तो अडथळा खरेदी थांबवतो.

आता एक वेगळा टॅब पहा. तोच बूट थेट पेजमध्येच 3D मॉडेल म्हणून लोड होतो. तुम्ही ते फिरवण्यासाठी क्लिक करून ड्रॅग करता. तुम्ही झूम करता आणि भूमिती (geometry) स्पष्ट राहते कारण तुम्ही स्ट्रेच्ड बिटमॅप (stretched bitmap) नाही तर मेश (mesh) पाहत असता. तुम्ही रिअल टाइममध्ये रंग बदलू शकता. तुम्ही टाचेच्या भागावरील (heel counter) शिलाई खालून तपासू शकता, जो कोन कोणताही प्रॉडक्ट फोटोग्राफर काढत नाही. वस्तू तुमच्या स्क्रीनवर तशीच दिसते जशी ती प्रत्यक्षात अवकाशात असते. तुम्ही ती कार्टमध्ये जोडता कारण तुम्हाला असे वाटते की तुम्ही ती आधीच हातात धरली आहे.

उत्पादनात काहीही बदलले नाही. फक्त अनुभवात बदल झाला.

ब्राउझरच का?

अलीकडेपर्यंत, अशा प्रकारच्या इंटरॅक्शनसाठी समर्पित ॲप किंवा प्लगइनची आवश्यकता होती जे बहुतेक वापरकर्ते इन्स्टॉल करण्यास नकार देत असत. Three.js ने ते बदलले. ही एक JavaScript लायब्ररी आहे जी ब्राउझरच्या अंगभूत WebGL रेंडररवर आधारित आहे आणि डेव्हलपर्सना वेब पेजच्या उर्वरित भागाला चालवणाऱ्या त्याच कोडचा वापर करून 3D सीन्स तयार करण्यास अनुमती देते. वापरकर्त्याला कोणतेही विशेष सॉफ्टवेअर डाउनलोड करावे लागत नाही. तिथे कोणतेही वेगळे विंडो, एक्झिक्युटेबल (executable) किंवा परवानगीचे संवाद (permission dialog) नसतात. कॅनव्हास इतर कोणत्याही HTML एलिमेंटप्रमाणेच रेंडर होतो.

हे महत्त्वाचे आहे कारण सुलभता (accessibility) अवलंबनावर (adoption) ठरवते. जर एखादा ग्राहक प्रवासादरम्यान त्यांच्या फोनवर, जुन्या लॅपटॉपवर किंवा IT द्वारे लॉक केलेल्या कॉर्पोरेट डेस्कटॉपवर 3D उत्पादन पाहू शकत असेल, तर तंत्रज्ञान खरोखर लोकांपर्यंत पोहोचते. Three.js ब्राउझरला एक युनिव्हर्सल व्ह्यूपोर्ट (universal viewport) मध्ये रूपांतरित करते.

3D कुठे आपले स्थान मिळवते

त्रिमितीय ग्राफिक्स जोडणे मोफत नाही. त्यासाठी डेव्हलपमेंट वेळ, परफॉर्मन्स बजेट आणि अनेकदा मालमत्तेसाठी (assets) प्रोडक्शन बजेट लागते. जेव्हा परतावा (return) वास्तविक असेल तेव्हाच तुम्ही तो खर्च केला पाहिजे. वेब 3D साठीचे चार सामान्य युक्तिवाद प्रत्येकाचे महत्त्व केवळ एका बुलेट पॉईंटपेक्षा जास्त आहे.

उच्च सहभाग हे मार्केटिंग मेट्रिक वाटते, परंतु त्याचे एक यांत्रिक कारण आहे. जेव्हा एखादा व्हिजिटर एखाद्या सीनसोबत संवाद साधू शकतो—फिरवणे, झूम करणे, ॲनिमेशन ट्रिगर करणे—तेव्हा ते स्वतःची सामग्री तयार करतात. ते आता केवळ निष्क्रियपणे माहिती घेत नाहीत. ते शोध घेत आहेत. ही सक्रिय अवस्था त्यांना पेजवर जास्त वेळ ठेवते कारण त्यांचे मॉडेलसोबत काम अपूर्ण असते. त्यांना मागचा भाग पाहायचा असतो. त्यांना आतील भाग पाहायचा असतो. ही संवाद प्रक्रिया कुतूहल निर्माण करते जे स्थिर ग्रिड्स (static grids) करू शकत नाहीत.

उत्तम समज हे ई-कॉमर्समध्ये सर्वात स्पष्ट आहे. दोन मितींमध्ये (two dimensions) सूचीबद्ध केलेला सोफा खरेदीदाराला स्पेसिफिकेशन शीटमधून परिमाणे (dimensions) वाचण्यास आणि सावलीतून खोलीची (depth) कल्पना करण्यास भाग पाडतो. 3D मॉडेल त्यांना त्या वस्तूभोवती फिरून आर्मरेस्ट कसा आहे हे पाहू देते. ते त्याच Three.js सीनवर आधारित ऑगमेंटेड रिॲलिटी (augmented reality) वापरून सोफा त्यांच्या खोलीत ठेवू शकतात, टेप मोजपट्टी न काढता खिडकीखाली जागा आहे की नाही हे तपासू शकतात. जेव्हा ग्राहक प्रत्येक कोनातून उत्पादने पाहतात, तेव्हा ते आत्मविश्वासाने निर्णय घेतात.

स्टोरीटेलिंग उत्पादनांच्या पलीकडे जाते. एक निर्माता प्रत्यक्ष डेमो न पाठवता इंजिन कशा प्रकारे ज्वलन (combustion) प्रक्रिया करते हे दाखवू शकतो. एक आर्किटेक्ट पाया (foundation) टाकण्यापूर्वी क्लायंटला फ्लोअर प्लॅन दाखवू शकतो. हालचाल अशा संबंधांचे स्पष्टीकरण देते जे शब्द आणि स्थिर फ्रेम्सना...