WebGL ലിക്വിഡ് ഗ്ലാസുമായി സംഗമിക്കുന്നിടം

വെബിലെ ഭൂരിഭാഗം ലിക്വിഡ് ഗ്ലാസ് ഇഫക്റ്റുകളും DOM ക്ലോണിംഗ് ആണ് ഉപയോഗിക്കുന്നത്. അവ HTML എലമെന്റുകളെ കോപ്പി ചെയ്യുകയും, അവയെ വിരൂപമാക്കുകയും (distort), ബ്ലർ (blur) ചേർക്കുകയും, ഒരു ഗ്ലാസ് ലെയറിന് താഴെ അവയെ വെക്കുകയും ചെയ്യുന്നു.

ഈ രീതി WebGL-ൽ പരാജയപ്പെടുന്നു. ഒരു ലൈവ് ക്യാൻവാസിൽ (live canvas) നിന്നുള്ള പിക്സലുകൾ കോപ്പി ചെയ്യാൻ ഒരു DOM ക്ലോണിന് കഴിയില്ല. ഓരോ ഫ്രെയിമിലും മാറിക്കൊണ്ടിരിക്കുന്ന ഒരു ഫ്രെയിംബഫർ (framebuffer) ആണ് ക്യാൻവാസ്.

ഒരു ക്യാൻവാസിൽ ലിക്വിഡ് ഗ്ലാസ് പ്രവർത്തിപ്പിക്കാൻ നിങ്ങൾക്ക് രണ്ട് വഴികളുണ്ട്. ഓരോ ഫ്രെയിമിലും ക്യാൻവാസ് ക്യാപ്ചർ ചെയ്യാം, എന്നാൽ ഇത് കൂടുതൽ പ്രോസസ്സിംഗ് പവർ ആവശ്യമായ (expensive) രീതിയാണ്. അല്ലെങ്കിൽ, ഗ്ലാസ് ഇഫക്റ്റ് നേരിട്ട് WebGL പൈപ്പ്‌ലൈനിലേക്ക് മാറ്റാം.

രണ്ടാമത്തെ രീതി പരീക്ഷിക്കുന്നതിനായി ഞാൻ ഒരു പരീക്ഷണം നടത്തി. ഇഫക്റ്റ് കാണിക്കുന്നതിനായി ചലനമുള്ള ഒരു ബാക്ക്ഗ്രൗണ്ട് എനിക്ക് ആവശ്യമായിരുന്നു. Konmari-യുടെ ഇന്ററാക്ടീവ് വാട്ടർ റിപ്പിൾ ഡെമോയിൽ നിന്നാണ് ഞാൻ ഇതിന് പ്രചോദനം ഉൾക്കൊണ്ടത്.

യാഥാർത്ഥ്യബോധമുള്ള റിപ്പിൾ ഫിസിക്സും (ripple physics) ഒഴുകിനടക്കുന്ന പൂക്കളും ഉൾപ്പെടുത്തി ഞാൻ ഇതിന്റെ ഒരു പതിപ്പ് നിർമ്മിച്ചു.

ഇതിന്റെ ഫലമായി ഒരു ലിക്വിഡ് ഗ്ലാസ് പാനലോട് കൂടിയ ഒരു WebGL വാട്ടർ സീൻ ലഭിച്ചു. ഈ പാനൽ അതിന് താഴെയുള്ള ലൈവ് ക്യാൻവാസിലെ പ്രകാശത്തെ അപവർത്തനം (refract) ചെയ്യുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

  • വെള്ളത്തിന് ഒരു height-field ripple simulation ആണ് ഉപയോഗിക്കുന്നത്.
  • പോയിന്റർ ചലനം ഒരു ഗ്രിഡിൽ തരംഗങ്ങൾ സൃഷ്ടിക്കുന്നു.
  • ഒരു WebGL ഷേഡർ ആ തരംഗങ്ങളെ പ്രകാശമായും വിരൂപമായും (distortion) മാറ്റുന്നു.
  • 2D ക്യാൻവാസിലെ പൂക്കൾ അപവർത്തനം (refraction) വ്യക്തമായി കാണാൻ സഹായിക്കുന്നു.

ഗ്ലാസ് പാനൽ DOM ക്ലോൺ ചെയ്യുന്നില്ല. പകരം, അത് പിക്സലുകളെ സാമ്പിൾ ചെയ്യുന്നു.

റെൻഡർ ഫ്ലോ (render flow) ഈ ഘട്ടങ്ങളിലൂടെയാണ് കടന്നുപോകുന്നത്:

  • WebGL വെള്ളം റെൻഡർ ചെയ്യുന്നു.
  • 2D പൂക്കൾ റെൻഡർ ചെയ്യുന്നു.
  • ഇവ രണ്ടിനെയും ഒരൊറ്റ ഹിഡൻ സോഴ്സ് ക്യാൻവാസിലേക്ക് (hidden source canvas) സംയോജിപ്പിക്കുന്നു.
  • ആ സോഴ്സ് ക്യാൻവാസിനെ സാമ്പിൾ ചെയ്യാൻ ഗ്ലാസ് ഷേഡർ ഉപയോഗിക്കുന്നു.

ഷേഡർ ഒരു സോഫ്റ്റ് എഡ്ജ് നോർമൽ (soft edge normal) കണക്കാക്കുന്നു. സോഴ്സ് ടെക്സ്ചറിനെ വളയ്ക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. മെറ്റീരിയലിന് കട്ടി തോന്നുന്നതിനായി ഞാൻ അതിൽ ഒരു ടിന്റും (tint) ക്രോമാറ്റിക് സ്പ്ലിറ്റും (chromatic split) ചേർത്തു.

ലക്ഷ്യം കൃത്യമായ ഫിസിക്സ് കാണിക്കുക എന്നതല്ല. മറിച്ച്, ചലിക്കുന്ന ഒരു സീനിന് മുകളിൽ ഇരിക്കുന്ന യഥാർത്ഥ വസ്തുവെന്ന അനുഭവം പാനലിന് നൽകുക എന്നതാണ്.

സീൻ ഇതിനകം തന്നെ പിക്സലുകൾ ആയതുകൊണ്ടാണ് ഇത് പ്രവർത്തിക്കുന്നത്. വെബിന് മുഴുവനായി ഒരു പരിഹാരം കണ്ടെത്തുക എന്നത് പ്രയാസകരമാണ്. യഥാർത്ഥ വെബ്സൈറ്റുകൾ ടെക്സ്റ്റ്, വീഡിയോ, സ്ക്രോളിംഗ് എന്നിവ ഉപയോഗിക്കുന്നു.

ഞാൻ ഈ മേഖലയെ സൂക്ഷ്മമായി നിരീക്ഷിക്കുന്നുണ്ട്. ഭാവിയിലെ പരിഹാരങ്ങളിൽ പെർഫോമൻസ് (performance) ആയിരിക്കും ഏറ്റവും വലിയ വെല്ലുവിളി.

Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples

Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l