WebGL Kümelenmiş Ertelenmiş Işıklandırma: Gelişmiş Aydınlatma Yönetimi

Gerçek zamanlı 3D grafikler alanında, aydınlatma gerçekçi ve görsel olarak çekici sahneler oluşturmada çok önemli bir rol oynar. Geleneksel ileriye dönük işleme (forward rendering) yaklaşımları çok sayıda ışık kaynağı ile hesaplama açısından pahalı hale gelebilirken, ertelenmiş işleme (deferred rendering) cazip bir alternatif sunar. Kümelenmiş ertelenmiş ışıklandırma bunu bir adım öteye taşıyarak WebGL uygulamalarında karmaşık aydınlatma senaryolarını yönetmek için verimli ve ölçeklenebilir bir çözüm sağlar.

Ertelenmiş İşlemeyi Anlamak

Kümelenmiş ertelenmiş ışıklandırmaya dalmadan önce, ertelenmiş işlemenin temel ilkelerini anlamak çok önemlidir. Her bir parçacık (piksel) rasterleştirilirken aydınlatmayı hesaplayan ileriye dönük işlemenin aksine, ertelenmiş işleme geometri ve aydınlatma geçişlerini ayırır. İşte bir döküm:

1. Geometri Geçişi (G-Buffer Oluşturma): İlk geçişte, sahnenin geometrisi topluca G-buffer olarak bilinen çoklu render hedeflerine işlenir. Bu arabellek genellikle şu gibi bilgileri saklar:
   • Derinlik: Kameradan yüzeye olan mesafe.
   • Normaller: Yüzey yönelimi.
   • Albedo: Yüzeyin temel rengi.
   • Speküler: Speküler vurgu rengi ve yoğunluğu.
2. Aydınlatma Geçişi: İkinci geçişte, G-buffer her piksel için aydınlatma katkısını hesaplamak için kullanılır. Bu, gerekli tüm yüzey bilgisine sahip olana kadar pahalı aydınlatma hesaplamalarını ertelememize olanak tanır.

Ertelenmiş işleme birkaç avantaj sunar:

• Azaltılmış Üst Üste Çizim (Overdraw): Aydınlatma hesaplamaları, onu etkileyen ışık kaynaklarının sayısından bağımsız olarak piksel başına yalnızca bir kez yapılır.
• Basitleştirilmiş Aydınlatma Hesaplamaları: Gerekli tüm yüzey bilgileri G-buffer'da hazır bulunur ve aydınlatma denklemlerini basitleştirir.
• Ayrılmış Geometri ve Aydınlatma: Bu, daha esnek ve modüler işleme boru hatlarına olanak tanır.

Ancak, standart ertelenmiş işleme çok sayıda ışık kaynağıyla uğraşırken hala zorluklarla karşılaşabilir. İşte bu noktada kümelenmiş ertelenmiş ışıklandırma devreye girer.

Kümelenmiş Ertelenmiş Işıklandırmaya Giriş

Kümelenmiş ertelenmiş ışıklandırma, özellikle çok sayıda ışık kaynağı olan sahnelerde ertelenmiş işlemenin performansını artırmayı amaçlayan bir optimizasyon tekniğidir. Temel fikir, görüş piramidini (view frustum) 3D kümelerden oluşan bir ızgaraya bölmek ve ışıkları mekansal konumlarına göre bu kümelere atamaktır. Bu, aydınlatma geçişi sırasında hangi ışıkların hangi pikselleri etkilediğini verimli bir şekilde belirlememizi sağlar.

Kümelenmiş Ertelenmiş Işıklandırma Nasıl Çalışır?

