정점 셰이더

작성자

익명

작성일

2026.08.13

조회수

버전

정점 셰이더 렌더링 파이프라인 좌표계 변환 GLSL HLSL GPU 프로그래밍 컴퓨터 그래픽스 중급

정점 셰이더 (Vertex Shader)

1. 개요

정점 셰이더(Vertex Shader)는 그래픽스 렌더링 파이프라인의 초기 단계에서 실행되는 프로그램으로, 3D 모델을 구성하는 개별 정점(Vertex)의 위치를 계산하고 속성을 처리하는 역할을 수행한다.

현대적인 GPU 기반 렌더링 공정에서 정점 셰이더는 프로그래머가 직접 작성할 수 있는 '프로그래머블 셰이더(Programmable Shader)'의 핵심 요소이며, 3차원 공간상의 정점 데이터를 2차원 화면 좌표로 변환하여 래스터라이저(Rasterizer)로 전달하는 가교 역할을 한다.

2. 동작 원리 및 처리 과정

정점 셰이더의 핵심 목적은 3D 공간의 정점 좌표를 화면에 표시될 2D 좌표로 변환하는 것이다. 이 과정은 여러 단계의 행렬 곱셈을 통해 이루어지며, 이를 좌표계 변환(Coordinate Space Transformation)이라고 한다.

2.1 좌표계 변환 흐름

graph LR
    A[Local Space] -- Model Matrix --> B[World Space]
    B -- View Matrix --> C[View Space]
    C -- Projection Matrix --> D[Clip Space]
    D -- Perspective Divide --> E[NDC Space]
    E -- Viewport Transform --> F[Screen Space]

2.2 변환 단계 상세

단계	변환 행렬	목적 및 설명	수행 주체
Model $\rightarrow$ World	모델 행렬 (Model Matrix)	개별 오브젝트의 로컬 좌표를 전체 게임 월드의 절대 좌표로 변환 (위치, 회전, 크기 적용)	정점 셰이더
World $\rightarrow$ View	뷰 행렬 (View Matrix)	월드 좌표를 카메라(관찰자) 기준의 상대 좌표로 변환	정점 셰이더
View $\rightarrow$ Projection	투영 행렬 (Projection Matrix)	3D 좌표를 2D 평면으로 투영. 원근감(Perspective) 또는 직교(Orthographic) 효과 적용	정점 셰이더
Clip Space $\rightarrow$ NDC	(나눗셈 연산)	$w$ 성분으로 나누어 정규화된 장치 좌표(Normalized Device Coordinates, -1 ~ 1 범위)로 변환	고정 함수 단계
NDC $\rightarrow$ Screen	(뷰포트 변환)	NDC 좌표를 실제 모니터의 픽셀 해상도 좌표로 변환	고정 함수 단계

3. 주요 기능과 활용

정점 셰이더는 단순한 좌표 변환 외에도 정점 데이터를 직접 조작하여 다양한 시각적 효과를 구현한다.

정점 애니메이션 (Vertex Animation): CPU의 개입 없이 GPU 내에서 정점의 위치를 시간에 따라 변경한다. 예를 들어, 사인(Sine) 함수를 이용하여 깃발이 펄럭이거나 물결이 치는 효과를 구현할 수 있다.
스켈레탈 애니메이션 및 스키닝 (Skinning): 캐릭터 모델의 정점들이 가상의 뼈대(Bone) 가중치에 따라 함께 움직이도록 계산한다. 각 정점은 여러 뼈의 영향을 받으며, 정점 셰이더에서 가중치 합산(Linear Blend Skinning)을 통해 최종 위치를 결정한다.
모핑 (Morphing): 두 개의 서로 다른 정점 위치 데이터를 보간(Interpolation)하여 형태가 서서히 변하는 효과를 만든다.

4. 입력과 출력 데이터

정점 셰이더는 정점 버퍼(Vertex Buffer)로부터 데이터를 입력받아 처리한 후, 다음 단계인 프래그먼트 셰이더(Fragment Shader)로 데이터를 전달한다.

4.1 입력 데이터 (Attributes)

입력 데이터는 각 정점마다 고유하게 할당된 속성값들이다.

입력 구조체 예시 (HLSL 기준):

