WebGL ಮತ್ತು ಲಿಕ್ವಿಡ್ ಗ್ಲಾಸ್ ಸಂಧಿಸುವ ಸ್ಥಳ

ವೆಬ್‌ನಲ್ಲಿನ ಹೆಚ್ಚಿನ ಲಿಕ್ವಿಡ್ ಗ್ಲಾಸ್ ಪರಿಣಾಮಗಳು DOM cloning ಅನ್ನು ಬಳಸುತ್ತವೆ. ಅವು HTML ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಕಾಪಿ ಮಾಡಿ, ಅವುಗಳನ್ನು ವಿರೂಪಗೊಳಿಸಿ, ಬ್ಲರ್ ಸೇರಿಸಿ, ಒಂದು ಗ್ಲಾಸ್ ಪದರದ ಅಡಿಯಲ್ಲಿ ಇರಿಸುತ್ತವೆ.

ಈ ವಿಧಾನವು WebGL ಜೊತೆಗೆ ವಿಫಲವಾಗುತ್ತದೆ. ಒಂದು DOM ಕ್ಲೋನ್ ಲೈವ್ ಕ್ಯಾನ್ವಾಸ್‌ನಿಂದ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಕಾಪಿ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಕ್ಯಾನ್ವಾಸ್ ಎಂಬುದು ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಬದಲಾಗುವ ಒಂದು ಫ್ರೇಮ್‌ಬಫರ್ ಆಗಿದೆ.

ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಲಿಕ್ವಿಡ್ ಗ್ಲಾಸ್ ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡಲು, ನಿಮ್ಮ ಮುಂದೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ. ನೀವು ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಕ್ಯಾಪ್ಚರ್ ಮಾಡಬಹುದು, ಇದು ಹೆಚ್ಚು ವೆಚ್ಚದಾಯಕ. ಅಥವಾ, ನೀವು ಗ್ಲಾಸ್ ಎಫೆಕ್ಟ್ ಅನ್ನು WebGL ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲೇ ಸೇರಿಸಬಹುದು.

ಎರಡನೇ ವಿಧಾನವನ್ನು ಪರೀಕ್ಷಿಸಲು ನಾನು ಒಂದು ಪ್ರಯೋಗವನ್ನು ಮಾಡಿದೆ. ಪರಿಣಾಮವನ್ನು ತೋರಿಸಲು ನನಗೆ ಚಲನೆಯಿರುವ ಹಿನ್ನೆಲೆ ಬೇಕಾಗಿತ್ತು. Konmari ಅವರ ಇಂಟರಾಕ್ಟಿವ್ ವಾಟರ್ ರಿಪಲ್ ಡೆಮೊದಿಂದ ನಾನು ಸ್ಫೂರ್ತಿ ಪಡೆದೆ.

ನಾನು ವಾಸ್ತವಿಕ ರಿಪಲ್ ಫಿಸಿಕ್ಸ್ ಮತ್ತು ತೇಲುವ ಹೂವುಗಳೊಂದಿಗೆ ನನ್ನದೇ ಆದ ಆವೃತ್ತಿಯನ್ನು ನಿರ್ಮಿಸಿದೆ.

ಇದರ ಫಲಿತಾಂಶವೆಂದರೆ ಲಿಕ್ವಿಡ್ ಗ್ಲಾಸ್ ಪ್ಯಾನಲ್ ಹೊಂದಿರುವ WebGL ವಾಟರ್ ಸೀನ್. ಈ ಪ್ಯಾನಲ್ ತನ್ನ ಕೆಳಗಿರುವ ಲೈವ್ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ವಕ್ರೀಕರಿಸುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:

  • ನೀರು height-field ripple simulation ಅನ್ನು ಬಳಸುತ್ತದೆ.
  • ಪಾಯಿಂಟರ್ ಚಲನೆಯು ಗ್ರಿಡ್ ಮೇಲೆ ಅಲೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
  • WebGL shader ಆ ಅಲೆಗಳನ್ನು ಬೆಳಕು ಮತ್ತು ವಿರೂಪವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ.
  • 2D ಕ್ಯಾನ್ವಾಸ್ ಮೇಲಿರುವ ಹೂವುಗಳು ವಕ್ರೀಕರಣವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ.

ಗ್ಲಾಸ್ ಪ್ಯಾನಲ್ DOM ಅನ್ನು ಕ್ಲೋನ್ ಮಾಡುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಅದು ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಸ್ಯಾಂಪಲ್ ಮಾಡುತ್ತದೆ.

ರೆಂಡರ್ ಫ್ಲೋ ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ:

  • WebGL ನೀರನ್ನು ರೆಂಡರ್ ಮಾಡಿ.
  • 2D ಹೂವುಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಿ.
  • ಎರಡನ್ನೂ ಒಂದು ಗುಪ್ತ ಸೋರ್ಸ್ ಕ್ಯಾನ್ವಾಸ್‌ನಲ್ಲಿ ಸಂಯೋಜಿಸಿ.
  • ಆ ಸೋರ್ಸ್ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಸ್ಯಾಂಪಲ್ ಮಾಡಲು ಗ್ಲಾಸ್ ಶೇಡರ್ ಬಳಸಿ.

ಶೇಡರ್ ಒಂದು 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