WebGL 클러스터드 디퍼드 라이팅: 고급 조명 관리

실시간 3D 그래픽스 영역에서 조명은 사실적이고 시각적으로 매력적인 장면을 만드는 데 중요한 역할을 합니다. 기존의 포워드 렌더링 방식은 많은 수의 광원이 있을 때 계산 비용이 많이 들 수 있지만, 디퍼드 렌더링은 매력적인 대안을 제공합니다. 클러스터드 디퍼드 라이팅은 여기서 한 걸음 더 나아가, WebGL 애플리케이션에서 복잡한 조명 시나리오를 관리하기 위한 효율적이고 확장 가능한 솔루션을 제공합니다.

디퍼드 렌더링 이해하기

클러스터드 디퍼드 라이팅에 뛰어들기 전에 디퍼드 렌더링의 핵심 원리를 이해하는 것이 중요합니다. 래스터화되는 각 프래그먼트(픽셀)에 대해 조명을 계산하는 포워드 렌더링과 달리, 디퍼드 렌더링은 지오메트리 패스와 조명 패스를 분리합니다. 자세한 내용은 다음과 같습니다.

1. 지오메트리 패스 (G-버퍼 생성): 첫 번째 패스에서는 장면의 지오메트리가 G-버퍼로 알려진 여러 렌더 타겟에 렌더링됩니다. 이 버퍼는 일반적으로 다음과 같은 정보를 저장합니다:
   • 깊이: 카메라에서 표면까지의 거리.
   • 법선: 표면 방향.
   • 알베도: 표면의 기본 색상.
   • 반사: 반사 하이라이트 색상 및 강도.
2. 조명 패스: 두 번째 패스에서는 G-버퍼를 사용하여 각 픽셀에 대한 조명 기여도를 계산합니다. 이를 통해 필요한 모든 표면 정보를 확보할 때까지 비용이 많이 드는 조명 계산을 연기할 수 있습니다.

디퍼드 렌더링은 몇 가지 장점을 제공합니다:

• 오버드로우 감소: 조명 계산은 픽셀당 한 번만 수행되며, 영향을 미치는 광원의 수와 관계없이 동일합니다.
• 간소화된 조명 계산: 필요한 모든 표면 정보가 G-버퍼에 미리 준비되어 있어 조명 방정식을 단순화합니다.
• 분리된 지오메트리 및 조명: 이는 더욱 유연하고 모듈화된 렌더링 파이프라인을 가능하게 합니다.

하지만 표준 디퍼드 렌더링은 매우 많은 수의 광원을 처리할 때 여전히 어려움에 직면할 수 있습니다. 바로 이 지점에서 클러스터드 디퍼드 라이팅이 등장합니다.

클러스터드 디퍼드 라이팅 소개

클러스터드 디퍼드 라이팅은 특히 많은 광원이 있는 장면에서 디퍼드 렌더링의 성능을 향상시키는 것을 목표로 하는 최적화 기법입니다. 핵심 아이디어는 뷰 절두체를 3D 클러스터 그리드로 나누고, 광원의 공간적 위치에 따라 해당 클러스터에 광원을 할당하는 것입니다. 이를 통해 조명 패스 동안 어떤 광원이 어떤 픽셀에 영향을 미치는지 효율적으로 결정할 수 있습니다.

클러스터드 디퍼드 라이팅 작동 방식

1. 뷰 절두체 분할: 뷰 절두체는 3D 클러스터 그리드로 나뉩니다. 이 그리드의 차원(예: 16x9x16)은 클러스터링의 세분성을 결정합니다.
2. 광원 할당: 각 광원은 자신이 교차하는 클러스터에 할당됩니다. 이는 광원의 바운딩 볼륨을 클러스터 경계와 비교하여 수행할 수 있습니다.
3. 클러스터 광원 목록 생성: 각 클러스터에 대해 해당 클러스터에 영향을 미치는 광원 목록이 생성됩니다. 이 목록은 버퍼 또는 텍스처에 저장될 수 있습니다.
4. 조명 패스: 조명 패스 동안 각 픽셀에 대해 해당 픽셀이 속한 클러스터를 결정한 다음, 해당 클러스터의 광원 목록에 있는 광원들을 반복합니다. 이는 각 픽셀에 대해 고려해야 하는 광원의 수를 크게 줄여줍니다.

클러스터드 디퍼드 라이팅의 이점

• 향상된 성능: 픽셀당 고려되는 광원의 수를 줄임으로써, 클러스터드 디퍼드 라이팅은 특히 많은 수의 광원이 있는 장면에서 렌더링 성능을 크게 향상시킬 수 있습니다.
• 확장성: 광원 수가 증가할수록 성능 향상이 더욱 두드러지므로, 복잡한 조명 시나리오를 위한 확장 가능한 솔루션이 됩니다.
• 오버드로우 감소: 표준 디퍼드 렌더링과 유사하게, 클러스터드 디퍼드 라이팅은 픽셀당 한 번만 조명 계산을 수행하여 오버드로우를 줄입니다.

