شبیه‌سازی روان و جذاب پخش مایعات با استفاده از Three.js و شیدرهای فرگمنت

برنامه‌نویسان وب و توسعه‌دهندگان گرافیک سه‌بعدی همواره به دنبال راه‌هایی برای خلق تجربه‌های بصری روان و تعاملی در مرورگر هستند. در این مقاله، میکاساکی ناکانو (Misaki Nakano) به سراغ پیاده‌سازی یک افکت جالب برای شبیه‌سازی بافت مایع (مانند کرم‌پودر) می‌رود که برای یک پروژه تبلیغاتی در سال ۲۰۲۱ توسعه داده شده بود. این پروژه نشان می‌دهد که چگونه می‌توان با ترکیب قابلیت‌های کتابخانه Three.js و محاسبات شیدری، رفتاری شبیه به مایعات را بدون نیاز به موتورهای فیزیکی پیچیده شبیه‌سازی کرد.

معماری و ایده اصلی

برای نمایش دادن حجم و حرکت مایع روی صفحه، نیازی به تغییر دادن ژئومتری (Geometry) سه‌بعدی و جابه‌جایی ورتکس‌ها نیست. تمام این جادو در سطح شیدرهای فرگمنت (Fragment Shaders) رخ می‌دهد. برای درک بهتر، سیستم بر اساس سه جزء اصلی کار می‌کند:

• نقشه ارتفاع (Height Map): یک بافت (FBO) که ضخامت مایع را در هر نقطه نشان می‌دهد.
• نقشه سرعت (Velocity Map): جهت و میزان حرکت کاربر (کشیدن دست یا موس) را ثبت می‌کند.
• نقشه آلفا (Alpha Map): ردپای به‌جا‌مانده از مایع را حفظ می‌کند تا حتی پس از نازک شدن لایه، رنگ آن محو نشود.

جزئیات فنی پیاده‌سازی

روند به‌روزرسانی ضخامت مایع با استفاده از تکنیک Advection انجام می‌شود. به جای اینکه پیکسل‌ها مستقیماً مقدار خود مقصد را بنویسند، هر پیکسل مقصد، سرعت را به عقب ردیابی می‌کند (backtraceUv) تا مشخص شود مایع از چه نقطه‌ای به اینجا منتقل شده است. سپس مقدار ورودی و خروجی ضخامت محاسبه و اعمال می‌شود.

نکته مهم این است که این روش کاملاً فیزیکی و محافظه‌کارانه از نظر حجم مایع (Volume-conserving) نیست. برای مثال، هنگام کشیدن دایره‌وار موس، خطای نمونه‌برداری انباشته شده و حجم مایع به مرور زیاد می‌شود؛ اما هدف در اینجا اولویت دادن به زیبایی بصری و تجربه کاربر است نه دقت فیزیکی مطلق.

محاسبه نرمال‌ها و نورپردازی

برای اینکه سطح صاف دو‌بعدی شبیه به یک مایع برجسته به نظر برسد، نرمال‌های سطح مستقیماً از روی نقشه ارتفاع در شیدر فرگمنت محاسبه می‌شوند. با نمونه‌برداری از ارتفاع پیکسل‌های مجاور در محورهای X و Y و به دست آوردن محصول برداری (Cross Product)، بردار نرمال سطح استخراج می‌شود. سپس با استفاده از تکسچرهای Matcap و مقادیر نقشه آلفا، بازتاب نور و ردپای مایع روی صفحه رندر می‌شود.

نکات جالب درباره دقت بافت و ترکیب رنگ‌ها

در بخش بررسی مقایسه‌ای دقت بافت‌ها، نویسنده اشاره می‌کند که استفاده از تکسچرهای ممیز شناور ۳۲ بیتی در مقایسه با بافت‌های استاندارد ۸ بیتی، خطوط و شیب‌های نرم‌تری در سایه‌زنی ایجاد می‌کند؛ در حالی که محدودیت ۸ بیتی باعث ایجاد پله‌پله شدن قابل‌مشاهده در شیب‌های ارتفاع می‌شود.

همچنین در یک آزمایش جذاب دیگر، با استفاده از سه نقشه ارتفاع مجزا و یک نقشه سرعت مشترک، سه رنگ مختلف مایع با یکدیگر ترکیب شده‌اند که رنگ‌ها بر اساس مدل ساده‌شده Kubelka–Munk و میزان ضخامت هر کدام با هم مخلوط می‌شوند.

دیدگاه جامعه توسعه‌دهندگان

در بحث‌های هکرنیوز، کاربران از جذابیت بصری این تکنیک شگفت‌زده شده بودند و برخی به طنز ابراز تمایل کردند که کاش محصولات آرایشی واقعی نیز چنین روان و بی‌نقص روی پوست پخش می‌شدند. این پروژه بار دیگر قدرت شیدرهای وب‌جی‌ال (WebGL) را در خلق جلوه‌های تعاملی سبک و کارآمد نشان می‌دهد.