‏افکت شیشه‌ای اپل رو روی همهٔ مرورگرها آوردن

نویسنده می‌گه بعد از اینکه اپل پارسال تو WWDC افکت Liquid Glass رو معرفی کرد، خیلی‌ها سعی کردن همون حس رو برای وب بازسازی کنن، ولی تقریباً همهٔ اون دموها فقط روی مرورگرهای Chromium کار می‌کردن. اون‌ها یا به یه روش backdrop-filter با SVG تکیه می‌کردن یا به API آزمایشی HTML-in-Canvas که پشت یه فلگ مخفیه، و هیچ‌کدوم تو مرورگرهای دیگه دووم نمی‌آره.

ادعای اصلی مقاله اینه که تکنیک Aave روی هر مرورگر مدرنی، چه دسکتاپ چه موبایل، بدون هیچ فلگی و بدون نیاز به fallback کار می‌کنه. هستهٔ کار یه primitive فیلتر SVG به اسم feDisplacementMap ـه که دو ورودی می‌گیره: محتوای رنگ‌شده و یه نقشه‌ای که خودشون می‌سازن، و برای هر پیکسل تصمیم می‌گیره به کدوم سمت هل داده شه. نکتهٔ مهم اینه که چیزی از زیر شیشه نمونه‌برداری نمی‌شه، بلکه پیکسل‌های خود محتوا جابه‌جا می‌شن، برای همین متن زیر لنز هنوز قابل انتخاب و لینک‌ها قابل کلیک می‌مونن.

اون نقشه یه PNG کوچیکه که روی پرواز از شکل و اندازهٔ شیشه ساخته می‌شه. کانال‌های قرمز و سبزش می‌گن هر پیکسل چقدر افقی و عمودی خم شه، و هرجا بیرون لنزه یه مقدار خنثی داره که اون پیکسل‌ها رو دست‌نخورده می‌ذاره. چندتا پاس دیگه هم ظاهر کار رو کامل می‌کنه، مثل یه حاشیهٔ رنگی کم‌رنگ و یه highlight که شیشه رو خوانا نگه می‌داره.

قسمت جالب اینه که همین نقشه رو می‌شه روی سطح‌های مختلف استفاده کرد. روی DOM معمولی، نقشه یه فیلتر SVG رو هدایت می‌کنه. ولی هرجا DOM زنده‌ای برای خم کردن نباشه، مثل یه QR کد که روی canvas کشیده شده یا یه ویدیو که Safari فیلترش نمی‌کنه، همون نقشه به یه شیدر WebGL داده می‌شه. به قول نویسنده، رندرکننده با محیط عوض می‌شه ولی خود refraction ثابت می‌مونه. این الگو رو روی کامپوننت‌هایی مثل سوییچ، اسلایدر، toggle group و حتی پخش‌کنندهٔ ویدیو پیاده کردن:

<Glass
  lens={{ lensW: 90, lensH: 60, borderRadius: 30 }}
  x={progress} // lens acts as the thumb (0–1 across the track)
>
  <SwitchTrack />
</Glass>

نویسنده می‌گه بیشترِ کار اونجایی بود که می‌خواستن همین شیشه رو درست توی Safari رندر کنن، چون اونجا یه سری مشکل پیش می‌اومد که هیچ‌جای دیگه نیست. مثلاً Safari خروجی فیلتر SVG رو با ID اون cache می‌کنه، پس وقتی نقشه عوض می‌شه ولی ID ثابت می‌مونه، خروجی قدیمی رو نگه می‌داره و شیشه وسط حرکت یخ می‌زنه. راه‌حلشون اینه که هر بار به فیلتر یه ID تازه بدن تا Safari مجبور شه نقشهٔ جدید رو بخونه.

چندتا بهینه‌سازی دیگه هم برای کارایی انجام دادن. چون نقشهٔ جابه‌جایی اساساً یه مستطیل گردشده‌ست و تقارن چهارگانه داره، فقط یک‌چهارمِ بالا-چپ رو حساب می‌کنن و توی چهار ربع می‌نویسن، که کار هر پیکسل رو به یک‌چهارم می‌رسونه. همچنین Safari یه سقف روی اندازهٔ گرافیک ورودی فیلتر داره، پس باید محافظه‌کار باشن و DOM ای که خم می‌کنن خیلی بزرگ نباشه، وگرنه افکت می‌شکنه یا کلاً حذف می‌شه.

نکات کلیدی:

• افکت شیشه‌ای روی همهٔ مرورگرهای مدرن از جمله Safari و Firefox بدون فلگ کار می‌کنه
• هستهٔ کار فیلتر SVG به اسم feDisplacementMap ـه که پیکسل‌های واقعی محتوا رو خم می‌کنه
• چون کپی ساخته نمی‌شه، متن زیر شیشه قابل انتخاب و لینک‌ها قابل کلیک می‌مونن
• هرجا DOM زنده نباشه (QR، ویدیو)، همون نقشه به یه شیدر WebGL داده می‌شه
• بیشترِ سختی کار، دور زدن محدودیت‌های Safari مثل cache فیلتر و سقف اندازهٔ ورودی بود