WebGL에서 클러스터드 디퍼드 라이팅 구현하기

WebGL에서 클러스터드 디퍼드 라이팅을 구현하는 데는 몇 가지 단계가 포함됩니다. 다음은 프로세스에 대한 개요입니다:

1. G-버퍼 생성: 필요한 표면 정보(깊이, 법선, 알베도, 반사)를 저장하기 위한 G-버퍼 텍스처를 생성합니다. 이는 일반적으로 다중 렌더 타겟(MRT)을 사용합니다.
2. 클러스터 생성: 클러스터 그리드를 정의하고 클러스터 경계를 계산합니다. 이는 JavaScript 또는 셰이더에서 직접 수행할 수 있습니다.
3. 광원 할당 (CPU 측): 광원들을 반복하여 적절한 클러스터에 할당합니다. 이는 광원이 이동하거나 변경될 때만 계산하면 되므로 일반적으로 CPU에서 수행됩니다. 특히 많은 수의 광원이 있는 경우, 광원 할당 프로세스를 가속화하기 위해 공간 가속 구조(예: 바운딩 볼륨 계층 구조 또는 그리드)를 사용하는 것을 고려하십시오.
4. 클러스터 광원 목록 생성 (GPU 측): 각 클러스터에 대한 광원 목록을 저장할 버퍼 또는 텍스처를 생성합니다. 각 클러스터에 할당된 광원 인덱스를 CPU에서 GPU로 전송합니다. 이는 WebGL 버전 및 사용 가능한 확장에 따라 텍스처 버퍼 객체(TBO) 또는 스토리지 버퍼 객체(SBO)를 사용하여 달성할 수 있습니다.
5. 조명 패스 (GPU 측): G-버퍼에서 읽고, 각 픽셀에 대한 클러스터를 결정하고, 해당 클러스터의 광원 목록에 있는 광원들을 반복하여 최종 색상을 계산하는 조명 패스 셰이더를 구현합니다.

코드 예제 (GLSL)

다음은 구현의 핵심 부분을 보여주는 코드 스니펫입니다. 참고: 이들은 단순화된 예제이며 특정 요구 사항에 따라 조정이 필요할 수 있습니다.

G-버퍼 프래그먼트 셰이더

#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); // Example specular color and shininess
}

조명 패스 프래그먼트 셰이더

#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 //Example, needs to be defined and consistent

// Function to reconstruct world position from depth and screen coordinates
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;
}

