ਜਿੱਥੇ WebGL, Liquid Glass ਨਾਲ ਮਿਲਦਾ ਹੈ

ਵੈੱਬ 'ਤੇ ਜ਼ਿਆਦਾਤਰ liquid glass ਪ੍ਰਭਾਵ DOM cloning ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਉਹ HTML elements ਦੀ ਕਾਪੀ ਕਰਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਵਿਗਾੜਦੇ (distort) ਹਨ, ਬਲਰ (blur) ਜੋੜਦੇ ਹਨ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਗਲਾਸ ਲੇਅਰ ਦੇ ਹੇਠਾਂ ਰੱਖਦੇ ਹਨ।

ਇਹ ਤਰੀਕਾ WebGL ਨਾਲ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ। ਇੱਕ DOM clone ਇੱਕ ਲਾਈਵ canvas ਤੋਂ pixels ਦੀ ਕਾਪੀ ਨਹੀਂ ਕਰ ਸਕਦਾ। ਇੱਕ canvas ਇੱਕ framebuffer ਹੁੰਦਾ ਹੈ ਜੋ ਹਰ ਫਰੇਮ ਦੇ ਨਾਲ ਬਦਲਦਾ ਰਹਿੰਦਾ ਹੈ।

Canvas 'ਤੇ liquid glass ਨੂੰ ਕੰਮ ਕਰਵਾਉਣ ਲਈ, ਤੁਹਾਡੇ ਕੋਲ ਦੋ ਚੋਣਾਂ ਹਨ। ਤੁਸੀਂ ਹਰ ਫਰੇਮ 'ਤੇ canvas ਨੂੰ ਕੈਪਚਰ ਕਰ ਸਕਦੇ ਹੋ, ਜੋ ਕਿ ਮਹਿੰਗਾ (expensive) ਹੈ। ਜਾਂ, ਤੁਸੀਂ ਗਲਾਸ ਪ੍ਰਭਾਵ ਨੂੰ ਖੁਦ WebGL pipeline ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹੋ।

ਮੈਂ ਦੂਜੇ ਤਰੀਕੇ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਪ੍ਰਯੋਗ ਬਣਾਇਆ। ਮੈਨੂੰ ਪ੍ਰਭਾਵ ਦਿਖਾਉਣ ਲਈ ਗਤੀ (motion) ਵਾਲੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੀ ਲੋੜ ਸੀ। ਮੈਂ Konmari ਦੁਆਰਾ ਬਣਾਏ ਗਏ ਇੱਕ interactive water ripple demo ਤੋਂ ਪ੍ਰੇਰਨਾ ਲਈ।

ਮੈਂ ਅਸਲੀਅਤ ਵਰਗੀ ripple physics ਅਤੇ ਤੈਰਦੇ ਫੁੱਲਾਂ ਦੇ ਨਾਲ ਆਪਣਾ ਖੁਦ ਦਾ ਵਰਜ਼ਨ ਬਣਾਇਆ।

ਨਤੀਜਾ ਇੱਕ WebGL water scene ਹੈ ਜਿਸ ਵਿੱਚ ਇੱਕ liquid glass ਪੈਨਲ ਹੈ। ਇਹ ਪੈਨਲ ਆਪਣੇ ਹੇਠਾਂ ਮੌਜੂਦ ਲਾਈਵ canvas ਨੂੰ refract ਕਰਦਾ ਹੈ।

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:

  • ਪਾਣੀ ਇੱਕ height-field ripple simulation ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
  • Pointer ਦੀ ਹਰਕਤ ਇੱਕ grid 'ਤੇ ਲਹਿਰਾਂ ਪੈਦਾ ਕਰਦੀ ਹੈ।
  • ਇੱਕ WebGL shader ਉਹਨਾਂ ਲਹਿਰਾਂ ਨੂੰ ਰੌਸ਼ਨੀ ਅਤੇ ਵਿਗਾੜ (distortion) ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
  • 2D canvas 'ਤੇ ਫੁੱਲ refraction ਨੂੰ ਸਪਸ਼ਟ ਰੂਪ ਵਿੱਚ ਦਿਖਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।

ਗਲਾਸ ਪੈਨਲ DOM ਦੀ ਕਾਪੀ ਨਹੀਂ ਕਰਦਾ। ਇਸ ਦੀ ਬਜਾਏ, ਇਹ pixels ਨੂੰ sample ਕਰਦਾ ਹੈ।

Render flow ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:

  • WebGL ਪਾਣੀ ਨੂੰ render ਕਰੋ।
  • 2D ਫੁੱਲਾਂ ਨੂੰ render ਕਰੋ।
  • ਦੋਵਾਂ ਨੂੰ ਇੱਕ ਲੁਕਵੇਂ source canvas ਵਿੱਚ ਮਿਲਾ ਦਿਓ।
  • ਉਸ source canvas ਨੂੰ sample ਕਰਨ ਲਈ glass shader ਦੀ ਵਰਤੋਂ ਕਰੋ।

Shader ਇੱਕ soft edge normal ਦਾ ਅੰਦਾਜ਼ਾ ਲਗਾਉਂਦਾ ਹੈ। ਇਹ source texture ਨੂੰ ਮੋੜਨ ਲਈ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਮੈਂ ਸਮੱਗਰੀ (material) ਨੂੰ ਸੰਘਣਾ ਦਿਖਾਉਣ ਲਈ ਇੱਕ tint ਅਤੇ chromatic split ਜੋੜਿਆ ਹੈ।

ਮਕਸਦ ਸੰਪੂਰਨ physics ਨਹੀਂ ਹੈ। ਮਕਸਦ ਪੈਨਲ ਨੂੰ ਇੱਕ ਅਜਿਹੀ ਅਸਲੀ ਸਮੱਗਰੀ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਵਾਉਣਾ ਹੈ ਜੋ ਇੱਕ ਚਲਦੀ ਹੋਈ ਸੀਨ ਦੇ ਉੱਪਰ ਰੱਖੀ ਹੋਵੇ।

ਇਹ ਇਸ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਸੀਨ ਪਹਿਲਾਂ ਹੀ pixels ਵਿੱਚ ਹੈ। ਪੂਰੇ ਵੈੱਬ ਲਈ ਇੱਕ ਪੂਰਾ ਹੱਲ ਲੱਭਣਾ ਵਧੇਰੇ ਔਖਾ ਹੈ। ਅਸਲੀ ਵੈੱਬਸਾਈਟਾਂ ਟੈਕਸਟ, ਵੀਡੀਓ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ।

ਮੈਂ ਇਸ ਖੇਤਰ 'ਤੇ ਨੇੜਿਓਂ ਨਜ਼ਰ ਰੱਖ ਰਿਹਾ ਹਾਂ। ਭਵਿੱਖ ਦੇ ਹੱਲਾਂ ਲਈ 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