struct VS_INPUT {
    float4 Position : POSITION;   // 정점의 로컬 좌표 (x, y, z, w)
    float3 Normal    : NORMAL;    // 정점의 법선 벡터 (빛 계산용)
    float2 TexCoord  : TEXCOORD0; // 텍스처 좌표 (UV mapping)
    float4 Color     : COLOR;     // 정점 고유 색상
};

4.2 출력 데이터 (Varyings/Interpolants)

정점 셰이더의 출력값은 래스터라이저를 거치며 보간(Interpolation)된다. 예를 들어, 삼각형의 세 정점이 각각 빨강, 초록, 파랑색을 출력했다면, 그 내부의 픽셀(프래그먼트)들은 세 색상이 섞인 중간색을 전달받게 된다.

출력 구조체 예시 (HLSL 기준):

struct VS_OUTPUT {
    float4 Position : SV_POSITION; // 시스템 값 시맨틱: 클립 공간 좌표
    float2 TexCoord : TEXCOORD0;   // 보간되어 프래그먼트 셰이더로 전달될 UV
    float3 Normal   : TEXCOORD1;   // 보간되어 전달될 법선 벡터
    float4 Color    : COLOR0;      // 보간되어 전달될 색상
};

5. 코드 예제 및 분석

다음은 GLSL(OpenGL Shading Language)을 이용한 기본적인 정점 셰이더 코드이다.

#version 330 core

// 입력 속성 (Attributes)
layout (location = 0) in vec3 aPos;       // 정점 위치
layout (location = 1) in vec2 aTexCoord;  // 텍스처 좌표

// 유니폼 변수 (CPU에서 전달되는 상수)
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

// 출력 데이터 (Fragment Shader로 전달)
out vec2 TexCoord;

void main() {
    // 1. 좌표계 변환: Projection * View * Model * Position
    // 행렬 곱셈 순서는 오른쪽에서 왼쪽으로 적용됨
    gl_Position = projection * view * model * vec4(aPos, 1.0);

    // 2. 텍스처 좌표 전달 (보간되어 프래그먼트 셰이더로 전달됨)
    TexCoord = aTexCoord;
}

코드 분석: 1. uniform: 모든 정점에 대해 동일하게 적용되는 값(행렬 등)을 정의한다. GLSL은 기본적으로 열 우선(Column-major) 방식을 사용하므로, 수학적 표기법에 따라 projection * view * model 순으로 곱하여 정점에 순차적으로 변환을 적용한다. 2. gl_Position: GLSL의 내장 변수로, 최종 계산된 클립 공간의 좌표를 저장해야 한다. 3. vec4(aPos, 1.0): 3차원 좌표를 4차원 동차 좌표계(Homogeneous Coordinates)로 확장하여 행렬 연산이 가능하게 한다.

6. 셰이더 간 관계 및 문법 비교

6.1 정점 셰이더와 프래그먼트 셰이더 관계도

graph TD
    subgraph "Vertex Shader (Per Vertex)"
        V_In[Vertex Attributes] --> V_Proc[Position/Attribute Calculation]
        V_Proc --> V_Out[Vertex Output]
    end

    V_Out --> Rasterizer[Rasterizer / Interpolation]

    subgraph "Fragment Shader (Per Pixel)"
        Rasterizer --> F_In[Interpolated Varyings]
        F_In --> F_Proc[Color/Lighting Calculation]
        F_Proc --> F_Out[Final Pixel Color]
    end

6.2 HLSL vs GLSL 문법 비교

구분	HLSL (DirectX)	GLSL (OpenGL/Vulkan)
데이터 타입	`float4`, `float3`, `float2`	`vec4`, `vec3`, `vec2`
행렬 타입	`float4x4`	`mat4`
입출력 방식	구조체(struct)와 시맨틱(Semantic) 사용	`in`, `out` 키워드 및 `layout` 지정자 사용
내장 출력 변수	`SV_POSITION` (시맨틱으로 지정)	`gl_Position`
행렬 곱셈 순서	주로 행 우선 (Row-major) $\rightarrow$ `Pos * M`	주로 열 우선 (Column-major) $\rightarrow$ `M * Pos`

7. 셰이더 모델별 주요 차이점

그래픽 API와 하드웨어 세대에 따라 정점 셰이더의 기능과 제약 사항이 다르다.

