إضاءة WebGL المؤجلة المجمعة: الإدارة المتقدمة للإضاءة

في عالم الرسوميات ثلاثية الأبعاد في الزمن الحقيقي، تلعب الإضاءة دورًا محوريًا في إنشاء مشاهد واقعية وجذابة بصريًا. في حين أن أساليب التصيير المباشر التقليدية يمكن أن تصبح مكلفة حسابيًا مع وجود عدد كبير من مصادر الضوء، يقدم التصيير المؤجل بديلاً مقنعًا. وتأخذ الإضاءة المؤجلة المجمعة هذه الخطوة إلى أبعد من ذلك، حيث توفر حلاً فعالاً وقابلاً للتطوير لإدارة سيناريوهات الإضاءة المعقدة في تطبيقات WebGL.

فهم التصيير المؤجل

قبل الخوض في الإضاءة المؤجلة المجمعة، من الضروري فهم المبادئ الأساسية للتصيير المؤجل. على عكس التصيير المباشر، الذي يحسب الإضاءة لكل جزء (بكسل) أثناء تنقيطه، يفصل التصيير المؤجل بين تمريرات الهندسة والإضاءة. إليك التفصيل:

1. تمريرة الهندسة (إنشاء المخزن المؤقت G-Buffer): في التمريرة الأولى، يتم تصيير هندسة المشهد إلى أهداف تصيير متعددة، تُعرف مجتمعة باسم المخزن المؤقت G-buffer. يخزن هذا المخزن عادةً معلومات مثل:
   • العمق: المسافة من الكاميرا إلى السطح.
   • العموديات (Normals): اتجاه السطح.
   • البياض (Albedo): اللون الأساسي للسطح.
   • الانعكاس المرآوي (Specular): لون وشدة الانعكاس المرآوي.
2. تمريرة الإضاءة: في التمريرة الثانية، يتم استخدام المخزن المؤقت G-buffer لحساب مساهمة الإضاءة لكل بكسل. وهذا يسمح لنا بتأجيل حسابات الإضاءة المكلفة حتى تتوفر لدينا جميع معلومات السطح الضرورية.

يقدم التصيير المؤجل العديد من المزايا:

• تقليل الرسم الزائد: يتم إجراء حسابات الإضاءة مرة واحدة فقط لكل بكسل، بغض النظر عن عدد مصادر الضوء التي تؤثر عليه.
• تبسيط حسابات الإضاءة: جميع معلومات السطح الضرورية متاحة بسهولة في المخزن المؤقت G-buffer، مما يبسط معادلات الإضاءة.
• فصل الهندسة عن الإضاءة: يسمح هذا بخطوط أنابيب تصيير أكثر مرونة ووحداتية.

ومع ذلك، لا يزال التصيير المؤجل القياسي يواجه تحديات عند التعامل مع عدد كبير جدًا من مصادر الضوء. وهنا يأتي دور الإضاءة المؤجلة المجمعة.

تقديم الإضاءة المؤجلة المجمعة

الإضاءة المؤجلة المجمعة هي تقنية تحسين تهدف إلى تحسين أداء التصيير المؤجل، خاصة في المشاهد التي تحتوي على العديد من مصادر الضوء. الفكرة الأساسية هي تقسيم مخروط العرض (view frustum) إلى شبكة من المجموعات ثلاثية الأبعاد وتعيين الأضواء لهذه المجموعات بناءً على موقعها المكاني. وهذا يسمح لنا بتحديد الأضواء التي تؤثر على كل بكسل بكفاءة أثناء تمريرة الإضاءة.

كيف تعمل الإضاءة المؤجلة المجمعة

1. تقسيم مخروط العرض: يتم تقسيم مخروط العرض إلى شبكة ثلاثية الأبعاد من المجموعات. تحدد أبعاد هذه الشبكة (على سبيل المثال، 16x9x16) دقة التجميع.
2. تعيين الأضواء: يتم تعيين كل مصدر ضوء للمجموعات التي يتقاطع معها. يمكن القيام بذلك عن طريق فحص حجم إحاطة الضوء مقابل حدود المجموعة.
3. إنشاء قائمة أضواء المجموعة: لكل مجموعة، يتم إنشاء قائمة بالأضواء التي تؤثر عليها. يمكن تخزين هذه القائمة في مخزن مؤقت أو نسيج.
4. تمريرة الإضاءة: أثناء تمريرة الإضاءة، لكل بكسل، نحدد المجموعة التي ينتمي إليها ثم نكرر على الأضواء الموجودة في قائمة أضواء تلك المجموعة. هذا يقلل بشكل كبير من عدد الأضواء التي يجب أخذها في الاعتبار لكل بكسل.

