نورپردازی تأخیری خوشه‌ای WebGL: مدیریت پیشرفته روشنایی

در حوزه گرافیک سه‌بعدی بی‌درنگ (real-time)، نورپردازی نقشی محوری در ایجاد صحنه‌های واقع‌گرایانه و جذاب بصری ایفا می‌کند. در حالی که رویکردهای سنتی رندرینگ پیش‌رو (forward rendering) با تعداد زیاد منابع نوری می‌توانند از نظر محاسباتی پرهزینه شوند، رندرینگ تأخیری (deferred rendering) جایگزین جذابی را ارائه می‌دهد. نورپردازی تأخیری خوشه‌ای این ایده را یک گام فراتر می‌برد و راه‌حلی کارآمد و مقیاس‌پذیر برای مدیریت سناریوهای پیچیده نورپردازی در برنامه‌های WebGL فراهم می‌کند.

درک رندرینگ تأخیری

پیش از پرداختن به نورپردازی تأخیری خوشه‌ای، درک اصول اصلی رندرینگ تأخیری بسیار مهم است. برخلاف رندرینگ پیش‌رو که نورپردازی را برای هر فرگمنت (پیکسل) در حین رستر شدن محاسبه می‌کند، رندرینگ تأخیری مراحل هندسه و نورپردازی را از هم جدا می‌کند. در ادامه یک تحلیل ارائه شده است:

1. مرحله هندسه (ایجاد G-Buffer): در مرحله اول، هندسه صحنه در چندین هدف رندر (render target) که مجموعاً به عنوان G-buffer شناخته می‌شوند، رندر می‌شود. این بافر معمولاً اطلاعاتی مانند موارد زیر را ذخیره می‌کند:
   • عمق: فاصله از دوربین تا سطح.
   • نرمال‌ها: جهت‌گیری سطح.
   • آلبیدو: رنگ پایه سطح.
   • اسپکیولار: رنگ و شدت هایلایت براق.
2. مرحله نورپردازی: در مرحله دوم، از G-buffer برای محاسبه سهم نورپردازی برای هر پیکسل استفاده می‌شود. این امر به ما امکان می‌دهد محاسبات پرهزینه نورپردازی را تا زمانی که تمام اطلاعات سطح لازم را در اختیار داشته باشیم به تعویق بیندازیم.

رندرینگ تأخیری مزایای متعددی دارد:

• کاهش Overdraw: محاسبات نورپردازی فقط یک بار برای هر پیکسل انجام می‌شود، صرف نظر از تعداد منابع نوری که بر آن تأثیر می‌گذارند.
• ساده‌سازی محاسبات نورپردازی: تمام اطلاعات سطح مورد نیاز به راحتی در G-buffer در دسترس است و معادلات نورپردازی را ساده می‌کند.
• جداسازی هندسه و نورپردازی: این امر امکان ایجاد خطوط لوله رندرینگ انعطاف‌پذیرتر و ماژولارتر را فراهم می‌کند.

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

معرفی نورپردازی تأخیری خوشه‌ای

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

نورپردازی تأخیری خوشه‌ای چگونه کار می‌کند

1. تقسیم‌بندی حجم دید: حجم دید به یک شبکه سه‌بعدی از خوشه‌ها تقسیم می‌شود. ابعاد این شبکه (به عنوان مثال، 16x9x16) دانه‌بندی (granularity) خوشه‌بندی را تعیین می‌کند.
2. تخصیص نور: هر منبع نور به خوشه‌هایی که با آنها تلاقی دارد، اختصاص داده می‌شود. این کار را می‌توان با بررسی حجم محدودکننده (bounding volume) نور در برابر مرزهای خوشه انجام داد.
3. ایجاد لیست نور خوشه: برای هر خوشه، لیستی از نورهایی که بر آن تأثیر می‌گذارند ایجاد می‌شود. این لیست می‌تواند در یک بافر یا تکسچر ذخیره شود.
4. مرحله نورپردازی: در طول مرحله نورپردازی، برای هر پیکسل، تعیین می‌کنیم که به کدام خوشه تعلق دارد و سپس روی نورهای موجود در لیست نور آن خوشه تکرار می‌کنیم. این کار به طور قابل توجهی تعداد نورهایی را که باید برای هر پیکسل در نظر گرفته شوند، کاهش می‌دهد.

مزایای نورپردازی تأخیری خوشه‌ای

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

پیاده‌سازی نورپردازی تأخیری خوشه‌ای در WebGL

پیاده‌سازی نورپردازی تأخیری خوشه‌ای در WebGL شامل چندین مرحله است. در اینجا یک نمای کلی از فرآیند ارائه شده است:

