LiquidGlass

Что такое LiquidGlass?

LiquidGlass — легкая библиотека на JavaScript/TypeScript, которая рендерит реалистичные стеклянные эффекты поверх любого HTML-элемента с помощью WebGL-шейдеров. Она применяет рефракцию, размытие, хроматическую аберрацию, спекулярные блики и связанные эффекты освещения, захватывая DOM-контент за каждым стеклянным элементом и компонуя его в реальном времени.

Библиотека предназначена для работы с произвольными фонами страницы (изображения, видео, canvas или обычный HTML). Она использует многоэтапный конвейер рендеринга и поддерживает несколько слоев стекла, конфигурацию на уровне элемента и динамические обновления на странице.

Ключевые возможности

• Рендеринг стекла на основе WebGL-шейдеров для HTML-элементов: Создает стеклянный вид, обрабатывая DOM-контент за стеклянным элементом и компонуя его как выход шейдера.
• Многоэтапный конвейер в реальном времени: Поддерживает эффекты вроде рефракции, контроля силы размытия, хроматической каймы и спекулярного/ободкового освещения.
• Конфигурация на уровне элемента и глобальная: Настраивайте каждый стеклянный элемент индивидуально через data-config (JSON) или задавайте глобальные значения по умолчанию через опцию defaults.
• Компоновка слоев стекла: Поддерживает стекло-над-стеклом благодаря подходу к компоновке.
• Интерактивные опции позиционирования: Может добавлять поведение перетаскиваемой «плавающей» панели при активации (например, floating: true), а также режим button для отклика шейдера на наведение/нажатие.
• Контроль реалистичной поверхности: Параметры включают cornerRadius, zRadius (глубина фаски), bevelMode (режим кривизны формы), brightness, saturation, shadowOpacity и fresnel-отражение.

Как использовать LiquidGlass

1. Установка или импорт: Установите через npm (npm install @ybouane/liquidglass) или импортируйте напрямую из CDN (https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js).
2. Создайте позиционированный корневой контейнер: Элемент root, передаваемый в LiquidGlass.init(), должен иметь position: relative.
3. Добавьте стеклянные элементы внутри root: Каждый стеклянный элемент должен быть прямым потомком root. При инициализации LiquidGlass вставляет <canvas> как первого потомка стеклянного элемента для вывода шейдера.
4. Инициализация: Создайте экземпляр с LiquidGlass.init({ root: document.querySelector('#my-root'), glassElements: document.querySelectorAll('.glass') }) и позже очистите с instance.destroy().
5. Настройка эффектов: Укажите настройки на уровне элемента через element.dataset.config = JSON.stringify({ ... }) (например, сила размытия, рефракция, радиус углов). Используйте паттерн playground для визуальной подстройки параметров.

Примеры использования

• Пользовательские «стеклянные» карточки и панели: Применяйте матовое, темное или обычное стеклянное оформление к карточке, настраивая blurAmount, brightness, cornerRadius и zRadius.
• Интерактивная линза в стиле лупы: Используйте bevelMode: 1 с подходящими cornerRadius и zRadius для эффекта полусферы/купола (и опционально включите floating).
• Отклик UI на наведение/нажатие: Установите button: true, чтобы стеклянный элемент реагировал на взаимодействие — наведение увеличивает яркость, нажатие сглаживает фаску и усиливает тень.
• Композиции стекло-над-стеклом: Создавайте многослойный UI, где стеклянные элементы перекрываются, используя компоновку LiquidGlass для наложенных эффектов.
• Стекло над насыщенными фонами: Размещайте стеклянные элементы поверх фонов с изображениями, видео, canvas или обычным HTML-контентом, оставляя эти фоны среди отслеживаемых потомков root.

FAQ

Нужна ли специальная структура DOM?
Да. root должен быть позиционированным контейнером (position: relative), а каждый стеклянный элемент — прямым потомком root. Вложенные стеклянные элементы отклоняются при инициализации с предупреждением в консоли.

Что захватывает LiquidGlass для стеклянного эффекта?
Шейдер сэмплирует потомков root, поэтому фоновые изображения должны быть в sibling-элементе внутри root. Сам root не захватывается.

Создает ли LiquidGlass DOM-элементы за меня?
Да, вставляет <canvas> как первого потомка стеклянного элемента для вывода шейдера. Из-за этого избегайте CSS-селекторов :first-child для стеклянного элемента.

Можно ли использовать несколько root LiquidGlass на одной странице?
Ограничения указывают, что несколько root LiquidGlass не могут делить рефракцию. Также стеклянные элементы одного root не видят рендеринг элементов другого root.

Есть ли соображения по производительности?
Да. Библиотека полагается на растеризацию DOM в реальном времени и многоэтапный WebGL-конвейер; захват DOM в canvas считается затратным.

Альтернативы

• Эффекты стекла только на CSS (backdrop-filter / техники на основе blur): Более простые подходы, полностью основанные на CSS, могут имитировать матовое стекло, но обычно не обеспечивают такого же поведения конвейера рефракции/хроматической аберрации/спекулярных эффектов.
• Фреймворки шейдеров WebGL или кастомные реализации Three.js/WebGL: Если нужен полный контроль, можно реализовать кастомные проходы шейдеров самостоятельно; это переносит работу из абстракции библиотеки в вашу собственную конвейерную линию рендеринга.
• Другие конвейеры эффектов DOM-to-canvas/в реальном времени: Смежные решения, которые растеризуют DOM в текстуры, можно использовать для создания экранных эффектов, но рабочий процесс и настройка будут отличаться от установки стеклянного элемента на основе DOM в LiquidGlass.
• Статичные дизайнерские ассеты: В случаях, когда не требуются взаимодействия и обновления в реальном времени, предварительно отрендеренные изображения стекла или экспортированные компоненты снижают затраты во время выполнения за счёт динамической рефракции/изменений параметров.