طراحی رابط‌های سه‌بعدی با WebGL؛ از ایده تا ۶۰ فریم بر ثانیه

چند سال پیش، ساخت یک تجربه سه‌بعدی روی وب یعنی قربانی کردن نیمی از کاربران موبایل. امروز با ابزارهایی مثل React Three Fiber و درک بهتر از GPU، می‌توانیم صحنه‌هایی بسازیم که هم چشم‌نواز باشند و هم روی گوشی‌های میان‌رده روان اجرا شوند.

شروع با یک ذهنیت درست

قبل از اولین خط کد، باید بدانید بودجه‌ی فریم شما چقدر است. برای ۶۰fps فقط ۱۶ میلی‌ثانیه در اختیار دارید — و بخش زیادی از آن صرف کارهای مرورگر می‌شود. یعنی JavaScript، فراخوانی‌های GPU و به‌روزرسانی DOM باید جمعاً زیر ۸ میلی‌ثانیه بمانند.

بهینه‌سازی هندسه

بیشتر پروژه‌هایی که ما ممیزی می‌کنیم با مدل‌های چند صد هزار پلی‌گانی شروع کرده‌اند. کاهش تعداد vertex، ادغام geometryهای مشابه با InstancedMesh و استفاده از LOD (Level of Detail) معمولاً بین ۳۰ تا ۶۰ درصد بار GPU را کم می‌کند.

shaderها؛ جایی که جادو اتفاق می‌افتد

shader سفارشی به شما اجازه می‌دهد افکت‌هایی بسازید که با ماده‌های استاندارد ممکن نیست. اما هر varying اضافه، هر texture lookup و هر شاخه‌ی if در fragment shader هزینه دارد. اصل ما این است: ابتدا ساده‌ترین نسخه را بسازید، بعد لایه به لایه اضافه کنید و بعد از هر لایه اندازه بگیرید.

مدیریت حافظه

نشت حافظه در Three.js یک قاتل خاموش است. هر geometry، material و texture که می‌سازید باید dispose شود. در React Three Fiber معمولاً این کار خودکار است، اما وقتی خارج از چرخه‌ی حیات کامپوننت چیزی می‌سازید، مسئولیت با شماست.

جمع‌بندی

ساخت تجربه‌های سه‌بعدی روی وب هنر تعادل است: بین زیبایی و کارایی، بین جزئیات و سادگی. اگر از روز اول با ذهنیت performance-first کار کنید، محصول نهایی هم چشم‌نواز خواهد بود و هم در دست میلیون‌ها کاربر روان اجرا می‌شود.