1. ایجاد G-Buffer: تکسچرهای G-buffer را برای ذخیره اطلاعات سطح لازم (عمق، نرمال‌ها، آلبیدو، اسپکیولار) ایجاد کنید. این کار معمولاً شامل استفاده از چندین هدف رندر (MRT) است.
2. تولید خوشه: شبکه خوشه را تعریف کرده و مرزهای خوشه را محاسبه کنید. این کار را می‌توان در جاوا اسکریپت یا مستقیماً در شیدر انجام داد.
3. تخصیص نور (سمت CPU): روی منابع نوری تکرار کرده و آنها را به خوشه‌های مناسب اختصاص دهید. این کار معمولاً روی CPU انجام می‌شود زیرا فقط زمانی که نورها حرکت می‌کنند یا تغییر می‌کنند نیاز به محاسبه مجدد دارد. برای سرعت بخشیدن به فرآیند تخصیص نور، به ویژه با تعداد زیاد نورها، استفاده از یک ساختار شتاب‌دهنده فضایی (مانند سلسله مراتب حجم محدودکننده یا یک شبکه) را در نظر بگیرید.
4. ایجاد لیست نور خوشه (سمت GPU): یک بافر یا تکسچر برای ذخیره لیست‌های نور برای هر خوشه ایجاد کنید. شاخص‌های نوری که به هر خوشه اختصاص داده شده‌اند را از CPU به GPU منتقل کنید. این کار را می‌توان با استفاده از یک شیء بافر تکسچر (TBO) یا یک شیء بافر ذخیره‌سازی (SBO)، بسته به نسخه WebGL و افزونه‌های موجود، انجام داد.
5. مرحله نورپردازی (سمت GPU): شیدر مرحله نورپردازی را پیاده‌سازی کنید که از G-buffer می‌خواند، خوشه را برای هر پیکسل تعیین می‌کند و برای محاسبه رنگ نهایی، روی نورهای موجود در لیست نور خوشه تکرار می‌کند.

نمونه‌های کد (GLSL)

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

شیدر فرگمنت G-Buffer

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // رنگ اسپکیولار و میزان درخشندگی نمونه
}

شیدر فرگمنت مرحله نورپردازی

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 //مثال، باید تعریف شده و سازگار باشد

