जहाँ WebGL और लिक्विड ग्लास का मिलन होता है

वेब पर अधिकांश लिक्विड ग्लास इफेक्ट्स DOM क्लोनिंग का उपयोग करते हैं। वे HTML एलिमेंट्स की कॉपी बनाते हैं, उन्हें विकृत (distort) करते हैं, ब्लर जोड़ते हैं, और उन्हें ग्लास लेयर के नीचे रखते हैं।

यह तरीका WebGL के साथ काम नहीं करता है। एक DOM क्लोन लाइव कैनवास से पिक्सेल कॉपी नहीं कर सकता। एक कैनवास एक फ्रेमबफर (framebuffer) है जो हर फ्रेम के साथ बदलता रहता है।

कैनवास पर लिक्विड ग्लास को काम करने लायक बनाने के लिए आपके पास दो विकल्प हैं। आप हर फ्रेम में कैनवास को कैप्चर कर सकते हैं, जो काफी महंगा (expensive) है। या, आप ग्लास इफेक्ट को सीधे WebGL पाइपलाइन में ही ले जा सकते हैं।

मैंने दूसरे दृष्टिकोण का परीक्षण करने के लिए एक प्रयोग बनाया। प्रभाव दिखाने के लिए मुझे मोशन (गति) वाले बैकग्राउंड की आवश्यकता थी। मैंने Konmari के एक इंटरैक्टिव वॉटर रिपल डेमो से प्रेरणा ली।

मैंने यथार्थवादी रिपल फिजिक्स और तैरते हुए फूलों के साथ अपना खुद का वर्ज़न बनाया।

इसका परिणाम एक WebGL वॉटर सीन है जिसमें एक लिक्विड ग्लास पैनल है। यह पैनल अपने नीचे मौजूद लाइव कैनवास को रिफ्रैक्ट (refract) करता है।

यह कैसे काम करता है:

  • पानी एक height-field रिपल सिमुलेशन का उपयोग करता है।
  • पॉइंटर की मूवमेंट ग्रिड पर लहरें पैदा करती है।
  • एक WebGL शेडर उन लहरों को लाइट और डिस्टॉर्शन में बदल देता है।
  • 2D कैनवास पर फूल रिफ्रैक्शन को स्पष्ट रूप से दिखाने में मदद करते हैं।

ग्लास पैनल DOM को क्लोन नहीं करता है। इसके बजाय, यह पिक्सेल को सैंपल करता है।

रेंडर फ्लो इन चरणों का पालन करता है:

  • WebGL वॉटर को रेंडर करें।
  • 2D फूलों को रेंडर करें।
  • दोनों को एक छिपे हुए सोर्स कैनवास (hidden source canvas) में मिला दें।
  • उस सोर्स कैनवास को सैंपल करने के लिए ग्लास शेडर का उपयोग करें।

शेडर एक सॉफ्ट एज नॉर्मल (soft edge normal) का अनुमान लगाता है। यह सोर्स टेक्सचर को मोड़ने के लिए इसका उपयोग करता है। मैंने मटेरियल को घना महसूस कराने के लिए इसमें टिंट और क्रोमैटिक स्प्लिट (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