1.3 하드코딩된 정점 색상 적용하기

네 번째 튜토리얼에 오신 것을 환영합니다! 우리는 다시 한번 삼각형을 그리는 데 집중하고 있습니다. 이는 반복적으로 보일 수 있고, 진행 속도가 느리게 느껴질 수도 있습니다. 하지만 이 신중한 접근 방식은 매우 중요합니다. 우리는 한 번에 몇 가지 코드만 업데이트하면서 작고 점진적인 단계를 밟아나가고 있습니다. 이 방법은 GPU 프로그래밍 모델에 대한 견고한 이해를 구축하는 데 도움이 되며, 이는 더 복잡한 예제를 탐구하기 전에 필수적입니다.

안심하세요, 두 번째 챕터에 도달하면 속도가 빨라질 것입니다. 이 튜토리얼에서는 동일한 렌더링 파이프라인을 계속 사용하면서 셰이더 코드에 약간의 변경을 가할 것입니다.

이전 튜토리얼에서는 프래그먼트 셰이더에서 출력 색상을 하드코딩했습니다. 이번에는 이 하드코딩을 정점 단계로 옮기고 정점 단계에서 프래그먼트 단계로 색상을 전달할 것입니다. 이 변경은 파이프라인의 다른 단계들 사이에서 값이 어떻게 전달되는지를 보여주며, 이는 GPU 프로그래밍에서 중요한 개념입니다.

struct VertexOutput {
    @builtin(position) clip_position: vec4,
    @location(0) color: vec3,
};

@vertex
fn vs_main(
    @location(0) inPos: vec3,
) -> VertexOutput {
    var out: VertexOutput;
    out.clip_position = vec4(inPos, 1.0);
    out.color = vec3(0.0, 0.0, 1.0);
    return out;
}

변경 사항을 살펴보겠습니다. 정점 출력 구조체에 color라는 새 필드를 도입했습니다. 정점 색상에 대한 내장 함수가 없으므로 `@location(0)`을 사용하여 저장합니다. 정점 단계의 끝에서 `out.color`에 하드코딩된 색상을 할당합니다.

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4 {
    return vec4(in.color, 1.0);
}

프래그먼트 단계에서는 이제 입력에서 이 색상에 접근하여 출력으로 직접 전달할 수 있습니다. 이러한 변경에도 불구하고, 동일한 삼각형이 렌더링되는 것을 볼 수 있습니다.

이제 GPU 렌더링의 중요한 측면을 고려해 보겠습니다. 정점 단계에서는 개별 정점을 처리하고, 프래그먼트 단계에서는 개별 프래그먼트를 다룹니다. 프래그먼트는 개념적으로 픽셀과 유사하지만 깊이 및 기타 값과 같은 풍부한 메타데이터를 포함할 수 있습니다.

정점 단계와 프래그먼트 단계 사이에는 GPU에 의해 처리되는 래스터화라는 자동 프로세스가 있습니다. 이 프로세스는 지오메트리 데이터를 프래그먼트로 변환합니다.

여기서 흥미로운 질문이 있습니다: 만약 각 정점에 다른 색상을 할당한다면, 특히 삼각형의 중앙에 있고 어떤 정점에도 직접적으로 위치하지 않는 프래그먼트의 경우 GPU는 프래그먼트에 색상을 어떻게 할당할까요?

이 개념을 직접 샘플 코드를 수정하고 실험해 보시기를 권장합니다. 각 정점에 다른 색상을 할당하고 GPU가 삼각형 표면에서 이 색상을 어떻게 보간하는지 관찰해 보세요. 이 연습을 통해 GPU 파이프라인을 통해 데이터가 어떻게 흐르고 보간 프로세스가 어떻게 작동하는지에 대한 이해를 깊게 할 수 있습니다.