AndrewPrifer/liquid-dom

# Liquid DOM Liquid DOM 是一个 monorepo，包含 WebGPU 液态玻璃渲染、React 绑定、Three.js 集成、React Three Fiber 集成，以及供高级 API 使用的与渲染器无关的布局引擎。 这些 package 按照集成层进行划分。如果你希望直接控制所使用的渲染器，请使用最底层的 package；如果你需要声明式布局，请使用更高层的 React package。 ## Package | Package | 用途 | 适用场景 | | --- | --- | --- | | [`@liquid-dom/core`](./packages/core) | 命令式 DOM 场景图、WebGPU 渲染器、可复用的玻璃核心和布局类。 | 你想要直接控制场景图，或者你正在为另一个渲染器构建 adapter。 | | [`@liquid-dom/react`](./packages/react) | 用于布局和玻璃 API 的 React 19 绑定。 | 你想在 React 中描述玻璃 UI 并让 `LiquidCanvas` 接管 canvas，或者你需要为另一个渲染器提供 headless 场景。 | | [`@liquid-dom/three`](./packages/three) | 用于在 Three 的 WebGPU 渲染器上合成液态玻璃的 Adapter。 | 你已经渲染了 Three WebGPU 场景，并希望将液态玻璃作为后期合成层。 | | [`@liquid-dom/r3f`](./packages/r3f) | 基于 `@liquid-dom/three` 和 `@liquid-dom/react` 构建的 React Three Fiber bridge。 | 你将 R3F 与 Three 的 WebGPU 渲染器结合使用，并希望在场景之上使用 React 液态玻璃 UI。 | | [`@liquid-dom/layout`](./packages/layout) | 与渲染器无关的布局引擎。 | 你需要 SwiftUI 风格的测量和布局，且不依赖任何渲染器。 | ## Package 关系 `@liquid-dom/layout` 是独立的。`@liquid-dom/core` 在 layout 子路径中使用了它，同时还暴露了底层的命令式场景图和 WebGPU 渲染器。`@liquid-dom/react` 将来自 `@liquid-dom/core/layout` 的布局类封装为 React 组件。`@liquid-dom/three` 在 Three WebGPU 渲染器内部托管可复用的 WebGPU 核心。`@liquid-dom/r3f` 将 React 和 Three 的 package 结合起来，专为 React Three Fiber 打造。 ## 安装说明 请安装与你的集成目标相匹配的 package。特定于 package 的 README 列出了完整的安装命令，包括 peer dependencies。 ``` pnpm add @liquid-dom/core pnpm add @liquid-dom/react react react-dom pnpm add @liquid-dom/three @liquid-dom/core three pnpm add @liquid-dom/r3f @liquid-dom/react @react-three/fiber react react-dom three pnpm add @liquid-dom/layout ``` ## 仓库开发 ``` pnpm install pnpm -r build pnpm --filter @liquid-dom/layout test pnpm --filter @liquid-dom/core test pnpm --filter @liquid-dom/react test ``` 有关 package 级别的构建和测试命令，请参阅各个 package 的 README。 ## 浏览器和运行时要求 液态玻璃渲染器需要 WebGPU。基于 DOM 的 `Html` 内容还需要实验性的 HTML-in-Canvas API，目前该 API 只能在开启 Chrome 的 Canvas Draw Element flag (`chrome://flags/#canvas-draw-element`) 后使用。该实现使用了 `` 和 canvas 绘制事件，将实时的 DOM 内容复制到 GPU 纹理中。 DOM 和 React package 可以在任何类浏览器环境中构建场景图，但渲染需要一个具备 `navigator.gpu` 的浏览器；渲染基于 DOM 的内容还需要上述的 Chrome flag。Three 集成需要使用 Three 的 WebGPU 渲染器，而不是 WebGLRenderer。 参考：[WICG HTML-in-Canvas](https://wicg.github.io/html-in-canvas/)。

标签：React, Syscalls, Three.js, UI组件库, WebGPU, 自动化攻击, 视觉效果