𝗛𝗶𝗴𝗵-𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗖𝗹𝗶𝗲𝗻𝘁-𝗦𝗶𝗱𝗲 𝗜𝗺𝗮𝗴𝗲 𝗣𝗿𝗼𝗰𝗲𝘀𝘀𝗶𝗻𝗴
ഒരു ബ്രൗസറിൽ ചിത്രങ്ങൾ പ്രോസസ്സ് ചെയ്യുക എന്നത് ഇപ്പോൾ ഒരു സാധാരണ ആവശ്യകതയാണ്. നിങ്ങൾ ഫോട്ടോ എഡിറ്ററുകളോ, അസറ്റ് ടൂൾകിറ്റുകളോ, അല്ലെങ്കിൽ ആക്സസിബിലിറ്റി ഫിൽട്ടറുകളോ നിർമ്മിച്ചേക്കാം. നിങ്ങളുടെ UI റെസ്പോൺസീവ് ആയി നിലനിർത്താൻ കുറഞ്ഞ ലേറ്റൻസി (low latency) ആവശ്യമാണ്.
കളർ ഇൻവേർഷൻ (color inversion) എന്നത് ലളിതമായ ഒരു ജോലിയാണ്. ഇതിനർത്ഥം RGB മൂല്യങ്ങളെ അവയുടെ നെഗറ്റീവ് മൂല്യങ്ങളാക്കി മാറ്റുക എന്നാണ്. 4K ചിത്രങ്ങളിൽ സാധാരണ രീതി ഉപയോഗിക്കുകയാണെങ്കിൽ, ഹാർഡ്വെയർ പരിമിതികൾ (hardware bottlenecks) നേരിടേണ്ടി വരും.
പ്രശ്നം: Naive Iteration
മിക്ക ഡെവലപ്പർമാരും getImageData() മെത്തേഡ് ആണ് ഉപയോഗിക്കുന്നത്. ഇത് ഒരു Uint8ClampedArray തിരികെ നൽകുന്നു. ഈ അറേ പിക്സലുകളെ Red, Green, Blue, കൂടാതെ Alpha (RGBA) ചാനലുകളായി സംഭരിക്കുന്നു.
ഒരു സാധാരണ ലൂപ്പ് ഇപ്രകാരമാണ്:
- ഓരോ ബൈറ്റിലൂടെയും ലൂപ്പ് ചെയ്യുക.
- ഓരോ കളർ മൂല്യവും 255-ൽ നിന്ന് കുറയ്ക്കുക.
- ആൽഫ (Alpha) ചാനൽ ഒഴിവാക്കുക.
ഇത് ചെറിയ ചിത്രങ്ങൾക്ക് അനുയോജ്യമാണ്. എന്നാൽ 4K അസറ്റുകളിൽ ഇത് പരാജയപ്പെടുന്നു. ഒരു 4K ചിത്രത്തിന് 8 മില്യണിലധികം പിക്സലുകൾ ഉണ്ട്. ഒരു സാധാരണ ലൂപ്പ് 33 മില്യണിലധികം തവണ എഴുതൽ (writes) നടത്തുന്നു. ഇത് മെയിൻ ത്രെഡിനെ (main thread) തടസ്സപ്പെടുത്തുന്നു. ഇത് ബ്രൗസറിന്റെ വേഗത കുറയ്ക്കാനും ഫ്രെയിമുകൾ നഷ്ടപ്പെടാനും കാരണമാകുന്നു.
പരിഹാരം: 32-Bit Buffer Manipulation
പിക്സലുകളെ നാല് പ്രത്യേക ചാനലുകളായി കാണുന്നത് ഒഴിവാക്കാം. പകരം, ഡാറ്റാ ബഫറിന് മുകളിൽ ഒരു Uint32Array ഉപയോഗിക്കാം.
ഒരു 32-ബിറ്റ് വ്യൂ ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് R, G, B, A എന്നിവയെ ഒരു സിംഗിൾ ഇന്റീജറായി ഗ്രൂപ്പ് ചെയ്യാം. ഇപ്പോൾ നിങ്ങളുടെ ലൂപ്പ് 33 മില്യണത്തിന് പകരം 8.2 മില്യൺ ഇറ്ററേഷനുകൾ മാത്രമേ നടത്തുന്നുള്ളൂ. നാല് ഓപ്പറേഷനുകൾക്ക് പകരം ഓരോ പിക്സലിലും ഒരു ഓപ്പറേഷൻ മാത്രം നിങ്ങൾ ചെയ്യുന്നു.
Bitwise XOR ഉപയോഗിച്ചുള്ള വേഗതയേറിയ കളർ ഇൻവേർഷൻ
ആൽഫയെ ബാധിക്കാതെ നിറങ്ങൾ ഇൻവേർട്ട് ചെയ്യാൻ, ബിറ്റ്വൈസ് XOR ഓപ്പറേറ്റർ (^) ഉപയോഗിക്കുക. മാസ്ക് ആയി 0x00FFFFFF ഉപയോഗിക്കുക.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:
- മാസ്ക് കളർ ബിറ്റുകളെ മാത്രം ലക്ഷ്യം വെക്കുന്നു.
- ആൽഫ ബിറ്റുകൾ മാറ്റമില്ലാതെ തുടരുന്നു.
- സിപിയു (CPU) ഇത് ഒറ്റ സൈക്കിളിൽ പ്രോസസ്സ് ചെയ്യുന്നു.
ഫലങ്ങൾ:
- 1080p അസറ്റുകൾ: 3.8 മടങ്ങ് വേഗതയിൽ.
- 2K ടെംപ്ലേറ്റുകൾ: 4.1 മടങ്ങ് വേഗതയിൽ.
- 4K വാൾപേപ്പറുകൾ: 4.4 മടങ്ങ് വേഗതയിൽ.
Pro Tip: Web Workers ഉപയോഗിക്കുക നിങ്ങൾ ധാരാളം ഹൈ-റെസല്യൂഷൻ ഫയലുകൾ പ്രോസസ്സ് ചെയ്യുന്നുണ്ടെങ്കിൽ, 32-ബിറ്റ് ഓപ്പറേഷനുകൾ പോലും UI-യുടെ വേഗത കുറച്ചേക്കാം. ലോജിക് ഒരു Web Worker-ലേക്ക് മാറ്റുക. ബഫർ കൈമാറാൻ Transferable Objects ഉപയോഗിക്കുക. ഇത് ഡാറ്റ കോപ്പി ചെയ്യുന്നത് ഒഴിവാക്കുകയും നിങ്ങളുടെ മെയിൻ ത്രെഡ് ഫ്രീ ആയി നിലനിർത്തുകയും ചെയ്യുന്നു.
ഭാരമേറിയ ലൂപ്പുകൾ ഉപയോഗിക്കുന്നത് നിർത്തുക. വേഗതയേറിയതും കാര്യക്ഷമവുമായ ഇമേജ് പൈപ്പ്ലൈനുകൾ നിർമ്മിക്കാൻ 32-bit words-ഉം bitwise flags-ഉം ഉപയോഗിക്കുക.