You look at a pair of shoes online. The store gives you a front view and a side view. You zoom in hoping to see the text

നിങ്ങൾ ഓൺലൈനിൽ ഒരു ജോടി ഷൂസ് കാണുന്നു. കടക്കാരൻ അതിന്റെ മുൻഭാഗവും വശവും കാണിക്കുന്നു. ലെതറിന്റെ ടെക്സ്ചർ കാണാൻ നിങ്ങൾ സൂം ചെയ്യുന്നുണ്ടെങ്കിലും, ചിത്രം പിക്സലുകളുടെ ഒരു കൂട്ടമായി മാറുന്നു. അടുത്ത ഫോട്ടോയിലേക്ക് നിങ്ങൾ മാറുന്നു. അത് മറ്റൊരു കാലിൽ ഇട്ട അതേ ഷൂ തന്നെയാണ്. പത്ത് ചിത്രങ്ങൾ കണ്ടിട്ടും, അതിന്റെ സോൾ കടുപ്പമുള്ളതാണോ അതോ വഴക്കമുള്ളതാണോ എന്നോ, നിറം യഥാർത്ഥ നേവി ബ്ലൂ ആണോ അതോ മങ്ങിയ കറുപ്പ് ആണോ എന്നോ നിങ്ങൾക്ക് തിരിച്ചറിയാൻ കഴിയുന്നില്ല. പണമടയ്ക്കാൻ തുടങ്ങുമ്പോൾ നിങ്ങൾ മടിക്കുന്നു. പിന്നീട് നിങ്ങൾ ആ ടാബ് അടച്ചുപൂട്ടി.

ഇത് ദിവസവും ദശലക്ഷക്കണക്കിന് തവണ സംഭവിക്കുന്നു. പരന്ന ചിത്രങ്ങൾ യഥാർത്ഥ വസ്തുവിനെ സങ്കൽപ്പിക്കാൻ ഉപഭോക്താവിനോട് മാനസികമായ അധ്വാനം ആവശ്യപ്പെടുന്നു. ആ അധ്വാനം ഒരു തടസ്സം സൃഷ്ടിക്കുന്നു, ആ തടസ്സം വാങ്ങൽ ഒഴിവാക്കാൻ കാരണമാകുന്നു.

ഇനി മറ്റൊരു ടാബ് സങ്കൽപ്പിക്കുക. അതേ ഷൂ പേജിനുള്ളിൽ തന്നെ ഒരു 3D മോഡലായി ലോഡ് ആകുന്നു. അത് കറക്കാൻ നിങ്ങൾ ക്ലിക്ക് ചെയ്ത് ഡ്രാഗ് ചെയ്യുന്നു. നിങ്ങൾ സൂം ചെയ്യുമ്പോൾ, നിങ്ങൾ കാണുന്നത് ഒരു mesh ആയതുകൊണ്ട് അതിന്റെ രൂപഘടന (geometry) വ്യക്തമായി തന്നെ കാണാം, അത് വലിച്ചുനീട്ടിയ ഒരു bitmap അല്ല. നിങ്ങൾക്ക് തത്സമയം നിറങ്ങൾ മാറ്റാൻ സാധിക്കുന്നു. ഒരു പ്രൊഡക്റ്റ് ഫോട്ടോഗ്രാഫർ പോലും ശ്രദ്ധിക്കാത്ത ഒരു കോണിലൂടെ, ഹീൽ കൗണ്ടറിലെ തുന്നലുകൾ നിങ്ങൾ പരിശോധിക്കുന്നു. ആ വസ്തു സ്ഥലപരിധിക്കുള്ളിൽ ഇരിക്കുന്നതുപോലെ തന്നെ നിങ്ങളുടെ സ്ക്രീനിലും നിലനിൽക്കുന്നു. നിങ്ങൾ അത് കയ്യിൽ പിടിച്ചിട്ടുണ്ടെന്ന് തോന്നിപ്പിക്കുന്നതുകൊണ്ട് തന്നെ നിങ്ങൾ അത് കാർട്ടിലേക്ക് ചേർക്കുന്നു.

ഉൽപ്പന്നത്തിൽ മാറ്റമൊന്നും സംഭവിച്ചില്ല. അതിന്റെ അനുഭവത്തിൽ മാത്രമാണ് മാറ്റം വന്നത്.

