WebGL Occlusion Culling: تکنیک‌های بهینه‌سازی رؤیت‌پذیری برای کاربردهای جهانی

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

حذف انسدادی (Occlusion Culling) چیست؟

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

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

چرا حذف انسدادی در WebGL مهم است؟

WebGL در محیط مرورگر اجرا می‌شود که ذاتاً در مقایسه با برنامه‌های بومی (native) محدودیت‌های عملکردی دارد. بهینه‌سازی برای WebGL برای دستیابی به مخاطبان گسترده و ارائه تجربه‌ای روان در دستگاه‌ها و شرایط شبکه مختلف بسیار مهم است. در اینجا دلایلی وجود دارد که چرا حذف انسدادی در WebGL اهمیت ویژه‌ای دارد:

• محدودیت‌های مرورگر: مرورگرهای وب جعبه‌های امنیتی (sandboxes) و محدودیت‌های منابعی را تحمیل می‌کنند که می‌تواند بر عملکرد تأثیر بگذارد.
• سخت‌افزار متنوع: برنامه‌های WebGL بر روی طیف گسترده‌ای از دستگاه‌ها، از رایانه‌های شخصی گیمینگ پیشرفته تا دستگاه‌های موبایل کم‌مصرف، اجرا می‌شوند. بهینه‌سازی‌ها برای اطمینان از تجربه‌ای ثابت در این طیف ضروری است.
• تأخیر شبکه: برنامه‌های WebGL اغلب برای دریافت دارایی‌ها (assets) به شبکه متکی هستند. کاهش حجم کار رندر می‌تواند به‌طور غیرمستقیم با به حداقل رساندن تأثیر تأخیر شبکه، عملکرد را بهبود بخشد.
• مصرف انرژی: در دستگاه‌های موبایل، رندر کردن هندسه غیرضروری باعث تخلیه باتری می‌شود. حذف انسدادی به کاهش مصرف انرژی و افزایش عمر باتری کمک می‌کند.

حذف مخروط دید (Frustum Culling): پایه و اساس

قبل از پرداختن به حذف انسدادی، درک حذف مخروط دید (frustum culling)، یک تکنیک بنیادی برای بهینه‌سازی رؤیت‌پذیری، مهم است. حذف مخروط دید اشیائی را که کاملاً خارج از مخروط دید دوربین (فضای سه‌بعدی قابل مشاهده برای دوربین) قرار دارند، حذف می‌کند. این معمولاً اولین بررسی رؤیت‌پذیری است که در یک خط لوله رندر انجام می‌شود.

مخروط دید توسط موقعیت، جهت‌گیری، میدان دید، نسبت ابعاد و صفحات برش نزدیک/دور دوربین تعریف می‌شود. انجام حذف مخروط دید نسبتاً کم‌هزینه است و با حذف اشیائی که کاملاً خارج از دید هستند، افزایش عملکرد قابل توجهی را فراهم می‌کند.

پیاده‌سازی حذف مخروط دید

حذف مخروط دید اغلب با استفاده از یک تست حجم مرزی (bounding volume) ساده پیاده‌سازی می‌شود. هر شیء با یک جعبه مرزی (bounding box) یا کره مرزی (bounding sphere) نمایش داده می‌شود و موقعیت آن با صفحاتی که مخروط دید را تعریف می‌کنند، مقایسه می‌شود. اگر حجم مرزی کاملاً خارج از هر یک از صفحات مخروط دید باشد، شیء حذف می‌شود.

بسیاری از کتابخانه‌های WebGL توابع داخلی برای حذف مخروط دید ارائه می‌دهند. به‌عنوان مثال، کتابخانه‌هایی مانند Three.js و Babylon.js قابلیت‌های حذف مخروط دید را به‌عنوان بخشی از سیستم‌های مدیریت صحنه خود ارائه می‌دهند. حتی بدون استفاده از کتابخانه، ایجاد عملکرد حذف مخروط دید خودتان نیز ممکن است، که به‌ویژه اگر عملکرد حیاتی باشد یا صحنه شما دارای ویژگی‌های خاصی باشد که توسط پیاده‌سازی‌های پیش‌فرض پوشش داده نشده‌اند، اهمیت دارد.

تکنیک‌های حذف انسدادی در WebGL

چندین تکنیک حذف انسدادی را می‌توان در WebGL به کار گرفت که هر کدام مزایا و معایب خاص خود را از نظر عملکرد و پیچیدگی دارند. در اینجا برخی از رایج‌ترین آن‌ها آورده شده است:

۱. حذف انسدادی با بافر Z سلسله‌مراتبی (Hi-Z)