구분	고정 함수 파이프라인 (Fixed-Function)	프로그래머블 셰이더 (Programmable)	최신 메시 셰이더 (Mesh Shader)
제어 방식	API 설정값으로 제어 (예: `glMatrixMode`)	HLSL/GLSL 코드로 직접 작성	정점/프리미티브 단위의 유연한 제어
유연성	매우 낮음 (정해진 변환만 가능)	높음 (임의의 수학 연산 가능)	매우 높음 (정점 생성/삭제 가능)
처리 단위	정점 단위 순차 처리	정점 단위 병렬 처리	메시렛(Meshlet) 단위 그룹 처리
특징	초기 OpenGL/DirectX 버전	현대적 GPU 렌더링의 표준	최신 GPU(RTX 등)의 기하 구조 최적화

8. 성능 최적화 및 주의사항

정점 셰이더의 효율적인 사용은 전체 렌더링 성능에 직접적인 영향을 미친다.

연산 부하 분산: 정점 셰이더는 정점 수만큼 실행되지만, 프래그먼트 셰이더는 픽셀 수만큼 실행된다. 일반적으로 픽셀 수가 훨씬 많으므로, 가능한 한 프래그먼트 셰이더에서 할 연산을 정점 셰이더로 옮기는 것이 유리하다. (예: 조명 계산의 일부를 정점에서 수행하는 정점 조명 방식)
데이터 전송 최적화: CPU에서 GPU로 매 프레임 대량의 정점 데이터를 보내는 것은 병목 현상을 일으킨다. 정적 데이터는 VBO(Vertex Buffer Object)에 미리 저장하고, 변하는 값만 유니폼(Uniform) 변수로 전달해야 한다.
정점 수 관리: 과도한 폴리곤 수는 정점 셰이더의 연산량을 급증시킨다. LOD(Level of Detail) 기술을 적용하여 카메라와의 거리에 따라 정점 수를 조절하는 것이 필수적이다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# 정점 셰이더 (Vertex Shader)

## 1. 개요
**정점 셰이더(Vertex Shader)**는 그래픽스 렌더링 파이프라인의 초기 단계에서 실행되는 프로그램으로, 3D 모델을 구성하는 개별 정점(Vertex)의 위치를 계산하고 속성을 처리하는 역할을 수행한다. 

현대적인 GPU 기반 렌더링 공정에서 정점 셰이더는 프로그래머가 직접 작성할 수 있는 '프로그래머블 셰이더(Programmable Shader)'의 핵심 요소이며, 3차원 공간상의 정점 데이터를 2차원 화면 좌표로 변환하여 래스터라이저(Rasterizer)로 전달하는 가교 역할을 한다.

## 2. 동작 원리 및 처리 과정
정점 셰이더의 핵심 목적은 3D 공간의 정점 좌표를 화면에 표시될 2D 좌표로 변환하는 것이다. 이 과정은 여러 단계의 행렬 곱셈을 통해 이루어지며, 이를 **좌표계 변환(Coordinate Space Transformation)**이라고 한다.

### 2.1 좌표계 변환 흐름
```mermaid
graph LR
    A[Local Space] -- Model Matrix --> B[World Space]
    B -- View Matrix --> C[View Space]
    C -- Projection Matrix --> D[Clip Space]
    D -- Perspective Divide --> E[NDC Space]
    E -- Viewport Transform --> F[Screen Space]
```

### 2.2 변환 단계 상세
| 단계 | 변환 행렬 | 목적 및 설명 | 수행 주체 |
| :--- | :--- | :--- | :--- |
| **Model $\rightarrow$ World** | 모델 행렬 (Model Matrix) | 개별 오브젝트의 로컬 좌표를 전체 게임 월드의 절대 좌표로 변환 (위치, 회전, 크기 적용) | **정점 셰이더** |
| **World $\rightarrow$ View** | 뷰 행렬 (View Matrix) | 월드 좌표를 카메라(관찰자) 기준의 상대 좌표로 변환 | **정점 셰이더** |
| **View $\rightarrow$ Projection** | 투영 행렬 (Projection Matrix) | 3D 좌표를 2D 평면으로 투영. 원근감(Perspective) 또는 직교(Orthographic) 효과 적용 | **정점 셰이더** |
| **Clip Space $\rightarrow$ NDC** | (나눗셈 연산) | $w$ 성분으로 나누어 정규화된 장치 좌표(Normalized Device Coordinates, -1 ~ 1 범위)로 변환 | 고정 함수 단계 |
| **NDC $\rightarrow$ Screen** | (뷰포트 변환) | NDC 좌표를 실제 모니터의 픽셀 해상도 좌표로 변환 | 고정 함수 단계 |

