Где 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