حذف انسدادی Hi-Z از بافر عمق (Z-buffer) برای تعیین رؤیت‌پذیری استفاده می‌کند. یک نمایش سلسله‌مراتبی از بافر عمق ایجاد می‌شود، معمولاً با نمونه‌برداری کاهشی (downsampling) از بافر Z اصلی به یک هرم از بافرهای عمق کوچک‌تر. هر سطح در هرم نشان‌دهنده یک نسخه با وضوح پایین‌تر از بافر عمق است و هر پیکسل حداکثر مقدار عمق را در منطقه مربوطه خود در سطح با وضوح بالاتر ذخیره می‌کند.

برای انجام حذف انسدادی، حجم مرزی یک شیء بر روی پایین‌ترین سطح وضوح هرم Hi-Z تصویر می‌شود. سپس حداکثر مقدار عمق در منطقه تصویر شده با حداقل مقدار عمق حجم مرزی شیء مقایسه می‌شود. اگر حداکثر مقدار عمق در هرم Hi-Z کمتر از حداقل مقدار عمق شیء باشد، شیء مسدود شده در نظر گرفته شده و حذف می‌شود.

مزایا:

• پیاده‌سازی نسبتاً ساده.
• می‌تواند به‌طور کامل روی GPU با استفاده از شیدرها پیاده‌سازی شود.

معایب:

• نیاز به یک مرحله رندر اولیه برای تولید بافر عمق دارد.
• اگر هرم Hi-Z به اندازه کافی دقیق نباشد، ممکن است باعث ایجاد مصنوعات (artifacts) شود.

مثال: نمای کلی پیاده‌سازی Hi-Z

اگرچه ارائه یک پیاده‌سازی کامل شیدر فراتر از محدوده این مقاله است، در اینجا یک نمای کلی مفهومی آورده شده است:

1. تولید بافر عمق: صحنه را در یک فریم بافر با ضمیمه عمق رندر کنید.
2. ایجاد هرم Hi-Z: یک سری فریم بافر با وضوح‌های تدریجاً کوچک‌تر ایجاد کنید.
3. نمونه‌برداری کاهشی: از شیدرها برای نمونه‌برداری کاهشی مکرر بافر عمق استفاده کنید و هر سطح از هرم Hi-Z را تولید کنید. در هر مرحله، برای هر پیکسل، حداکثر مقدار عمق پیکسل‌های ۲x۲ اطراف در سطح با وضوح بالاتر را بگیرید.
4. پرس‌وجوی انسداد: برای هر شیء:
   • جعبه مرزی شیء را بر روی پایین‌ترین سطح وضوح Hi-Z تصویر کنید.
   • حداکثر مقدار عمق را در منطقه تصویر شده بخوانید.
   • این مقدار را با حداقل عمق شیء مقایسه کنید. اگر کوچک‌تر باشد، شیء مسدود شده است.

۲. پرس‌وجوهای انسداد (Occlusion Queries)

پرس‌وجوهای انسداد یکی از ویژگی‌های WebGL است که به GPU اجازه می‌دهد تا تعیین کند چه تعداد فرگمنت (پیکسل) از یک شیء معین قابل مشاهده است. سپس از این اطلاعات می‌توان برای تصمیم‌گیری در مورد رندر کردن شیء در فریم‌های بعدی استفاده کرد.

برای استفاده از پرس‌وجوهای انسداد، ابتدا یک شیء پرس‌وجو را به GPU ارسال می‌کنید. سپس، حجم مرزی شیء (یا یک نمایش ساده‌شده از شیء) را با تست عمق فعال اما بدون نوشتن در بافر رنگ رندر می‌کنید. GPU تعداد فرگمنت‌هایی را که از تست عمق عبور می‌کنند، ردیابی می‌کند. پس از رندر کردن حجم مرزی، نتیجه پرس‌وجو را بازیابی می‌کنید. اگر تعداد فرگمنت‌های قابل مشاهده صفر باشد، شیء مسدود شده در نظر گرفته شده و می‌توان آن را در فریم‌های بعدی نادیده گرفت.

مزایا:

• تعیین انسداد نسبتاً دقیق.
• می‌تواند با هندسه پیچیده استفاده شود.

معایب:

• تأخیر ایجاد می‌کند زیرا نتیجه پرس‌وجو تا پس از رندر شدن شیء در دسترس نیست. این تأخیر را می‌توان با استفاده از تکنیک‌هایی مانند تأخیر فریم یا پرس‌وجوهای ناهمزمان کاهش داد.
• اگر نتایج پرس‌وجو بیش از حد مکرر خوانده شوند، می‌تواند باعث توقف GPU شود.

