WebGL మరియు Liquid Glass కలిసే చోట

వెబ్‌లో చాలా liquid glass ఎఫెక్ట్‌లు DOM క్లోనింగ్‌ను ఉపయోగిస్తాయి. అవి HTML ఎలిమెంట్స్‌ను కాపీ చేసి, వాటిని వక్రీకరించి (distort), బ్లర్ (blur) జోడించి, ఒక గ్లాస్ లేయర్ కింద ఉంచుతాయి.

ఈ పద్ధతి WebGLతో విఫలమవుతుంది. ఒక DOM క్లోన్ లైవ్ కాన్వాస్ (live canvas) నుండి పిక్సెల్‌లను కాపీ చేయలేదు. కాన్వాస్ అనేది ప్రతి ఫ్రేమ్‌లో మారే ఒక framebuffer.

కాన్వాస్‌పై liquid glass పనిచేయాలంటే, మీకు రెండు ఎంపికలు ఉన్నాయి. మీరు ప్రతి ఫ్రేమ్‌లో కాన్వాస్‌ను క్యాప్చర్ చేయవచ్చు, ఇది ఖరీదైనది (expensive). లేదా, మీరు గ్లాస్ ఎఫెక్ట్‌ను నేరుగా WebGL పైప్‌లైన్‌లోకి మార్చవచ్చు.

రెండవ విధానాన్ని పరీక్షించడానికి నేను ఒక ప్రయోగాన్ని రూపొందించాను. ఎఫెక్ట్‌ను చూపించడానికి నాకు కదలికలు ఉన్న బ్యాక్‌గ్రౌండ్ కావాలి. Konmari రూపొందించిన ఇంటరాక్టివ్ వాటర్ రిపుల్ (water ripple) డెమో నుండి నేను ప్రేరణ పొందాను.

నేను వాస్తవిక రిపుల్ ఫిజిక్స్ (ripple physics) మరియు తేలియాడే పూలతో నా స్వంత వెర్షన్‌ను రూపొందించాను.

దీని ఫలితం ఏమిటంటే, ఒక liquid glass ప్యానెల్‌తో కూడిన WebGL వాటర్ సీన్. ఈ ప్యానెల్ దాని కింద ఉన్న లైవ్ కాన్వాస్‌ను వక్రీకరిస్తుంది (refracts).

ఇది ఎలా పనిచేస్తుంది:

  • నీరు ఒక height-field ripple సిమ్యులేషన్‌ను ఉపయోగిస్తుంది.
  • పాయింటర్ కదలిక గ్రిడ్‌పై అలలను సృష్టిస్తుంది.
  • ఒక WebGL shader ఆ అలలను కాంతి మరియు వక్రీకరణగా (distortion) మారుస్తుంది.
  • 2D కాన్వాస్‌పై ఉన్న పూలు వక్రీకరణను (refraction) స్పష్టంగా చూపడానికి సహాయపడతాయి.

గ్లాస్ ప్యానెల్ DOMను క్లోన్ చేయదు. దానికి బదులుగా, అది పిక్సెల్‌లను శాంపిల్ (sample) చేస్తుంది.

రెండరింగ్ ఫ్లో ఈ క్రింది దశలను అనుసరిస్తుంది:

  • 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