رفتن به محتوای اصلی
← بازگشت به پروژه‌ها
تصویر واقعی استودیوی Liquid Glass با کنترل‌های اپتیکی و خروجی PNG 05 / POOYA LABS
PROJECT / 05آزمایشگاه شیشه و صوت

LuminaGlass

دموی عمومی

آزمایشگاه مرورگری برای تنظیم سطوح Liquid Glass و جلوه‌های اپتیکی، خروجی PNG و پردازش صوت با Web Audio API؛ تنظیمات و Presetها به‌صورت محلی در مرورگر ذخیره می‌شوند.

SVGCanvasWeb Audio APITypeScript
مشاهده دمو ↗ مشاهده سورس ↗
UI /تصاویر واقعی رابط کاربری
نمای موبایل استودیوی LuminaGlass
نمای موبایل استودیوی LuminaGlass
01 /مسئله

ساختن سطح‌های شیشه‌ای با حس عمق و کنترل‌های بصری، در کنار پردازش صوت، نیازمند آزمایش‌های سریع در خود مرورگر است. LuminaGlass این دو حوزه را در یک آزمایشگاه تعاملی کنار هم قرار می‌دهد.

02 /راهکار و رویکرد

کنترل‌های SVG برای تنظیم جلوه‌های اپتیکی و Canvas برای خروجی PNG استفاده می‌شوند. بخش صوت با Web Audio API و زنجیره‌ای از فیلترهای Biquad اجرا می‌شود.

03 /نقش و انتساب

README، پویا را نویسنده پروژه معرفی می‌کند.

04 /معماری فنی

آزمایشگاه static مبتنی بر Next.js 16، React 19، TypeScript و Tailwind؛ SVG پیش‌نمایش optical، Canvas خروجی PNG، Web Audio API فیلترهای صوتی محلی و localStorage تنظیمات و task board را نگه می‌دارد.

دو آزمایشگاه در یک مرورگر
جلوه‌های بصری و زنجیره صوت محلی‌اند؛ تنظیمات و presetها در همان مرورگر می‌مانند
05 /جزئیات پیاده‌سازی
  • 01تنظیم زنده iridescence، fluidity و لایه‌های crystal.
  • 02خروجی PNG با Canvas.
  • 03پنج Biquad filter برای oscillator، فایل صوتی محلی یا microphone.
  • 04Presetهای Flat/Warm/Clarity/Cinematic و تنظیم دستی bandها.
  • 05Task board سه‌مرحله‌ای و ذخیره محلی.
  • 06آزادسازی oscillator، microphone tracks، AudioContext و object URLها هنگام stop یا تغییر source.
06 /تصمیم‌های مهندسی
  • 01preset، EQ و taskها فقط روی localStorage همین browser ذخیره می‌شوند؛ cloud sync وجود ندارد.
  • 02صوت پس از reload خودکار شروع نمی‌شود و AudioContext با کنش کاربر resume می‌شود.
  • 03دسترسی microphone به HTTPS/localhost و اجازه مرورگر نیاز دارد؛ صوت به سرور فرستاده نمی‌شود.
07 /تست و شواهد اعتبارسنجی
  • 01انتشار Pages روی commit 06fa934 در ۱ نوامبر ۲۰۲۶ موفق بود.
  • 02README گزارش یکپارچه تازه از browser/accessibility tests ارائه نمی‌کند.
09 /قابلیت‌ها و نکات فنی
  • 01تنظیم iridescence، fluidity و لایه‌های crystal
  • 02خروجی PNG از وضعیت فعلی استودیو
  • 03پنج فیلتر Biquad برای oscillator، فایل صوتی یا microphone
  • 04Presetها و task board محلی در مرورگر
  • 05آزادسازی منابع صوتی، trackهای میکروفون و URLهای موقت
10 /محدوده و محدودیت‌ها

Presetها و task board در localStorage همین مرورگر ذخیره می‌شوند. پردازش صوت محلی است و به سرویس ابری، AI یا backend متصل نیست.