مثال: پیاده‌سازی پرس‌وجوی انسداد

در اینجا یک مثال ساده‌شده از نحوه استفاده از پرس‌وجوهای انسداد در WebGL آورده شده است:

            // Create an occlusion query object
const query = gl.createQuery();

// Begin the query
gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);

// Render the object's bounding volume (or simplified geometry)
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

// End the query
gl.endQuery(gl.ANY_SAMPLES_PASSED, query);

// Check the query result (asynchronously)
gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);

if (gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE)) {
  const visible = gl.getQueryParameter(query, gl.QUERY_RESULT);
  if (visible) {
   // Render the object
  } else {
   // Object is occluded, skip rendering
  }
  gl.deleteQuery(query);
}

            

              
                Copy
              
            
          

۳. حذف پورتال (Portal Culling)

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

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

مزایا:

• بسیار مؤثر برای محیط‌های محصور.
• می‌تواند تعداد فراخوانی‌های ترسیم را به‌طور قابل توجهی کاهش دهد.

معایب:

• نیاز به تقسیم‌بندی دقیق صحنه و تعریف پورتال دارد.
• پیاده‌سازی آن می‌تواند پیچیده باشد.

مثال: سناریوی حذف پورتال

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

۴. رؤیت‌پذیری از پیش محاسبه‌شده (PVS)

مجموعه‌های رؤیت‌پذیری از پیش محاسبه‌شده (PVS) شامل محاسبه اطلاعات رؤیت‌پذیری به‌صورت آفلاین و ذخیره آن در یک ساختار داده است که می‌تواند در زمان اجرا استفاده شود. این تکنیک برای صحنه‌های استاتیک که هندسه آن‌ها به‌طور مکرر تغییر نمی‌کند، مناسب است.

در طول مرحله پیش‌پردازش، یک مجموعه رؤیت‌پذیری برای هر سلول یا منطقه در صحنه محاسبه می‌شود. این مجموعه رؤیت‌پذیری حاوی لیستی از تمام اشیائی است که از آن سلول قابل مشاهده هستند. در زمان اجرا، الگوریتم مکان فعلی دوربین را تعیین کرده و مجموعه رؤیت‌پذیری مربوطه را بازیابی می‌کند. فقط اشیاء موجود در مجموعه رؤیت‌پذیری رندر می‌شوند.

مزایا:

• سریع و کارآمد در زمان اجرا.
• بسیار مؤثر برای صحنه‌های استاتیک.

معایب:

• نیاز به یک مرحله پیش‌پردازش طولانی دارد.
• برای صحنه‌های پویا مناسب نیست.
• می‌تواند مقدار قابل توجهی حافظه برای ذخیره مجموعه‌های رؤیت‌پذیری مصرف کند.

مثال: PVS در توسعه بازی

بسیاری از بازی‌های ویدیویی قدیمی از PVS برای بهینه‌سازی عملکرد رندر در مراحلی با محیط‌های استاتیک استفاده می‌کردند. مجموعه‌های رؤیت‌پذیری در طول فرآیند طراحی مرحله از پیش محاسبه شده و به‌عنوان بخشی از داده‌های بازی ذخیره می‌شدند.

ملاحظات برای کاربردهای جهانی

هنگام توسعه برنامه‌های WebGL برای مخاطبان جهانی، توجه به موارد زیر مهم است:

• شرایط شبکه متغیر: کاربران در نقاط مختلف جهان ممکن است سرعت اتصال اینترنت بسیار متفاوتی داشته باشند. بارگذاری دارایی‌ها را بهینه کرده و مقدار داده‌ای را که باید از طریق شبکه منتقل شود، به حداقل برسانید.
• قابلیت‌های دستگاه: اطمینان حاصل کنید که برنامه شما با طیف گسترده‌ای از دستگاه‌ها، از رایانه‌های شخصی گیمینگ پیشرفته تا دستگاه‌های موبایل کم‌مصرف، سازگار است. از تکنیک‌های رندر تطبیقی برای تنظیم کیفیت رندر بر اساس قابلیت‌های دستگاه استفاده کنید.
• بومی‌سازی: متن و سایر دارایی‌های برنامه خود را برای پشتیبانی از زبان‌های مختلف بومی‌سازی کنید. استفاده از یک شبکه تحویل محتوا (CDN) را برای ارائه دارایی‌های بومی‌سازی شده از سرورهایی که از نظر جغرافیایی به کاربر نزدیک هستند، در نظر بگیرید.
• دسترس‌پذیری: برنامه خود را طوری طراحی کنید که برای کاربران دارای معلولیت قابل دسترس باشد. متن جایگزین برای تصاویر ارائه دهید، از ناوبری با صفحه‌کلید استفاده کنید و اطمینان حاصل کنید که برنامه شما با صفحه‌خوان‌ها سازگار است.