فوائد الإضاءة المؤجلة المجمعة

• تحسين الأداء: عن طريق تقليل عدد الأضواء التي يتم النظر فيها لكل بكسل، يمكن للإضاءة المؤجلة المجمعة تحسين أداء التصيير بشكل كبير، خاصة في المشاهد التي تحتوي على عدد كبير من مصادر الضوء.
• قابلية التوسع: تصبح مكاسب الأداء أكثر وضوحًا مع زيادة عدد مصادر الضوء، مما يجعلها حلاً قابلاً للتطوير لسيناريوهات الإضاءة المعقدة.
• تقليل الرسم الزائد: على غرار التصيير المؤجل القياسي، تقلل الإضاءة المؤجلة المجمعة من الرسم الزائد عن طريق إجراء حسابات الإضاءة مرة واحدة فقط لكل بكسل.

تنفيذ الإضاءة المؤجلة المجمعة في WebGL

يتضمن تنفيذ الإضاءة المؤجلة المجمعة في WebGL عدة خطوات. إليك نظرة عامة عالية المستوى على العملية:

1. إنشاء المخزن المؤقت G-Buffer: قم بإنشاء أنسجة G-buffer لتخزين معلومات السطح الضرورية (العمق، العموديات، البياض، الانعكاس المرآوي). يتضمن هذا عادةً استخدام أهداف تصيير متعددة (MRT).
2. توليد المجموعات: حدد شبكة المجموعات واحسب حدودها. يمكن القيام بذلك في JavaScript أو مباشرة في المُظلل (shader).
3. تعيين الأضواء (جانب وحدة المعالجة المركزية CPU): كرر على مصادر الضوء وقم بتعيينها إلى المجموعات المناسبة. يتم ذلك عادةً على وحدة المعالجة المركزية لأنه لا يلزم حسابه إلا عند تحرك الأضواء أو تغيرها. ضع في اعتبارك استخدام بنية تسريع مكانية (مثل التسلسل الهرمي لحجم الإحاطة أو الشبكة) لتسريع عملية تعيين الضوء، خاصة مع وجود عدد كبير من الأضواء.
4. إنشاء قائمة أضواء المجموعة (جانب وحدة معالجة الرسومات 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);
}

اعتبارات هامة

• حجم المجموعة: يعد اختيار حجم المجموعة أمرًا بالغ الأهمية. توفر المجموعات الأصغر استبعادًا أفضل ولكنها تزيد من عدد المجموعات والتكلفة العامة لإدارة قوائم أضواء المجموعات. تقلل المجموعات الأكبر من التكلفة العامة ولكنها قد تؤدي إلى أخذ المزيد من الأضواء في الاعتبار لكل بكسل. التجربة هي المفتاح للعثور على حجم المجموعة الأمثل لمشهدك.
• تحسين تعيين الأضواء: يعد تحسين عملية تعيين الأضواء أمرًا ضروريًا للأداء. يمكن أن يؤدي استخدام هياكل البيانات المكانية (مثل التسلسل الهرمي لحجم الإحاطة أو الشبكة) إلى تسريع عملية العثور على المجموعات التي يتقاطع معها الضوء بشكل كبير.
• عرض النطاق الترددي للذاكرة: كن على دراية بعرض النطاق الترددي للذاكرة عند الوصول إلى G-buffer وقوائم أضواء المجموعات. يمكن أن يساعد استخدام تنسيقات النسيج وتقنيات الضغط المناسبة في تقليل استخدام الذاكرة.
• قيود WebGL: قد تفتقر إصدارات WebGL الأقدم إلى ميزات معينة (مثل كائنات مخزن مؤقت للتخزين). ضع في اعتبارك استخدام الامتدادات أو الأساليب البديلة لتخزين قوائم الأضواء. تأكد من أن تنفيذك متوافق مع إصدار WebGL المستهدف.
• أداء الأجهزة المحمولة: يمكن أن تكون الإضاءة المؤجلة المجمعة مكثفة حسابيًا، خاصة على الأجهزة المحمولة. قم بتوصيف الكود الخاص بك بعناية وتحسينه للأداء. ضع في اعتبارك استخدام دقات عرض أقل أو نماذج إضاءة مبسطة على الأجهزة المحمولة.

تقنيات التحسين

يمكن استخدام عدة تقنيات لزيادة تحسين الإضاءة المؤجلة المجمعة في WebGL:

