Liquid DOM: рендеринг живых DOM-узлов в WebGPU-текстуры через HTML-in-Canvas

Экосистема WebGPU пополнилась специфичным инструментом для композитинга интерфейсов. Проект Liquid DOM реализует сложный эффект жидкого стекла в вебе, но его главная техническая ценность заключается в подходе к рендерингу. Библиотека использует экспериментальный API HTML-in-Canvas, позволяя копировать живые DOM-узлы напрямую в текстуры графического процессора без привычных костылей с растеризацией через SVG.

Внутри это модульный монорепозиторий, жестко разделенный по слоям интеграции. Пакет @liquid-dom/layout работает как независимый движок компоновки в стиле SwiftUI, вообще не привязанный к конкретному рендеру. Для внедрения в существующие проекты написаны адаптеры под React 19, Three.js и React Three Fiber. Это позволяет описывать стеклянный UI декларативно, пока низкоуровневые классы управляют графом сцены и композитингом поверх основного 3D-контекста.

Реализация захвата контента опирается на атрибут <canvas layoutsubtree> и нативные события отрисовки. Из-за этого для рендеринга DOM-элементов пока требуется включенный флаг chrome://flags/#canvas-draw-element в браузерах Chromium. Граф сцены успешно собирается в любой среде исполнения, но сам конвейер жестко требует наличия navigator.gpu и поддержки свежих черновиков веб-стандартов.