എന്തുകൊണ്ട് ബ്രൗസർ?

അടുത്ത കാലം വരെ, ഇത്തരത്തിലുള്ള ഇടപെടലുകൾക്കായി പ്രത്യേക ആപ്പുകളോ പ്ലഗിനുകളോ ആവശ്യമായിരുന്നു, എന്നാൽ ഭൂരിഭാഗം ഉപഭോക്താക്കളും അവ ഇൻസ്റ്റാൾ ചെയ്യാൻ വിസമ്മതിച്ചിരുന്നു. Three.js അത് മാറ്റിമറിച്ചു. ബ്രൗസറിലെ ഇൻബിൽറ്റ് WebGL റെൻഡററിന് മുകളിൽ പ്രവർത്തിക്കുന്ന ഒരു JavaScript ലൈബ്രറിയാണിത്. വെബ് പേജിന്റെ മറ്റ് ഭാഗങ്ങൾ പ്രവർത്തിപ്പിക്കാൻ ഉപയോഗിക്കുന്ന അതേ കോഡ് ഉപയോഗിച്ച് 3D സീനുകൾ നിർമ്മിക്കാൻ ഇത് ഡെവലപ്പർമാരെ അനുവദിക്കുന്നു. ഉപഭോക്താവ് പ്രത്യേക സോഫ്റ്റ്‌വെയറുകൾ ഡൗൺലോഡ് ചെയ്യേണ്ടതില്ല. പ്രത്യേക വിൻഡോകളോ, എക്സിക്യൂട്ടബിളുകളോ (executable), അനുമതി ആവശ്യപ്പെടുന്ന ഡയലോഗുകളോ ഇതിലില്ല. ഒരു സാധാരണ HTML എലമെന്റ് പോലെ തന്നെ canvas റെൻഡർ ചെയ്യപ്പെടുന്നു.

ഇത് പ്രധാനമാണ്, കാരണം എളുപ്പത്തിൽ ലഭ്യമാകുക എന്നത് തന്നെ അതിന്റെ ഉപയോഗം നിശ്ചയിക്കുന്നു. യാത്രയ്ക്കിടയിൽ ഫോണിലൂടെയോ, പഴയ ഒരു ലാപ്ടോപ്പിലൂടെയോ, അല്ലെങ്കിൽ ഐടി വിഭാഗം നിയന്ത്രിക്കുന്ന ഒരു കോർപ്പറേറ്റ് ഡെസ്ക്ടോപ്പിലൂടെയോ ഒരു ഉപഭോക്താവിന് 3D ഉൽപ്പന്നം കാണാൻ കഴിയുമെങ്കിൽ, ആ സാങ്കേതികവിദ്യ യഥാർത്ഥത്തിൽ ആളുകളിലേക്ക് എത്തുന്നു. Three.js ബ്രൗസറിനെ ഒരു സാർവത്രിക വ്യൂപോർട്ടാക്കി (universal viewport) മാറ്റുന്നു.

3D എവിടെയാണ് പ്രസക്തമാകുന്നത്

ത്രീ-ഡൈമൻഷണൽ ഗ്രാഫിക്സ് ചേർക്കുന്നത് സൗജന്യമല്ല. ഇതിന് ഡെവലപ്‌മെന്റ് സമയവും, പെർഫോമൻസ് ബജറ്റും, പലപ്പോഴും അസറ്റുകൾക്കായി (assets) പ്രൊഡക്ഷൻ ബജറ്റും ആവശ്യമാണ്. ലാഭം ഉറപ്പാണെങ്കിൽ മാത്രം നിങ്ങൾ ആ ചിലവ് വഹിക്കണം. വെബ് 3D-ക്ക് അനുകൂലമായ നാല് പ്രധാന വാദങ്ങൾ വെറും പോയിന്റുകൾ എന്നതിലുപരി വലിയ പ്രാധാന്യമുള്ളവയാണ്.