• استبعاد المخروط (Frustum Culling): قبل تعيين الأضواء للمجموعات، قم بإجراء استبعاد المخروط لتجاهل الأضواء التي تقع بالكامل خارج مخروط العرض.
• استبعاد الأوجه الخلفية (Backface Culling): استبعد المثلثات المواجهة للخلف أثناء تمريرة الهندسة لتقليل كمية البيانات المكتوبة إلى G-buffer.
• مستوى التفاصيل (LOD): استخدم مستويات مختلفة من التفاصيل لنماذجك بناءً على بعدها عن الكاميرا. يمكن أن يقلل هذا بشكل كبير من كمية الهندسة التي يجب تصييرها.
• ضغط النسيج: استخدم تقنيات ضغط النسيج (مثل ASTC) لتقليل حجم الأنسجة وتحسين عرض النطاق الترددي للذاكرة.
• تحسين المُظلل (Shader Optimization): قم بتحسين كود المُظلل لتقليل عدد التعليمات وتحسين الأداء. يشمل ذلك تقنيات مثل فك الحلقات، وجدولة التعليمات، وتقليل التفرع.
• الإضاءة المحسوبة مسبقًا: ضع في اعتبارك استخدام تقنيات الإضاءة المحسوبة مسبقًا (مثل خرائط الإضاءة أو التوافقات الكروية) للكائنات الثابتة لتقليل حسابات الإضاءة في الزمن الحقيقي.
• التمثيل الهندسي (Hardware Instancing): إذا كان لديك نسخ متعددة من نفس الكائن، فاستخدم التمثيل الهندسي لتصييرها بكفاءة أكبر.

البدائل والمقايضات

بينما توفر الإضاءة المؤجلة المجمعة مزايا كبيرة، من الضروري النظر في البدائل ومقايضاتها الخاصة:

• التصيير المباشر (Forward Rendering): على الرغم من أنه أقل كفاءة مع العديد من الأضواء، إلا أن التصيير المباشر يمكن أن يكون أبسط في التنفيذ وقد يكون مناسبًا للمشاهد ذات العدد المحدود من مصادر الضوء. كما أنه يسمح بالشفافية بسهولة أكبر.
• التصيير المباشر+ (Forward+ Rendering): يعد التصيير المباشر+ بديلاً للتصيير المؤجل يستخدم مُظللات الحوسبة لإجراء استبعاد الضوء قبل تمريرة التصيير المباشر. يمكن أن يوفر هذا فوائد أداء مماثلة للإضاءة المؤجلة المجمعة. قد يكون تنفيذه أكثر تعقيدًا، وقد يتطلب ميزات أجهزة معينة.
• الإضاءة المؤجلة المربعة (Tiled Deferred Lighting): تقسم الإضاءة المؤجلة المربعة الشاشة إلى مربعات ثنائية الأبعاد بدلاً من مجموعات ثلاثية الأبعاد. يمكن أن يكون هذا أبسط في التنفيذ من الإضاءة المؤجلة المجمعة، ولكنه قد يكون أقل كفاءة للمشاهد ذات التباين الكبير في العمق.

يعتمد اختيار تقنية التصيير على المتطلبات المحددة لتطبيقك. ضع في اعتبارك عدد مصادر الضوء، وتعقيد المشهد، والأجهزة المستهدفة عند اتخاذ قرارك.

الخاتمة

تعد إضاءة WebGL المؤجلة المجمعة تقنية قوية لإدارة سيناريوهات الإضاءة المعقدة في تطبيقات الرسوميات على الويب. من خلال استبعاد الأضواء بكفاءة وتقليل الرسم الزائد، يمكنها تحسين أداء التصيير وقابلية التوسع بشكل كبير. على الرغم من أن التنفيذ يمكن أن يكون معقدًا، إلا أن الفوائد من حيث الأداء والجودة البصرية تجعلها مسعى جديرًا بالاهتمام للتطبيقات كثيرة المتطلبات مثل الألعاب والمحاكاة والتصورات. يعد النظر بعناية في حجم المجموعة، وتحسين تعيين الأضواء، وعرض النطاق الترددي للذاكرة أمرًا بالغ الأهمية لتحقيق أفضل النتائج.

مع استمرار تطور WebGL وتحسن قدرات الأجهزة، من المرجح أن تصبح الإضاءة المؤجلة المجمعة أداة ذات أهمية متزايدة للمطورين الذين يسعون إلى إنشاء تجارب ثلاثية الأبعاد مذهلة بصريًا وعالية الأداء على الويب.

مصادر إضافية

• مواصفات WebGL: https://www.khronos.org/webgl/
• OpenGL Insights: كتاب يحتوي على فصول حول تقنيات التصيير المتقدمة، بما في ذلك التصيير المؤجل والتظليل المجمع.
• الأوراق البحثية: ابحث عن الأوراق الأكاديمية حول الإضاءة المؤجلة المجمعة والمواضيع ذات الصلة على Google Scholar أو قواعد البيانات المماثلة.