WebGPUを使ってliquid glass表現を描画するモノレポ。シーングラフのコアから、React・Three.js・React Three Fiberそれぞれへのアダプタ、レンダラ非依存のレイアウトエンジンまでをパッケージに分けて提供する。
パッケージ構成
@liquid-dom/core — 命令的なDOMベースのシーングラフ、WebGPUレンダラ、ガラス描画コア、レイアウトクラス@liquid-dom/react — React 19向けの宣言的バインディング。LiquidCanvas がcanvasを所有する@liquid-dom/three — Three WebGPUレンダラの上にliquid glassを後段合成するアダプタ@liquid-dom/r3f — React Three FiberからReactでliquid glass UIを重ねるためのブリッジ@liquid-dom/layout — SwiftUIスタイルの計測・配置だけを提供するレンダラ非依存エンジン
実行要件
liquid-glassレンダラはWebGPUを必須とする。DOMコンテンツを直接ガラスに流し込むHtmlは実験的な HTML-in-Canvas API に依存しており、現状はChromeの chrome://flags/#canvas-draw-element を有効化したときだけ動く。<canvas layoutsubtree> とcanvas paintイベントでライブDOMをGPUテクスチャに転写する仕組み。
Three連携は WebGLRenderer ではなくThreeのWebGPUレンダラ専用。シーングラフの構築自体はブラウザ風環境であれば動くが、描画には navigator.gpu が要る。
ショーケースは https://liquid-dom-showcase.vercel.app で確認できる。Apple的なliquid glassをReactやR3Fで素直に書きたい人向け。
