‏Liquid DOM؛ افکت شیشه‌ی مایع با WebGPU برای وب

Liquid DOM یه مونوریپوئه برای رندر افکت «شیشه‌ی مایع» (liquid glass) با WebGPU. مجموعه‌ای از باندینگ‌های React، اینتگریشن با Three.js و React Three Fiber، و یه موتور layout مستقل از رندرر رو شامل می‌شه که APIهای سطح‌بالاترش روش ساخته شدن. ساختار پروژه بر اساس لایه‌ی اینتگریشن جدا شده و توصیه‌ی پروژه اینه که پایین‌ترین پکیجی رو برداری که با رندرری که خودت دستته جوره، یا اگه layout دکلراتیو می‌خوای از پکیج‌های React سطح‌بالاتر استفاده کنی.

پکیج پایه @liquid-dom/core یه scene graph امری مبتنی بر DOM، رندرر WebGPU و هسته‌ی قابل‌استفاده‌ی glass رو می‌ده و برای وقتیه که می‌خوای کنترل مستقیم روی scene graph داشته باشی یا داری برای یه رندرر دیگه adapter می‌سازی. @liquid-dom/react همون کلاس‌های layout رو به صورت کامپوننت React بسته‌بندی می‌کنه و LiquidCanvas خودش بوم رو مدیریت می‌کنه.

برای کسایی که از قبل Three.js دارن، پکیج @liquid-dom/three به عنوان یه adapter عمل می‌کنه و افکت liquid glass رو به صورت یه لایه‌ی post-composite روی رندرر WebGPU خود Three سوار می‌کنه. @liquid-dom/r3f هم پل بین React Three Fiber هست و روی دو پکیج three و react ساخته شده. در نهایت @liquid-dom/layout یه موتور layout کاملاً مستقله که اندازه‌گیری و چینش به سبک SwiftUI رو بدون هیچ وابستگی به رندرر فراهم می‌کنه؛ همین پکیج زیربنای subpath مربوط به layout تو core هم هست.

نصب هر پکیج بسته به هدف اینتگریشن فرق می‌کنه و معمولاً peer dependency هم لازم داره:

pnpm add @liquid-dom/core
pnpm add @liquid-dom/react react react-dom
pnpm add @liquid-dom/three @liquid-dom/core three

نکته‌ی مهم در مورد محدودیت‌های اجراست. رندرر liquid glass به WebGPU نیاز داره، یعنی مرورگر باید navigator.gpu رو داشته باشه. اما نمایش محتوای زنده‌ی DOM روی بوم به یه API آزمایشی به اسم HTML-in-Canvas وابسته‌ست که فعلاً فقط پشت فلگ chrome://flags/#canvas-draw-element تو کروم در دسترسه. پیاده‌سازیش از و رویدادهای paint کانواس استفاده می‌کنه تا محتوای زنده‌ی DOM رو داخل بافت‌های GPU کپی کنه. پکیج‌های DOM و React می‌تونن تو هر محیط مرورگرمانندی scene graph بسازن، ولی خود رندر به مرورگر واقعی نیاز داره و اینتگریشن‌های Three هم حتماً به رندرر WebGPU خود Three (نه WebGLRenderer) نیاز دارن.

نکات کلیدی:

• مونوریپو برای رندر افکت liquid glass با WebGPU روی وب
• پکیج‌ها بر اساس لایه‌ی اینتگریشن جدا شدن: core، react، three، r3f و layout
• موتور layout مستقل از رندرر با چینش به سبک SwiftUI
• رندر به navigator.gpu نیاز داره؛ نمایش DOM زنده پشت فلگ آزمایشی کرومه
• اینتگریشن Three فقط با رندرر WebGPU کار می‌کنه نه WebGLRenderer