جایی که WebGL با شیشهی مایع تلاقی میکند
بیشتر جلوههای شیشهی مایع در وب از DOM cloning استفاده میکنند. آنها عناصر HTML را کپی کرده، آنها را تغییر شکل میدهند، تاری (blur) اضافه میکنند و آنها را زیر یک لایهی شیشهای قرار میدهند.
این روش در WebGL شکست میخورد. یک کپی از DOM نمیتواند پیکسلها را از یک canvas زنده کپی کند. یک canvas در واقع یک framebuffer است که در هر فریم تغییر میکند.
برای اینکه شیشهی مایع روی یک canvas کار کند، دو انتخاب دارید. میتوانید در هر فریم از canvas تصویر بگیرید که هزینهبر است. یا اینکه میتوانید جلوهی شیشهای را به خودِ WebGL pipeline منتقل کنید.
من یک آزمایش برای تست روش دوم ساختم. برای نمایش این جلوه، به پسزمینهای با حرکت نیاز داشتم. من از یک دموی تعاملیِ موجهای آب اثر Konmari الهام گرفتم.
من نسخهی خودم را با فیزیک واقعگرایانهی موج و گلهای شناور ساختم.
نتیجه، یک صحنهی آبی WebGL با یک پنل شیشهی مایع است. این پنل، canvas زندهی زیر خود را منکسر (refract) میکند.
نحوه عملکرد:
- آب از یک شبیهسازی موج بر اساس height-field استفاده میکند.
- حرکت pointer روی یک grid موج ایجاد میکند.
- یک WebGL shader آن موجها را به نور و تغییر شکل تبدیل میکند.
- گلها روی یک 2D canvas کمک میکنند تا شکست نور به وضوح نمایش داده شود.
پنل شیشهای DOM را کپی نمیکند، بلکه پیکسلها را نمونهبرداری (sample) میکند.
فرآیند رندر این مراحل را دنبال میکند:
- رندر کردن آب WebGL.
- رندر کردن گلهای 2D.
- ترکیب هر دو در یک canvas منبعِ پنهان.
- استفاده از glass shader برای نمونهبرداری از آن canvas منبع.
شیدر یک soft edge normal را تخمین میزند. از این مقدار برای خم کردن texture منبع استفاده میکند. من یک 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