## 3. 주요 기능과 활용
정점 셰이더는 단순한 좌표 변환 외에도 정점 데이터를 직접 조작하여 다양한 시각적 효과를 구현한다.

*   **정점 애니메이션 (Vertex Animation):** CPU의 개입 없이 GPU 내에서 정점의 위치를 시간에 따라 변경한다. 예를 들어, 사인(Sine) 함수를 이용하여 깃발이 펄럭이거나 물결이 치는 효과를 구현할 수 있다.
*   **스켈레탈 애니메이션 및 스키닝 (Skinning):** 캐릭터 모델의 정점들이 가상의 뼈대(Bone) 가중치에 따라 함께 움직이도록 계산한다. 각 정점은 여러 뼈의 영향을 받으며, 정점 셰이더에서 가중치 합산(Linear Blend Skinning)을 통해 최종 위치를 결정한다.
*   **모핑 (Morphing):** 두 개의 서로 다른 정점 위치 데이터를 보간(Interpolation)하여 형태가 서서히 변하는 효과를 만든다.

## 4. 입력과 출력 데이터
정점 셰이더는 정점 버퍼(Vertex Buffer)로부터 데이터를 입력받아 처리한 후, 다음 단계인 프래그먼트 셰이더(Fragment Shader)로 데이터를 전달한다.

### 4.1 입력 데이터 (Attributes)
입력 데이터는 각 정점마다 고유하게 할당된 속성값들이다.

**입력 구조체 예시 (HLSL 기준):**
```hlsl
struct VS_INPUT {
    float4 Position : POSITION;   // 정점의 로컬 좌표 (x, y, z, w)
    float3 Normal    : NORMAL;    // 정점의 법선 벡터 (빛 계산용)
    float2 TexCoord  : TEXCOORD0; // 텍스처 좌표 (UV mapping)
    float4 Color     : COLOR;     // 정점 고유 색상
};
```

### 4.2 출력 데이터 (Varyings/Interpolants)
정점 셰이더의 출력값은 래스터라이저를 거치며 **보간(Interpolation)**된다. 예를 들어, 삼각형의 세 정점이 각각 빨강, 초록, 파랑색을 출력했다면, 그 내부의 픽셀(프래그먼트)들은 세 색상이 섞인 중간색을 전달받게 된다.

**출력 구조체 예시 (HLSL 기준):**
```hlsl
struct VS_OUTPUT {
    float4 Position : SV_POSITION; // 시스템 값 시맨틱: 클립 공간 좌표
    float2 TexCoord : TEXCOORD0;   // 보간되어 프래그먼트 셰이더로 전달될 UV
    float3 Normal   : TEXCOORD1;   // 보간되어 전달될 법선 벡터
    float4 Color    : COLOR0;      // 보간되어 전달될 색상
};
```

## 5. 코드 예제 및 분석
다음은 GLSL(OpenGL Shading Language)을 이용한 기본적인 정점 셰이더 코드이다.

```glsl
#version 330 core

// 입력 속성 (Attributes)
layout (location = 0) in vec3 aPos;       // 정점 위치
layout (location = 1) in vec2 aTexCoord;  // 텍스처 좌표

// 유니폼 변수 (CPU에서 전달되는 상수)
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

// 출력 데이터 (Fragment Shader로 전달)
out vec2 TexCoord;

void main() {
    // 1. 좌표계 변환: Projection * View * Model * Position
    // 행렬 곱셈 순서는 오른쪽에서 왼쪽으로 적용됨
    gl_Position = projection * view * model * vec4(aPos, 1.0);

    // 2. 텍스처 좌표 전달 (보간되어 프래그먼트 셰이더로 전달됨)
    TexCoord = aTexCoord;
}
```

