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

நீங்கள் இணையத்தில் ஒரு ஜோடி காலணிகளைப் பார்க்கிறீர்கள். கடை உங்களுக்கு அதன் முன்பக்கத் தோற்றத்தையும் பக்கவாட்டுத் தோற்றத்தையும் காட்டுகிறது. தோலின் அமைப்பைக் காண ஆவலுடன் நீங்கள் ஜூம் (zoom) செய்கிறீர்கள், ஆனால் படம் பிக்சல்களின் (pixels) தொகுப்பாக மாறிவிடுகிறது. அடுத்த புகைப்படத்திற்குச் செல்கிறீர்கள். அது வேறொரு பாதத்தில் இருக்கும் அதே காலணிதான். பத்து படங்களைப் பார்த்த பிறகும், அதன் அடிப்பகுதி (sole) கடினமானதா அல்லது நெகிழ்வானதா என்பதையோ, அல்லது அதன் நிறம் உண்மையான நேவி ப்ளூவா அல்லது மங்கிய கருப்பா என்பதையோ உங்களால் சொல்ல முடிவதில்லை. பணம் செலுத்தும் தருணத்தில், நீங்கள் தயங்குகிறீர்கள். பிறகு அந்தத் தாவலை (tab) மூடிவிடுகிறீர்கள்.

இது தினமும் பல மில்லியன் முறை நிகழ்கிறது. தட்டையான படங்கள், உண்மையான பொருளைக் கற்பனை செய்யும் மன உழைப்பை வாடிக்கையாளரிடம் எதிர்பார்க்கின்றன. அந்த உழைப்பு ஒருவிதத் தடைகளை (friction) உருவாக்குகிறது, அந்தத் தடைகள் வாங்குதலைத் தடுத்துவிடுகின்றன.

இப்போது வேறொரு சூழலை கற்பனை செய்து பாருங்கள். அதே காலணி அந்தப் பக்கத்திற்குள்ளேயே ஒரு 3D மாதிரியாகத் (model) தோன்றுகிறது. அதைச் சுழற்ற நீங்கள் கிளிக் செய்து இழுக்கலாம். நீங்கள் ஜூம் செய்யும்போது, அதன் வடிவம் (geometry) தெளிவாகவே இருக்கும், ஏனெனில் நீங்கள் ஒரு பிட்மேப் (bitmap) படத்தை இழுத்துப் பார்ப்பதில்லை, மாறாக ஒரு மெஷ்ஷைப் (mesh) பார்க்கிறீர்கள். நீங்கள் நிகழ்நேரத்தில் (real time) அதன் நிறத்தை மாற்றிக்கொள்ளலாம். காலணியின் குதிகால் பகுதியில் உள்ள தையல்களைக் கீழிருந்து ஆய்வு செய்யலாம்; எந்தப் புகைப்படக் கலைஞரும் எடுக்கத் தேவையில்லை என்று நினைக்கும் ஒரு கோணத்தில் இது சாத்தியம். அந்தப் பொருள் உங்கள் திரையில் ஒரு உண்மையான பொருளைப் போலவே காட்சியளிக்கிறது. நீங்கள் அதை ஏற்கனவே கையில் ஏந்தியிருப்பதைப் போன்ற உணர்வு இருப்பதால், அதைத் தள்ளுவண்டியில் (cart) சேர்க்கிறீர்கள்.

பொருளில் எந்த மாற்றமும் இல்லை. அதன் அனுபவம் மட்டுமே மாறியுள்ளது.

ஏன் பிரவுசர் (Browser)?

சமீப காலம் வரை, இத்தகையத் தொடர்புகளுக்குத் தனிப்பட்ட செயலி (app) அல்லது பிளகின் (plugin) தேவைப்பட்டது, ஆனால் பெரும்பாலான பயனர்கள் அவற்றை நிறுவ மறுத்துவிட்டனர். Three.js அதை மாற்றியது. இது பிரவுசரின் உள்ளமைக்கப்பட்ட WebGL ரெண்டரர் (renderer) மீது இயங்கும் ஒரு JavaScript லைப்ரரி (library) ஆகும். இது இணையப் பக்கத்தின் மற்ற பகுதிகளை இயக்கும் அதே குறியீட்டைப் பயன்படுத்தி 3D காட்சிகளை உருவாக்க டெவலப்பர்களுக்கு (developers) உதவுகிறது. பயனர் எந்தச் சிறப்பு மென்பொருளையும் பதிவிறக்கம் செய்யத் தேவையில்லை. தனித்த ஜன்னல் (window), எக்ஸிகியூட்டபிள் (executable) அல்லது அனுமதி கோரும் விண்டோ (permission dialog) எதுவும் இல்லை. கேன்வாஸ் (canvas) மற்ற HTML உறுப்புகளைப் போலவே இயங்குகிறது.