1. Görüş Piramidinin Alt Bölümlere Ayrılması: Görüş piramidi, 3D kümelerden oluşan bir ızgaraya bölünür. Bu ızgaranın boyutları (örneğin, 16x9x16) kümelemenin ayrıntı düzeyini belirler.
2. Işık Ataması: Her ışık kaynağı, kesiştiği kümelere atanır. Bu, ışığın sınırlayıcı hacminin (bounding volume) küme sınırlarına göre kontrol edilmesiyle yapılabilir.
3. Küme Işık Listesi Oluşturma: Her küme için, onu etkileyen ışıkların bir listesi oluşturulur. Bu liste bir arabellekte veya dokuda saklanabilir.
4. Aydınlatma Geçişi: Aydınlatma geçişi sırasında, her piksel için hangi kümeye ait olduğunu belirleriz ve ardından o kümenin ışık listesindeki ışıklar üzerinde yineleriz. Bu, her piksel için dikkate alınması gereken ışık sayısını önemli ölçüde azaltır.

Kümelenmiş Ertelenmiş Işıklandırmanın Faydaları

• İyileştirilmiş Performans: Piksel başına dikkate alınan ışık sayısını azaltarak, kümelenmiş ertelenmiş ışıklandırma, özellikle çok sayıda ışık kaynağı olan sahnelerde işleme performansını önemli ölçüde artırabilir.
• Ölçeklenebilirlik: Performans kazanımları, ışık kaynaklarının sayısı arttıkça daha belirgin hale gelir, bu da onu karmaşık aydınlatma senaryoları için ölçeklenebilir bir çözüm haline getirir.
• Azaltılmış Üst Üste Çizim: Standart ertelenmiş işlemeye benzer şekilde, kümelenmiş ertelenmiş ışıklandırma, aydınlatma hesaplamalarını piksel başına yalnızca bir kez gerçekleştirerek üst üste çizimi azaltır.

WebGL'de Kümelenmiş Ertelenmiş Işıklandırma Uygulaması

WebGL'de kümelenmiş ertelenmiş ışıklandırmayı uygulamak birkaç adım içerir. İşte sürecin üst düzey bir özeti:

1. G-Buffer Oluşturma: Gerekli yüzey bilgilerini (derinlik, normaller, albedo, speküler) saklamak için G-buffer dokularını oluşturun. Bu genellikle çoklu render hedefleri (MRT) kullanmayı içerir.
2. Küme Oluşturma: Küme ızgarasını tanımlayın ve küme sınırlarını hesaplayın. Bu, JavaScript'te veya doğrudan shader'da yapılabilir.
3. Işık Ataması (CPU tarafı): Işık kaynakları üzerinde yineleyin ve bunları uygun kümelere atayın. Bu genellikle CPU'da yapılır, çünkü yalnızca ışıklar hareket ettiğinde veya değiştiğinde hesaplanması gerekir. Özellikle çok sayıda ışıkla ışık atama sürecini hızlandırmak için bir mekansal hızlandırma yapısı (örneğin, bir sınırlayıcı hacim hiyerarşisi veya bir ızgara) kullanmayı düşünün.
4. Küme Işık Listesi Oluşturma (GPU tarafı): Her küme için ışık listelerini saklamak üzere bir arabellek veya doku oluşturun. Her kümeye atanan ışık endekslerini CPU'dan GPU'ya aktarın. Bu, WebGL sürümüne ve mevcut eklentilere bağlı olarak bir doku arabellek nesnesi (TBO) veya bir depolama arabellek nesnesi (SBO) kullanılarak gerçekleştirilebilir.
5. Aydınlatma Geçişi (GPU tarafı): G-buffer'dan okuyan, her piksel için kümeyi belirleyen ve son rengi hesaplamak için kümenin ışık listesindeki ışıklar üzerinde yineleyen aydınlatma geçişi shader'ını uygulayın.

Kod Örnekleri (GLSL)

İşte uygulamanın kilit kısımlarını gösteren bazı kod parçacıkları. Not: Bunlar basitleştirilmiş örneklerdir ve özel ihtiyaçlarınıza göre ayarlamalar gerektirebilir.

G-Buffer Parçacık Gölgelendiricisi

#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); // Örnek speküler renk ve parlaklık
}

Aydınlatma Geçişi Parçacık Gölgelendiricisi

#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 //Örnek, tanımlanmalı ve tutarlı olmalıdır