കൂടുതൽ എൻഗേജ്‌മെന്റ് (Higher engagement) എന്നത് ഒരു മാർക്കറ്റിംഗ് അളവുകോലായി തോന്നാമെങ്കിലും, അതിന് പിന്നിൽ ഒരു സാങ്കേതികമായ കാരണമുണ്ട്. ഒരു സന്ദർശകന് ഒരു സീനുമായി ഇടപഴകാൻ (കറക്കുക, സൂം ചെയ്യുക, ആനിമേഷനുകൾ പ്രവർത്തിപ്പിക്കുക) കഴിയുമ്പോൾ, അവർ സ്വന്തമായി ഉള്ളടക്കം സൃഷ്ടിക്കുന്നു. അവർ വെറുതെ ഒരു പരസ്യം കേട്ടിരിക്കുകയല്ല, മറിച്ച് കാര്യങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയാണ്. ആ സജീവമായ അവസ്ഥ അവരെ കൂടുതൽ സമയം പേജിൽ നിലനിർത്തുന്നു, കാരണം അവർക്ക് ആ മോഡലുമായി കൂടുതൽ കാര്യങ്ങൾ അറിയാനുണ്ട്. അവർ അതിന്റെ പിൻഭാഗം കാണാൻ ആഗ്രഹിക്കുന്നു, ഉള്ള ഭാഗം കാണാൻ ആഗ്രഹിക്കുന്നു. സ്റ്റാറ്റിക് ഗ്രിഡുകൾക്ക് (static grids) പകർത്താൻ കഴിയാത്ത തരത്തിലുള്ള ജിജ്ഞാസ അവരിൽ ഇത് ഉണ്ടാക്കുന്നു.

മികച്ച ധാരണ (Better understanding) എന്നത് ഇ-കൊമേഴ്‌സിൽ ഏറ്റവും വ്യക്തമാണ്. രണ്ട് ഡൈമൻഷനുകളിൽ മാത്രം കാണുന്ന ഒരു സോഫ, അതിന്റെ അളവുകൾ ഒരു സ്പെക് ഷീറ്റിൽ നിന്ന് വായിക്കാനും നിഴലുകളിൽ നിന്ന് ആഴം സങ്കൽപ്പിക്കാനും ഉപഭോക്താവിനെ നിർബന്ധിക്കുന്നു. ഒരു 3D മോഡൽ ഉപയോഗിച്ച് അവർക്ക് ആ വസ്തുവിന് ചുറ്റും കറങ്ങാനും അതിന്റെ കൈപ്പിടി (armrest) എങ്ങനെയാണ് താഴേക്ക് ഇടുങ്ങിയതാകുന്നത് എന്ന് കാണാനും സാധിക്കും. ഇതേ Three.js സീൻ ഉപയോഗിച്ച് നിർമ്മിച്ച ഓഗ്മെന്റഡ് റിയാലിറ്റി (augmented reality) വഴി അവർക്ക് അത് അവരുടെ മുറിയിൽ വെച്ച് നോക്കാം; ഒരു ടേപ്പ് ഉപയോഗിക്കാതെ തന്നെ ജനലിന് താഴെയുള്ള സ്ഥലം ആവശ്യമാണോ എന്ന് പരിശോധിക്കാൻ ഇത് സഹായിക്കുന്നു. ഉപഭോക്താക്കൾ ഉൽപ്പന്നങ്ങൾ എല്ലാ കോണുകളിൽ നിന്നും കാണുമ്പോൾ, അവർ ആത്മവിശ്വാസത്തോടെ തീരുമാനങ്ങൾ എടുക്കുന്നു.

സ്റ്റോറിടെല്ലിംഗ് (Storytelling) ഉൽപ്പന്നങ്ങൾക്കും അപ്പുറമാണ്. ഒരു നിർമ്മാതാവിന് ഒരു യഥാർത്ഥ എഞ്ചിൻ അയക്കാതെ തന്നെ അതിന്റെ കംബസ്റ്റ്യൻ പ്രക്രിയ എങ്ങനെയാണെന്ന് കാണിച്ചുതരാം. ഒരു ആർക്കിടെക്റ്റിന് ഫൗണ്ടേഷൻ ഇടുന്നതിന് മുമ്പ് തന്നെ ഒരു ഫ്ലോർ പ്ലാനിലൂടെ ക്ലയന്റിനെ നയിക്കാൻ സാധിക്കും. വാക്കുകൾക്കും നിശ്ചല ചിത്രങ്ങൾക്കും വിവരിക്കാൻ പ്രയാസമുള്ള ബന്ധങ്ങളെ ചലനം എളുപ്പത്തിൽ വിശദീകരിക്കുന്നു...