இது முக்கியமானது, ஏனெனில் எளிதில் அணுகக்கூடிய தன்மையே (accessibility) ஒரு தொழில்நுட்பத்தின் பயன்பாட்டைத் தீர்மானிக்கிறது. ஒரு வாடிக்கையாளர் பயணத்தின் போது தனது போனில், பழைய லேப்டாப்பில் அல்லது ஐடி (IT) கட்டுப்பாட்டில் உள்ள அலுவலக கணினியில் ஒரு 3D பொருளைப் பார்க்க முடிந்தால், அந்தத் தொழில்நுட்பம் உண்மையாகவே மக்களைச் சென்றடைகிறது. Three.js பிரவுசரை ஒரு உலகளாவிய காட்சிக் கருவியாக (universal viewport) மாற்றுகிறது.

3D எங்குத் தனது இடத்தைப் பெறுகிறது

முப்பரிமாணத் திரையீடுகளை (3D graphics) சேர்ப்பது இலவசமானது அல்ல. இதற்கு மேம்பாட்டு நேரம் (development time), செயல்திறன் பட்ஜெட் (performance budget) மற்றும் பெரும்பாலும் அந்தத் தரவுகளுக்கான (assets) உற்பத்தி பட்ஜெட் தேவைப்படும். அதன் பலன் உண்மையாக இருக்கும்போது மட்டுமே நீங்கள் அந்தச் செலவைச் செய்ய வேண்டும். இணைய 3D-க்கான நான்கு பொதுவான வாதங்கள் ஒவ்வொன்றும் வெறும் குறிப்புப் புள்ளிகளைத் தாண்டி அதிக முக்கியத்துவம் வாய்ந்தவை.

அதிகப்படியான ஈடுபாடு (Higher engagement) என்பது ஒரு சந்தைப்படுத்தல் அளவீடு (marketing metric) போலத் தோன்றலாம், ஆனால் அதற்கு ஒரு இயந்திரவியல் காரணம் உள்ளது. ஒரு பார்வையாளர் ஒரு காட்சியைச் சுழற்றுவது, ஜூம் செய்வது அல்லது அனிமேஷன்களைத் தூண்டுவது போன்ற செயல்களில் ஈடுபடும்போது, அவர்கள் தாங்களாகவே ஒரு உள்ளடக்கத்தை உருவாக்குகிறார்கள். அவர்கள் இனி ஒரு விளம்பரத்தை அமைதியாகக் கேட்டுக்கொண்டிருக்கவில்லை; அவர்கள் ஆராய்ந்து கொண்டிருக்கிறார்கள். அந்தச் செயல்பாடு அவர்களைப் பக்கத்தில் அதிக நேரம் வைத்திருக்கிறது, ஏனெனில் அந்த மாதிரியுடன் அவர்களுக்கு இன்னும் முடிக்கப்படாத வேலைகள் உள்ளன. அவர்கள் பின்புறத்தைப் பார்க்க விரும்புகிறார்கள், உட்புறத்தைப் பார்க்க விரும்புகிறார்கள். இந்தத் தொடர்பு, நிலையான கட்டங்கள் (static grids) செய்ய முடியாத ஒரு ஆர்வத்தைத் தூண்டும் சுழற்சியை (curiosity loops) உருவாக்குகிறது.

சிறந்த புரிதல் (Better understanding) என்பது மின்வணிகத்தில் (e-commerce) மிகவும் வெளிப்படையாகத் தெரிகிறது. இரு பரிமாணங்களில் (2D) பட்டியலிடப்பட்ட ஒரு சோபா, வாடிக்கையாளரை ஒரு விவரத் தாளில் (spec sheet) அளவுகளைப் படிக்கவும், நிழலைப் பார்த்து அதன் ஆழத்தைக் கற்பனை செய்யவும் கட்டாயப்படுத்துகிறது. ஒரு 3D மாதிரி, அந்தப் பொருளைச் சுற்றி வந்து அதன் கைப்பிடி எவ்வாறு குறைகிறது என்பதைப் பார்க்க அனுமதிக்கிறது. அதே Three.js காட்சியை அடிப்படையாகக் கொண்ட ஆக்மென்டட் ரியாலிட்டி (augmented reality) மூலம், அவர்கள் அதைத் தங்கள் அறையில் வைத்துப் பார்க்கலாம்; அளவிடும் நாடா (tape measure) இல்லாமலேயே ஜன்னலுக்குக் கீழே போதிய இடம் இருக்கிறதா என்பதைச் சரிபார்க்கலாம். வாடிக்கையாளர்கள் ஒவ்வொரு கோணத்திலும் பொருட்களைப் பார்க்கும்போது, அவர்கள் நம்பிக்கையுடன் முடிவெடுக்கிறார்கள்.

கதை சொல்லல் (Storytelling) என்பது பொருட்களைத் தாண்டியது. ஒரு உற்பத்தியாளர், ஒரு நேரடி மாதிரியை அனுப்பாமலேயே, ஒரு இயந்திரம் எவ்வாறு எரிப்புச் சுழற்சியைச் (combustion cycle) செய்கிறது என்பதைக் காட்ட முடியும். ஒரு கட்டிடக் கலைஞர், அடித்தளம் போடுவதற்கு முன்பே ஒரு வாடிக்கையாளரைத் தரைத்தள வரைபடத்தின் (floor plan) வழியாக அழைத்துச் செல்ல முடியும். வார்த்தைகளாலும் நிலையான படங்களாலும் விளக்க முடியாத உறவுகளை அசைவுகள் விளக்குகின்றன...