2.5 빌보딩

이 튜토리얼에서는 평면 객체가 시야각에 관계없이 항상 뷰어를 향하도록 하는 강력한 렌더링 기술인 빌보딩(billboarding)을 살펴보겠습니다. 이 기술은 게임에서 메타 정보(예: 체력 바) 및 시각화 레이블을 표시하는 것부터 3D 환경에서 복잡한 식물을 시뮬레이션하는 것까지 다양한 응용 분야를 가지고 있습니다.

첫 번째 두 가지 사용 사례에서 빌보딩은 장면 회전에 관계없이 계속 표시되어야 하는 2D 메타 정보를 표시하는 데 사용됩니다. 식물 시나리오의 경우, 기하학적으로 정확한 풀과 나뭇잎을 렌더링하는 것은 복잡성으로 인해 계산 비용이 매우 높습니다. 대신 화면을 향하는 2D 풀 이미지를 렌더링하여 3D 식물의 환상을 만들 수 있습니다. 장면이 회전할 때, 2D 평면의 방향을 동적으로 조정하여 항상 정면을 향하도록 하여 뷰어가 평면의 실제 특성을 인식하지 못하게 합니다.

이 튜토리얼에서는 카메라를 회전하여 회전하는 장면을 보여주고, 배경에는 회전하지 않는 빌보드 텍스처를 배치합니다. 주요 목표는 배경이 카메라를 향하도록 일관되게 유지하는 방법을 배우는 것이며, 이를 통해 변환 및 투영 행렬에 대한 이해를 심화할 수 있는 좋은 기회를 제공합니다.

이 데모의 핵심 개념은 간단합니다. 모든 비-빌보드 요소는 표준 모델 뷰 행렬을 사용하여 렌더링합니다. 빌보드의 경우, 모델 뷰 행렬을 수정하여 변환 구성 요소를 유지하면서 회전 및 스케일링을 제거합니다.

이 효과를 달성하는 핵심 코드는 다음과 같습니다. 자세히 살펴보겠습니다:

let modelViewMatrixBillboard = glMatrix.mat4.fromValues(1, 0, 0, modelViewMatrix[3],
    0, 1, 0, modelViewMatrix[7],
    0, 0, 1, modelViewMatrix[11],
    modelViewMatrix[12], modelViewMatrix[13], modelViewMatrix[14], modelViewMatrix[15]);

모델 뷰 행렬의 왼쪽 상단 3x3 서브 행렬이 회전 및 스케일링을 정의한다는 것을 기억하세요. 이를 단위 행렬로 설정함으로써 회전 및 스케일링을 효과적으로 제거합니다. 그러나 변환을 정의하는 모델 뷰 행렬의 마지막 열은 유지합니다.

회전을 제거한 후 우리의 목표는 빌보드가 카메라를 일관되게 향하도록 하는 것입니다. 모델 뷰 행렬을 월드 좌표계의 모든 것에 적용하면 카메라 좌표계로 변환된다는 것을 알고 있습니다. 이 시스템에서 원점은 카메라 위치에 있으며 카메라의 시야 방향은 -Z 축과 정렬됩니다. 따라서 빌보드가 카메라를 향하도록 하려면 +Z 방향을 향하는 평면을 정의해야 합니다.

오른손 좌표계 카메라

이제 빌보드의 정점을 어떻게 정의하는지 살펴보겠습니다:

const positions = new Float32Array([
    10.0, -10.0, 0.0,
    -10.0, -10.0, 0.0,
    10.0, 10.0, 0.0,
    -10.0, 10.0, 0.0
]);

this.positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);

const texCoords = new Float32Array([
    1.0, 1.0,
    1.0, 0.0,
    0.0, 1.0,
    0.0, 0.0
]);

this.texCoordsBuffer = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);

const pipelineDesc = {
    layout,
    vertex: {
        module: shaderModule,
        entryPoint: 'vs_main',
        buffers: [positionBufferLayoutDesc, texCoordsBufferLayoutDesc]
    },
    fragment: {
        module: shaderModule,
        entryPoint: 'fs_main',
        targets: [colorState]
    },
    primitive: {
        topology: 'triangle-strip',
        frontFace: 'cw',
        cullMode: 'back'
    },
    depthStencil: {
        depthWriteEnabled: true,
        depthCompare: 'less',
        format: 'depth24plus-stencil8'
    }
};

우리는 전면(front face)으로 시계 방향 순서(+Z 축을 향함)의 삼각형 스트립을 사용합니다. 이 구성은 빌보드가 시야각에 관계없이 항상 전면을 카메라에 표시하여 가시성을 유지하도록 합니다.