Де WebGL зустрічається з рідким склом

Більшість ефектів рідкого скла у вебі використовують клонування DOM. Вони копіюють HTML-елементи, спотворюють їх, додають розмиття та розміщують під шаром скла.

Цей метод не працює з WebGL. DOM-клон не може копіювати пікселі з живого canvas. Canvas — це фреймбуфер, який змінюється кожного кадру.

Щоб змусити рідке скло працювати на canvas, у вас є два варіанти. Ви можете захоплювати canvas кожного кадру, що є ресурсомістким. Або ви можете перенести ефект скла безпосередньо в конвеєр (pipeline) WebGL.

Я створив експеримент, щоб протестувати другий підхід. Мені потрібен був фон із рухом, щоб продемонструвати ефект. Я надихнувся інтерактивним демо з водними брижами від Konmari.

Я створив власну версію з реалістичною фізикою брижів та квітами, що плавають.

Результатом стала водна сцена WebGL з панеллю рідкого скла. Ця панель заломлює живий canvas під нею.

Як це працює:

  • Вода використовує симуляцію брижів на основі карти висот (height-field).
  • Рух вказівника створює хвилі на сітці.
  • WebGL-шейдер перетворює ці хвилі на світло та спотворення.
  • Квіти на 2D canvas допомагають чітко продемонструвати заломлення.

Скляна панель не клонує DOM. Замість цього вона зразкує пікселі.

Процес рендерингу складається з таких кроків:

  • Рендеринг води WebGL.
  • Рендеринг 2D-квітів.
  • Поєднання обох у один прихований вихідний canvas.
  • Використання шейдера скла для зразкування цього вихідного canvas.

Шейдер оцінює м'яку нормаль краю (soft edge normal). Він використовує її для викривлення вихідної текстури. Я додав відтінок та хроматичне розщеплення (chromatic split), щоб матеріал здавався густим.

Мета не в ідеальній фізиці. Мета — зробити так, щоб панель відчувалася як реальний матеріал, розташований над рухомою сценою.

Це працює, тому що сцена вже є набором пікселів. Повне рішення для всього вебу складніше. Справжні вебсайти використовують текст, відео та прокручування.

Я уважно стежу за цією сферою. Продуктивність буде найбільшим викликом для майбутніх рішень.

Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples

Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l