**코드 분석:**
1.  `uniform`: 모든 정점에 대해 동일하게 적용되는 값(행렬 등)을 정의한다. GLSL은 기본적으로 **열 우선(Column-major)** 방식을 사용하므로, 수학적 표기법에 따라 `projection * view * model` 순으로 곱하여 정점에 순차적으로 변환을 적용한다.
2.  `gl_Position`: GLSL의 내장 변수로, 최종 계산된 클립 공간의 좌표를 저장해야 한다.
3.  `vec4(aPos, 1.0)`: 3차원 좌표를 4차원 동차 좌표계(Homogeneous Coordinates)로 확장하여 행렬 연산이 가능하게 한다.

## 6. 셰이더 간 관계 및 문법 비교

### 6.1 정점 셰이더와 프래그먼트 셰이더 관계도
```mermaid
graph TD
    subgraph "Vertex Shader (Per Vertex)"
        V_In[Vertex Attributes] --> V_Proc[Position/Attribute Calculation]
        V_Proc --> V_Out[Vertex Output]
    end

    V_Out --> Rasterizer[Rasterizer / Interpolation]

    subgraph "Fragment Shader (Per Pixel)"
        Rasterizer --> F_In[Interpolated Varyings]
        F_In --> F_Proc[Color/Lighting Calculation]
        F_Proc --> F_Out[Final Pixel Color]
    end
```

### 6.2 HLSL vs GLSL 문법 비교
| 구분 | HLSL (DirectX) | GLSL (OpenGL/Vulkan) |
| :--- | :--- | :--- |
| **데이터 타입** | `float4`, `float3`, `float2` | `vec4`, `vec3`, `vec2` |
| **행렬 타입** | `float4x4` | `mat4` |
| **입출력 방식** | 구조체(struct)와 시맨틱(Semantic) 사용 | `in`, `out` 키워드 및 `layout` 지정자 사용 |
| **내장 출력 변수** | `SV_POSITION` (시맨틱으로 지정) | `gl_Position` |
| **행렬 곱셈 순서** | 주로 행 우선 (Row-major) $\rightarrow$ `Pos * M` | 주로 열 우선 (Column-major) $\rightarrow$ `M * Pos` |

## 7. 셰이더 모델별 주요 차이점
그래픽 API와 하드웨어 세대에 따라 정점 셰이더의 기능과 제약 사항이 다르다.

| 구분 | 고정 함수 파이프라인 (Fixed-Function) | 프로그래머블 셰이더 (Programmable) | 최신 메시 셰이더 (Mesh Shader) |
| :--- | :--- | :--- | :--- |
| **제어 방식** | API 설정값으로 제어 (예: `glMatrixMode`) | HLSL/GLSL 코드로 직접 작성 | 정점/프리미티브 단위의 유연한 제어 |
| **유연성** | 매우 낮음 (정해진 변환만 가능) | 높음 (임의의 수학 연산 가능) | 매우 높음 (정점 생성/삭제 가능) |
| **처리 단위** | 정점 단위 순차 처리 | 정점 단위 병렬 처리 | 메시렛(Meshlet) 단위 그룹 처리 |
| **특징** | 초기 OpenGL/DirectX 버전 | 현대적 GPU 렌더링의 표준 | 최신 GPU(RTX 등)의 기하 구조 최적화 |

## 8. 성능 최적화 및 주의사항
정점 셰이더의 효율적인 사용은 전체 렌더링 성능에 직접적인 영향을 미친다.

*   **연산 부하 분산:** 정점 셰이더는 정점 수만큼 실행되지만, 프래그먼트 셰이더는 픽셀 수만큼 실행된다. 일반적으로 픽셀 수가 훨씬 많으므로, 가능한 한 **프래그먼트 셰이더에서 할 연산을 정점 셰이더로 옮기는 것**이 유리하다. (예: 조명 계산의 일부를 정점에서 수행하는 정점 조명 방식)
*   **데이터 전송 최적화:** CPU에서 GPU로 매 프레임 대량의 정점 데이터를 보내는 것은 병목 현상을 일으킨다. 정적 데이터는 VBO(Vertex Buffer Object)에 미리 저장하고, 변하는 값만 유니폼(Uniform) 변수로 전달해야 한다.
*   **정점 수 관리:** 과도한 폴리곤 수는 정점 셰이더의 연산량을 급증시킨다. LOD(Level of Detail) 기술을 적용하여 카메라와의 거리에 따라 정점 수를 조절하는 것이 필수적이다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나