जेथे WebGL आणि लिक्विड ग्लास एकत्र येतात

वेबवरील बहुतेक लिक्विड ग्लास इफेक्ट्स DOM क्लोनिंगचा वापर करतात. ते HTML एलिमेंट्सची कॉपी करतात, त्यांना विरूपित (distort) करतात, ब्लर (blur) जोडतात आणि त्यांना ग्लास लेयरच्या खाली ठेवतात.

ही पद्धत WebGL सोबत अपयशी ठरते. DOM क्लोन एका लाईव्ह कॅनव्हासमधून (live canvas) पिक्सेल्स कॉपी करू शकत नाही. कॅनव्हास हा एक फ्रेमबफर (framebuffer) असतो जो प्रत्येक फ्रेममध्ये बदलतो.

कॅनव्हासवर लिक्विड ग्लास कार्यक्षम करण्यासाठी तुमच्याकडे दोन पर्याय आहेत. तुम्ही प्रत्येक फ्रेममध्ये कॅनव्हास कॅप्चर करू शकता, जे खर्चिक (expensive) आहे. किंवा, तुम्ही ग्लास इफेक्ट थेट WebGL पाइपलाइनमध्ये हलवू शकता.

मी दुसरा दृष्टिकोन तपासण्यासाठी एक प्रयोग तयार केला. इफेक्ट दाखवण्यासाठी मला हालचाल असलेला बॅकग्राउंड हवा होता. मी Konmari च्या इंटरअॅक्टिव्ह वॉटर रिपल (water ripple) डेमोमधून प्रेरणा घेतली.

मी वास्तववादी रिपल फिजिक्स (ripple physics) आणि तरंगत्या फुलांसह स्वतःचे व्हर्जन तयार केले.

याचे परिणामी एक WebGL वॉटर सीन तयार झाला आहे ज्यामध्ये लिक्विड ग्लास पॅनेल आहे. हे पॅनेल त्याच्या खाली असलेल्या लाईव्ह कॅनव्हासचे अपवर्तन (refract) करते.

हे कसे कार्य करते:

  • पाणी वापरण्यासाठी 'height-field ripple simulation' चा वापर केला जातो.
  • पॉइंटरच्या हालचालीमुळे ग्रिडवर लाटा तयार होतात.
  • एक WebGL शेडर (shader) त्या लाटांचे रूपांतर प्रकाश आणि विरूपणात (distortion) करते.
  • 2D कॅनव्हासवरील फुले अपवर्तन (refraction) स्पष्टपणे दाखवण्यास मदत करतात.

ग्लास पॅनेल DOM क्लोन करत नाही. त्याऐवजी, ते पिक्सेल्स सॅम्पल (sample) करते.

रेंडर फ्लो खालील पायऱ्यांचे अनुसरण करतो:

  • WebGL पाणी रेंडर करा.
  • 2D फुले रेंडर करा.
  • दोन्ही एकत्र करून एक लपवलेला सोर्स कॅनव्हास (source canvas) तयार करा.
  • त्या सोर्स कॅनव्हासला सॅम्पल करण्यासाठी ग्लास शेडरचा वापर करा.

शेडर एका सॉफ्ट एज नॉर्मलचा (soft edge normal) अंदाज घेते. सोर्स टेक्सचर वाकवण्यासाठी याचा वापर केला जातो. मटेरियल जाड वाटण्यासाठी मी त्यात टिंट (tint) आणि क्रोमॅटिक स्प्लिट (chromatic split) जोडले आहे.

उद्दिष्ट परिपूर्ण फिजिक्स मिळवणे हे नाही. तर, पॅनेल एखाद्या हलत्या दृश्यामध्ये (moving scene) असलेल्या वास्तविक मटेरियलसारखे वाटणे हे उद्दिष्ट आहे.

हे काम करते कारण हे दृश्य आधीच पिक्सेल्समध्ये आहे. संपूर्ण वेबसाठी पूर्ण उपाय शोधणे कठीण आहे. वास्तविक वेबसाइट्समध्ये मजकूर, व्हिडिओ आणि स्क्रोलिंगचा वापर केला जातो.

मी या क्षेत्रावर बारकाईने लक्ष ठेवून आहे. भविष्यातील उपायांसाठी परफॉर्मन्स (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