بهینه‌سازی حذف انسدادی برای WebGL

در اینجا چند نکته کلی برای بهینه‌سازی حذف انسدادی در WebGL آورده شده است:

• استفاده از هندسه ساده‌شده: برای حذف انسدادی از هندسه ساده‌شده استفاده کنید. به جای رندر کردن شیء کامل، از یک جعبه مرزی یا کره مرزی استفاده کنید.
• ترکیب حذف انسدادی با حذف مخروط دید: قبل از حذف انسدادی، حذف مخروط دید را انجام دهید تا اشیائی که کاملاً خارج از دید هستند، حذف شوند.
• استفاده از پرس‌وجوهای ناهمزمان: برای جلوگیری از توقف GPU از پرس‌وجوهای انسداد ناهمزمان استفاده کنید.
• پروفایل کردن برنامه: از ابزارهای پروفایل‌سازی WebGL برای شناسایی تنگناهای عملکرد و بهینه‌سازی کد خود استفاده کنید.
• تعادل بین دقت و عملکرد: یک تکنیک حذف انسدادی را انتخاب کنید که تعادلی بین دقت و عملکرد ایجاد کند. در برخی موارد، ممکن است بهتر باشد چند شیء اضافی را رندر کنید تا اینکه زمان زیادی را صرف حذف انسدادی کنید.

فراتر از اصول اولیه: تکنیک‌های پیشرفته

علاوه بر تکنیک‌های اصلی مورد بحث در بالا، چندین استراتژی پیشرفته وجود دارد که می‌توانند بهینه‌سازی رؤیت‌پذیری را در WebGL بیشتر بهبود بخشند:

۱. رسترایزاسیون محافظه‌کارانه (Conservative Rasterization)

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

۲. بافر رؤیت‌پذیری (Visibility Buffer - ViBu)

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

۳. رندر مبتنی بر GPU (GPU Driven Rendering)

رندر مبتنی بر GPU بخش بیشتری از حجم کار رندر را از CPU به GPU منتقل می‌کند. این می‌تواند به‌ویژه برای حذف انسدادی مفید باشد، زیرا به GPU اجازه می‌دهد تا تعیین رؤیت‌پذیری را به‌موازات سایر وظایف رندر انجام دهد.

مثال‌های دنیای واقعی

بیایید چند مثال از نحوه استفاده از حذف انسدادی در برنامه‌های WebGL دنیای واقعی را در نظر بگیریم:

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

آینده حذف انسدادی در WebGL

با ادامه تکامل WebGL، می‌توان انتظار داشت که پیشرفت‌های بیشتری در تکنیک‌های حذف انسدادی مشاهده کنیم. در اینجا برخی از زمینه‌های بالقوه توسعه آینده آورده شده است:

• شتاب‌دهی سخت‌افزاری: نسخه‌های آینده WebGL ممکن است شتاب‌دهی سخت‌افزاری برای حذف انسدادی فراهم کنند و آن را کارآمدتر سازند.
• حذف انسدادی مبتنی بر هوش مصنوعی: تکنیک‌های یادگیری ماشین می‌توانند برای پیش‌بینی رؤیت‌پذیری و بهینه‌سازی تصمیمات حذف انسدادی استفاده شوند.
• ادغام با WebGPU: WebGPU، جانشین WebGL، برای ارائه دسترسی سطح پایین‌تر به سخت‌افزار GPU طراحی شده است که می‌تواند تکنیک‌های حذف انسدادی پیچیده‌تری را امکان‌پذیر سازد.

نتیجه‌گیری

حذف انسدادی یک تکنیک قدرتمند برای بهینه‌سازی عملکرد رندر در برنامه‌های WebGL است. با حذف اشیائی که برای کاربر قابل مشاهده نیستند، حذف انسدادی می‌تواند تعداد فراخوانی‌های ترسیم را به‌طور قابل توجهی کاهش داده و نرخ فریم را بهبود بخشد. هنگام توسعه برنامه‌های WebGL برای مخاطبان جهانی، مهم است که محدودیت‌های محیط مرورگر، قابلیت‌های سخت‌افزاری متنوع دستگاه‌های مختلف و تأثیر تأخیر شبکه را در نظر بگیرید. با انتخاب دقیق تکنیک‌های حذف انسدادی مناسب و بهینه‌سازی کد خود، می‌توانید تجربه‌ای روان و پاسخگو را به کاربران در سراسر جهان ارائه دهید.

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