// Function to calculate cluster index based on world position
int calculateClusterIndex(vec3 worldPosition) {
    // Transform world position to view space
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Calculate normalized device coordinates (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspective divide

    //Transform to [0, 1] range
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Clamp to avoid out-of-bounds access
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Calculate the cluster index
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Calculate the 1D index
    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; // simplified specular intensity


  // Reconstruct world position from depth
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Calculate cluster index
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Determine the start and end indices of the light list for this cluster
    int lightListOffset = clusterIndex * 2; // Assuming each cluster stores start and end indices
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalize light indices to [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Accumulate lighting contributions
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Safety check to prevent out-of-bounds access

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

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

        //Simple Diffuse Lighting
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Simple Specular Lighting
        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); // Simple attenuation


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

  outColor = vec4(finalColor, 1.0);
}

중요 고려 사항

• 클러스터 크기: 클러스터 크기 선택은 매우 중요합니다. 클러스터가 작을수록 컬링은 더 잘되지만 클러스터 수가 증가하고 클러스터 광원 목록 관리 오버헤드가 커집니다. 클러스터가 클수록 오버헤드는 줄어들지만 픽셀당 더 많은 광원을 고려해야 할 수 있습니다. 장면의 최적 클러스터 크기를 찾기 위한 실험이 중요합니다.
• 광원 할당 최적화: 광원 할당 프로세스 최적화는 성능에 필수적입니다. 공간 데이터 구조(예: 바운딩 볼륨 계층 구조 또는 그리드)를 사용하면 광원이 교차하는 클러스터를 찾는 프로세스를 크게 가속화할 수 있습니다.
• 메모리 대역폭: G-버퍼 및 클러스터 광원 목록에 접근할 때 메모리 대역폭에 유의하십시오. 적절한 텍스처 형식과 압축 기술을 사용하면 메모리 사용량을 줄이는 데 도움이 될 수 있습니다.
• WebGL 제한 사항: 이전 WebGL 버전은 특정 기능(예: 스토리지 버퍼 객체)이 부족할 수 있습니다. 광원 목록을 저장하기 위해 확장 기능 또는 대체 접근 방식을 사용하는 것을 고려하십시오. 구현이 대상 WebGL 버전과 호환되는지 확인하십시오.
• 모바일 성능: 클러스터드 디퍼드 라이팅은 특히 모바일 장치에서 계산 집약적일 수 있습니다. 코드를 신중하게 프로파일링하고 성능을 최적화하십시오. 모바일에서는 낮은 해상도 또는 단순화된 조명 모델을 사용하는 것을 고려하십시오.

최적화 기법

WebGL에서 클러스터드 디퍼드 라이팅을 추가로 최적화하기 위해 여러 기술을 사용할 수 있습니다:

• 시야 절두체 컬링: 광원을 클러스터에 할당하기 전에 시야 절두체 컬링을 수행하여 시야 절두체 밖에 완전히 있는 광원을 제거합니다.
• 뒷면 컬링: 지오메트리 패스 동안 뒷면 삼각형을 컬링하여 G-버퍼에 기록되는 데이터 양을 줄입니다.
• 세부 수준 (LOD): 카메라와의 거리에 따라 모델에 다른 세부 수준을 사용합니다. 이는 렌더링해야 하는 지오메트리 양을 크게 줄일 수 있습니다.
• 텍스처 압축: 텍스처 압축 기술(예: ASTC)을 사용하여 텍스처 크기를 줄이고 메모리 대역폭을 향상시킵니다.
• 셰이더 최적화: 셰이더 코드를 최적화하여 명령어 수를 줄이고 성능을 향상시킵니다. 여기에는 루프 언롤링, 명령어 스케줄링, 분기 최소화와 같은 기술이 포함됩니다.
• 사전 계산된 조명: 정적 객체의 경우 실시간 조명 계산을 줄이기 위해 사전 계산된 조명 기술(예: 라이트맵 또는 구면 고조파)을 사용하는 것을 고려하십시오.
• 하드웨어 인스턴싱: 동일한 객체의 여러 인스턴스가 있는 경우 하드웨어 인스턴싱을 사용하여 더 효율적으로 렌더링하십시오.

대안 및 장단점

클러스터드 디퍼드 라이팅이 상당한 이점을 제공하지만, 대안과 각각의 장단점을 고려하는 것이 중요합니다:

• 포워드 렌더링: 많은 광원에는 덜 효율적이지만, 포워드 렌더링은 구현하기 더 간단하며 광원 수가 제한적인 장면에 적합할 수 있습니다. 또한 투명도를 더 쉽게 구현할 수 있습니다.
• 포워드+ 렌더링: 포워드+ 렌더링은 디퍼드 렌더링의 대안으로, 포워드 렌더링 패스 전에 컴퓨트 셰이더를 사용하여 광원 컬링을 수행합니다. 이는 클러스터드 디퍼드 라이팅과 유사한 성능 이점을 제공할 수 있습니다. 구현하기 더 복잡할 수 있으며 특정 하드웨어 기능이 필요할 수 있습니다.
• 타일드 디퍼드 라이팅: 타일드 디퍼드 라이팅은 3D 클러스터 대신 화면을 2D 타일로 나눕니다. 이는 클러스터드 디퍼드 라이팅보다 구현하기 더 간단할 수 있지만, 깊이 변화가 큰 장면에서는 효율성이 떨어질 수 있습니다.

렌더링 기법의 선택은 애플리케이션의 특정 요구 사항에 따라 달라집니다. 결정을 내릴 때 광원의 수, 장면의 복잡성 및 대상 하드웨어를 고려하십시오.

결론

WebGL 클러스터드 디퍼드 라이팅은 웹 기반 그래픽 애플리케이션에서 복잡한 조명 시나리오를 관리하기 위한 강력한 기술입니다. 광원을 효율적으로 컬링하고 오버드로우를 줄임으로써 렌더링 성능과 확장성을 크게 향상시킬 수 있습니다. 구현이 복잡할 수 있지만, 성능 및 시각적 품질 측면의 이점은 게임, 시뮬레이션, 시각화와 같은 까다로운 애플리케이션에 유용한 노력이 됩니다. 최적의 결과를 얻으려면 클러스터 크기, 광원 할당 최적화 및 메모리 대역폭을 신중하게 고려하는 것이 중요합니다.

WebGL이 계속 발전하고 하드웨어 기능이 향상됨에 따라, 클러스터드 디퍼드 라이팅은 시각적으로 놀랍고 성능 좋은 웹 기반 3D 경험을 만들고자 하는 개발자들에게 점점 더 중요한 도구가 될 것입니다.

추가 자료

• WebGL 사양: https://www.khronos.org/webgl/
• OpenGL Insights: 디퍼드 렌더링 및 클러스터드 셰이딩을 포함한 고급 렌더링 기술에 대한 챕터가 있는 책입니다.
• 연구 논문: Google Scholar 또는 유사 데이터베이스에서 클러스터드 디퍼드 라이팅 및 관련 주제에 대한 학술 논문을 검색하십시오.