// Derinlik ve ekran koordinatlarından dünya pozisyonunu yeniden oluşturma fonksiyonu
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;
}

// Dünya pozisyonuna göre küme endeksini hesaplama fonksiyonu
int calculateClusterIndex(vec3 worldPosition) {
    // Dünya pozisyonunu görüş uzayına dönüştür
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Normalleştirilmiş cihaz koordinatlarını (NDC) hesapla
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspective divide

    //[0, 1] aralığına dönüştür
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Sınır dışı erişimi önlemek için kelepçele
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Küme endeksini hesapla
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // 1D endeksini hesapla
    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; // basitleştirilmiş speküler yoğunluk


  // Derinlikten dünya pozisyonunu yeniden oluştur
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Küme endeksini hesapla
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Bu küme için ışık listesinin başlangıç ve bitiş endekslerini belirle
    int lightListOffset = clusterIndex * 2; // Her kümenin başlangıç ve bitiş endekslerini sakladığı varsayılıyor
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Işık endekslerini [0, MAX_LIGHTS] aralığına normalleştir
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Aydınlatma katkılarını biriktir
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Sınır dışı erişimi önlemek için güvenlik kontrolü

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

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

        //Basit Dağınık Aydınlatma
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Basit Speküler Aydınlatma
        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); // Basit zayıflama


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

  outColor = vec4(finalColor, 1.0);
}

Önemli Hususlar

• Küme Boyutu: Küme boyutu seçimi çok önemlidir. Daha küçük kümeler daha iyi ayıklama sağlar ancak küme sayısını ve küme ışık listelerini yönetme yükünü artırır. Daha büyük kümeler yükü azaltır ancak piksel başına daha fazla ışığın dikkate alınmasına neden olabilir. Sahneniz için en uygun küme boyutunu bulmak için deneme yapmak anahtardır.
• Işık Atama Optimizasyonu: Işık atama sürecini optimize etmek performans için esastır. Mekansal veri yapıları (örneğin, bir sınırlayıcı hacim hiyerarşisi veya bir ızgara) kullanmak, bir ışığın hangi kümelerle kesiştiğini bulma sürecini önemli ölçüde hızlandırabilir.
• Bellek Bant Genişliği: G-buffer'a ve küme ışık listelerine erişirken bellek bant genişliğine dikkat edin. Uygun doku formatları ve sıkıştırma teknikleri kullanmak bellek kullanımını azaltmaya yardımcı olabilir.
• WebGL Sınırlamaları: Eski WebGL sürümleri belirli özelliklerden (depolama arabellek nesneleri gibi) yoksun olabilir. Işık listelerini saklamak için eklentiler veya alternatif yaklaşımlar kullanmayı düşünün. Uygulamanızın hedef WebGL sürümüyle uyumlu olduğundan emin olun.
• Mobil Performans: Kümelenmiş ertelenmiş ışıklandırma, özellikle mobil cihazlarda hesaplama açısından yoğun olabilir. Kodunuzu dikkatlice profilleyin ve performans için optimize edin. Mobil cihazlarda daha düşük çözünürlükler veya basitleştirilmiş aydınlatma modelleri kullanmayı düşünün.

Optimizasyon Teknikleri

WebGL'de kümelenmiş ertelenmiş ışıklandırmayı daha da optimize etmek için birkaç teknik kullanılabilir:

• Görüş Piramidi Ayıklaması (Frustum Culling): Işıkları kümelere atamadan önce, tamamen görüş piramidinin dışında kalan ışıkları atmak için frustum culling yapın.
• Arka Yüz Ayıklaması (Backface Culling): G-buffer'a yazılan veri miktarını azaltmak için geometri geçişi sırasında arkaya bakan üçgenleri ayıklayın.
• Detay Seviyesi (LOD): Modelleriniz için kameraya olan uzaklıklarına göre farklı detay seviyeleri kullanın. Bu, işlenmesi gereken geometri miktarını önemli ölçüde azaltabilir.
• Doku Sıkıştırma: Dokularınızın boyutunu azaltmak ve bellek bant genişliğini iyileştirmek için doku sıkıştırma teknikleri (örneğin, ASTC) kullanın.
• Shader Optimizasyonu: Komut sayısını azaltmak ve performansı artırmak için shader kodunuzu optimize edin. Bu, döngü açma, komut zamanlama ve dallanmayı en aza indirme gibi teknikleri içerir.
• Önceden Hesaplanmış Aydınlatma: Gerçek zamanlı aydınlatma hesaplamalarını azaltmak için statik nesneler için önceden hesaplanmış aydınlatma teknikleri (örneğin, ışık haritaları veya küresel harmonikler) kullanmayı düşünün.
• Donanım Örneklemesi (Hardware Instancing): Aynı nesnenin birden çok örneğine sahipseniz, bunları daha verimli bir şekilde işlemek için donanım örneklemesi kullanın.

Alternatifler ve Ödünleşimler

Kümelenmiş ertelenmiş ışıklandırma önemli avantajlar sunsa da, alternatifleri ve bunların ilgili ödünleşimlerini dikkate almak esastır:

• İleriye Dönük İşleme (Forward Rendering): Çok sayıda ışıkla daha az verimli olsa da, ileriye dönük işleme uygulaması daha basit olabilir ve sınırlı sayıda ışık kaynağı olan sahneler için uygun olabilir. Ayrıca şeffaflığa daha kolay izin verir.
• İleri+ İşleme (Forward+ Rendering): Forward+ işleme, ileriye dönük işleme geçişinden önce ışık ayıklaması yapmak için hesaplama shader'larını kullanan ertelenmiş işlemeye bir alternatiftir. Bu, kümelenmiş ertelenmiş ışıklandırmaya benzer performans avantajları sunabilir. Uygulaması daha karmaşık olabilir ve belirli donanım özellikleri gerektirebilir.
• Döşemeli Ertelenmiş Işıklandırma (Tiled Deferred Lighting): Döşemeli ertelenmiş ışıklandırma, ekranı 3D kümeler yerine 2D döşemelere böler. Bu, kümelenmiş ertelenmiş ışıklandırmadan daha basit bir uygulamaya sahip olabilir, ancak önemli derinlik varyasyonu olan sahneler için daha az verimli olabilir.

İşleme tekniği seçimi, uygulamanızın özel gereksinimlerine bağlıdır. Kararınızı verirken ışık kaynaklarının sayısını, sahnenin karmaşıklığını ve hedef donanımı göz önünde bulundurun.

Sonuç

WebGL kümelenmiş ertelenmiş ışıklandırma, web tabanlı grafik uygulamalarında karmaşık aydınlatma senaryolarını yönetmek için güçlü bir tekniktir. Işıkları verimli bir şekilde ayıklayarak ve üst üste çizimi azaltarak, işleme performansını ve ölçeklenebilirliği önemli ölçüde artırabilir. Uygulaması karmaşık olabilse de, performans ve görsel kalite açısından sağladığı faydalar, oyunlar, simülasyonlar ve görselleştirmeler gibi zorlu uygulamalar için onu değerli bir çaba haline getirir. En iyi sonuçları elde etmek için küme boyutu, ışık atama optimizasyonu ve bellek bant genişliğinin dikkatlice düşünülmesi çok önemlidir.

WebGL gelişmeye ve donanım yetenekleri iyileşmeye devam ettikçe, kümelenmiş ertelenmiş ışıklandırma, görsel olarak çarpıcı ve performanslı web tabanlı 3D deneyimler yaratmak isteyen geliştiriciler için giderek daha önemli bir araç haline gelecektir.

Ek Kaynaklar

• WebGL Spesifikasyonu: https://www.khronos.org/webgl/
• OpenGL Insights: Ertelenmiş işleme ve kümelenmiş gölgelendirme dahil olmak üzere gelişmiş işleme teknikleri üzerine bölümler içeren bir kitap.
• Araştırma Makaleleri: Google Scholar veya benzeri veritabanlarında kümelenmiş ertelenmiş ışıklandırma ve ilgili konular üzerine akademik makaleler arayın.