// تابعی برای بازسازی موقعیت جهانی از عمق و مختصات صفحه
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// تابعی برای محاسبه شاخص خوشه بر اساس موقعیت جهانی
int calculateClusterIndex(vec3 worldPosition) {
    // تبدیل موقعیت جهانی به فضای دید
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // محاسبه مختصات نرمال شده دستگاه (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //تقسیم پرسپکتیو

    //تبدیل به محدوده [0, 1]
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // محدود کردن برای جلوگیری از دسترسی خارج از محدوده
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // محاسبه شاخص خوشه
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // محاسبه شاخص یک‌بعدی
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // شدت براق ساده شده


  // بازسازی موقعیت جهانی از عمق
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // محاسبه شاخص خوشه
  int clusterIndex = calculateClusterIndex(worldPosition);

  // تعیین شاخص‌های شروع و پایان لیست نور برای این خوشه
    int lightListOffset = clusterIndex * 2; // با فرض اینکه هر خوشه شاخص‌های شروع و پایان را ذخیره می‌کند
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //نرمال‌سازی شاخص‌های نور به محدوده [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // انباشت سهم نورپردازی
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // بررسی ایمنی برای جلوگیری از دسترسی خارج از محدوده

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        //نورپردازی پخشی ساده
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //نورپردازی براق ساده
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // تضعیف ساده


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

ملاحظات مهم

• اندازه خوشه: انتخاب اندازه خوشه بسیار مهم است. خوشه‌های کوچکتر حذف (culling) بهتری را فراهم می‌کنند اما تعداد خوشه‌ها و سربار مدیریت لیست‌های نور خوشه را افزایش می‌دهند. خوشه‌های بزرگتر سربار را کاهش می‌دهند اما ممکن است منجر به در نظر گرفتن نورهای بیشتری برای هر پیکسل شوند. آزمایش برای یافتن اندازه خوشه بهینه برای صحنه شما کلیدی است.
• بهینه‌سازی تخصیص نور: بهینه‌سازی فرآیند تخصیص نور برای عملکرد ضروری است. استفاده از ساختارهای داده فضایی (مانند سلسله مراتب حجم محدودکننده یا یک شبکه) می‌تواند به طور قابل توجهی فرآیند یافتن خوشه‌هایی که یک نور با آنها تلاقی دارد را سرعت بخشد.
• پهنای باند حافظه: هنگام دسترسی به G-buffer و لیست‌های نور خوشه، به پهنای باند حافظه توجه داشته باشید. استفاده از فرمت‌های تکسچر مناسب و تکنیک‌های فشرده‌سازی می‌تواند به کاهش مصرف حافظه کمک کند.
• محدودیت‌های WebGL: نسخه‌های قدیمی‌تر WebGL ممکن است فاقد ویژگی‌های خاصی (مانند اشیاء بافر ذخیره‌سازی) باشند. استفاده از افزونه‌ها یا رویکردهای جایگزین برای ذخیره لیست‌های نور را در نظر بگیرید. اطمینان حاصل کنید که پیاده‌سازی شما با نسخه WebGL مورد نظر سازگار است.
• عملکرد موبایل: نورپردازی تأخیری خوشه‌ای می‌تواند از نظر محاسباتی سنگین باشد، به ویژه در دستگاه‌های تلفن همراه. کد خود را با دقت پروفایل کرده و برای عملکرد بهینه کنید. استفاده از رزولوشن‌های پایین‌تر یا مدل‌های نورپردازی ساده‌تر را در موبایل در نظر بگیرید.

تکنیک‌های بهینه‌سازی

تکنیک‌های متعددی را می‌توان برای بهینه‌سازی بیشتر نورپردازی تأخیری خوشه‌ای در WebGL به کار گرفت:

• حذف از حجم دید (Frustum Culling): قبل از اختصاص دادن نورها به خوشه‌ها، frustum culling را برای حذف نورهایی که کاملاً خارج از حجم دید قرار دارند، انجام دهید.
• حذف سطوح پشتی (Backface Culling): مثلث‌های پشت به دوربین را در طول مرحله هندسه حذف کنید تا میزان داده‌های نوشته شده در G-buffer کاهش یابد.
• سطح جزئیات (LOD): از سطوح مختلف جزئیات برای مدل‌های خود بر اساس فاصله آنها از دوربین استفاده کنید. این کار می‌تواند به طور قابل توجهی میزان هندسه‌ای که نیاز به رندر شدن دارد را کاهش دهد.
• فشرده‌سازی تکسچر: از تکنیک‌های فشرده‌سازی تکسچر (مانند ASTC) برای کاهش اندازه تکسچرهای خود و بهبود پهنای باند حافظه استفاده کنید.
• بهینه‌سازی شیدر: کد شیدر خود را برای کاهش تعداد دستورالعمل‌ها و بهبود عملکرد بهینه کنید. این شامل تکنیک‌هایی مانند باز کردن حلقه (loop unrolling)، زمان‌بندی دستورالعمل‌ها و به حداقل رساندن انشعاب (branching) است.
• نورپردازی از پیش محاسبه شده: استفاده از تکنیک‌های نورپردازی از پیش محاسبه شده (مانند لایت‌مپ‌ها یا هارمونیک‌های کروی) را برای اشیاء ثابت در نظر بگیرید تا محاسبات نورپردازی بی‌درنگ کاهش یابد.
• نمونه‌سازی سخت‌افزاری (Hardware Instancing): اگر چندین نمونه از یک شیء دارید، از نمونه‌سازی سخت‌افزاری برای رندر کردن کارآمدتر آنها استفاده کنید.

جایگزین‌ها و بده‌بستان‌ها

در حالی که نورپردازی تأخیری خوشه‌ای مزایای قابل توجهی دارد، ضروری است که جایگزین‌ها و بده‌بستان‌های مربوط به آنها را در نظر بگیرید:

• رندرینگ پیش‌رو (Forward Rendering): اگرچه با نورهای زیاد کارایی کمتری دارد، پیاده‌سازی رندرینگ پیش‌رو می‌تواند ساده‌تر باشد و ممکن است برای صحنه‌هایی با تعداد محدود منابع نوری مناسب باشد. همچنین امکان مدیریت شفافیت را آسان‌تر فراهم می‌کند.
• رندرینگ +Forward: رندرینگ +Forward جایگزینی برای رندرینگ تأخیری است که از شیدرهای محاسباتی (compute shaders) برای انجام حذف نور قبل از مرحله رندرینگ پیش‌رو استفاده می‌کند. این می‌تواند مزایای عملکردی مشابهی با نورپردازی تأخیری خوشه‌ای ارائه دهد. پیاده‌سازی آن می‌تواند پیچیده‌تر باشد و ممکن است به ویژگی‌های سخت‌افزاری خاصی نیاز داشته باشد.
• نورپردازی تأخیری کاشی‌بندی شده (Tiled Deferred Lighting): نورپردازی تأخیری کاشی‌بندی شده به جای خوشه‌های سه‌بعدی، صفحه را به کاشی‌های دوبعدی تقسیم می‌کند. پیاده‌سازی این روش می‌تواند ساده‌تر از نورپردازی تأخیری خوشه‌ای باشد، اما ممکن است برای صحنه‌هایی با تنوع عمق زیاد، کارایی کمتری داشته باشد.

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

نتیجه‌گیری

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

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

منابع بیشتر

• مشخصات WebGL: https://www.khronos.org/webgl/
• بینش‌های OpenGL: کتابی با فصل‌هایی در مورد تکنیک‌های پیشرفته رندرینگ، از جمله رندرینگ تأخیری و سایه‌زنی خوشه‌ای.
• مقالات پژوهشی: برای مقالات دانشگاهی در مورد نورپردازی تأخیری خوشه‌ای و موضوعات مرتبط در Google Scholar یا پایگاه‌های داده مشابه جستجو کنید.