MENU
  1. ホーム
  2. C++
  3. C++과 OpenGL로 3D 그래픽 파이프라인 구현하기

C++과 OpenGL로 3D 그래픽 파이프라인 구현하기

C++

C++과 OpenGL을 활용하여 3D 그래픽을 구현하는 것은 현대 게임과 시각화 소프트웨어 개발의 핵심 요소 중 하나입니다. OpenGL은 크로스플랫폼 그래픽 API로, GPU를 활용한 고성능 그래픽 렌더링을 가능하게 합니다.

3D 그래픽 파이프라인은 응용(Application), 기하(Geometry), 래스터화(Rasterization) 세 가지 주요 단계로 구성됩니다. 이를 통해 3D 객체의 좌표 변환, 조명 및 텍스처링, 최종 픽셀 출력을 수행합니다.

이 기사에서는 OpenGL을 사용하여 3D 그래픽 파이프라인의 기본 개념을 배우고, 개발 환경 구축부터 셰이더 프로그래밍, 기초 렌더링, 조명 효과 및 후처리까지 실습을 통해 익혀볼 것입니다. 최종적으로 간단한 3D 장면을 구현하여 전체 흐름을 이해하는 것이 목표입니다.

목차
  1. 3D 그래픽 파이프라인 개요
    1. 응용 단계 (Application Stage)
    2. 기하 단계 (Geometry Stage)
    3. 래스터화 단계 (Rasterization Stage)
    4. 그래픽 파이프라인의 흐름 요약
  2. OpenGL 개발 환경 구축하기
    1. 1. 필수 라이브러리 및 도구
    2. 2. 개발 환경 설치
    3. 3. 기본 OpenGL 윈도우 실행
    4. 4. 실행 및 디버깅
  3. 버텍스 처리와 셰이더 개념
    1. 1. 셰이더의 개념
    2. 2. 버텍스 셰이더와 프래그먼트 셰이더 예제
    3. 3. OpenGL에서 셰이더 프로그램 생성 및 컴파일
    4. 4. 셰이더 적용 및 사용
  4. VBO와 VAO를 이용한 기초 렌더링
    1. 1. VBO(Vertex Buffer Object)란?
    2. 2. VAO(Vertex Array Object)란?
    3. 3. 삼각형 그리기 예제
    4. 4. 실행 결과
    5. 5. 요약
  5. 변환 행렬과 카메라 설정
    1. 1. 변환 행렬 개요
    2. 2. GLM을 사용한 변환 행렬 설정
    3. 3. OpenGL 셰이더에서 변환 행렬 적용
    4. 4. 실행 결과
    5. 5. 요약
  6. 텍스처 매핑과 조명 효과
    1. 1. 텍스처 매핑 (Texture Mapping)
    2. 2. 조명 효과 (Lighting Effects)
    3. 3. 실행 결과
    4. 4. 요약
  7. 프레임버퍼와 후처리 효과
    1. 1. 프레임버퍼 개념
    2. 2. 프레임버퍼 생성 및 설정
    3. 3. 프레임버퍼를 이용한 렌더링 과정
    4. 4. 후처리 효과 적용
    5. 5. 실행 결과
    6. 6. 요약
  8. 실습: 간단한 3D 장면 만들기
    1. 1. 3D 큐브 정점 데이터 정의
    2. 2. VBO, VAO 및 EBO 설정
    3. 3. 텍스처 적용
    4. 4. 조명 설정 (Phong 조명 모델 적용)
    5. 5. 렌더링 루프
    6. 6. 실행 결과
    7. 7. 요약
  9. 요약
    1. 핵심 내용 정리

3D 그래픽 파이프라인 개요

3D 그래픽 파이프라인은 3D 모델을 화면에 렌더링하는 과정을 의미하며, 현대적인 그래픽 API(OpenGL, Vulkan, DirectX 등)에서 공통적으로 사용됩니다. 파이프라인은 여러 단계로 구성되며, 응용 단계(Application Stage), 기하 단계(Geometry Stage), 래스터화 단계(Rasterization Stage)로 구분됩니다.

응용 단계 (Application Stage)

이 단계에서는 CPU가 3D 모델 데이터를 처리하고, GPU로 전달할 준비를 합니다.

  • 모델 데이터 로드: 3D 모델(Vertex, Index, Texture) 데이터를 메모리에 로드
  • 카메라 변환 계산: 월드 좌표계에서 뷰 좌표계로 변환
  • 애니메이션 및 물리 연산: 모델의 움직임, 충돌 감지 등의 연산 수행

기하 단계 (Geometry Stage)

GPU에서 3D 좌표를 변환하고, 셰이더를 적용하는 단계입니다.

  • 버텍스 셰이더(Vertex Shader): 각 정점(Vertex)의 위치를 변환 (월드 → 뷰 → 클립 공간)
  • 테셀레이션 셰이더(Tessellation Shader): 정점을 세분화하여 디테일 향상 (Optional)
  • 지오메트리 셰이더(Geometry Shader): 정점 데이터를 추가 수정 가능 (Optional)

래스터화 단계 (Rasterization Stage)

기하 데이터를 화면 픽셀로 변환하고, 최종 색상을 결정하는 단계입니다.

  • 래스터화(Rasterization): 3D 데이터를 2D 픽셀로 변환
  • 프래그먼트 셰이더(Fragment Shader): 픽셀 단위 색상 및 조명 계산
  • 블렌딩(Blending) 및 Z-버퍼: 픽셀을 최종 화면에 출력

그래픽 파이프라인의 흐름 요약

아래 다이어그램은 3D 그래픽 파이프라인의 전반적인 흐름을 나타냅니다.

[CPU]  →  응용 단계 (Application)  →  [GPU]  →  기하 단계 (Geometry)  →  래스터화 단계 (Rasterization)  →  최종 화면 출력

이후 단계에서는 OpenGL을 활용하여 그래픽 파이프라인을 구성하고, 셰이더를 작성하는 방법을 실습해볼 것입니다.

OpenGL 개발 환경 구축하기

OpenGL을 활용하여 3D 그래픽을 구현하려면 적절한 개발 환경을 설정해야 합니다. 여기서는 C++을 기반으로 OpenGL을 사용하기 위한 필수 라이브러리 및 설정 방법을 설명합니다.

1. 필수 라이브러리 및 도구

OpenGL 개발을 위해 다음과 같은 라이브러리와 도구가 필요합니다.

  • GLFW: 창(Window) 및 입력 처리(키보드, 마우스) 지원
  • GLAD: OpenGL 함수 로딩 라이브러리
  • GLEW (대안): OpenGL 확장 관리 라이브러리
  • GLM: 3D 그래픽용 수학 라이브러리
  • Visual Studio / GCC / Clang: C++ 컴파일러

2. 개발 환경 설치

(1) Windows에서 설정 (Visual Studio + CMake)

  1. Visual Studio 설치
  1. GLFW, GLAD 설치
  • vcpkg 사용 (권장)
    vcpkg install glfw3:x64-windows glm:x64-windows
  • 또는 수동 다운로드 후 include 및 lib에 추가
  1. CMake 프로젝트 설정
  • CMakeLists.txt에 GLFW 및 GLAD 추가
   find_package(glfw3 REQUIRED)
   target_link_libraries(MyProject glfw3)

(2) Linux/macOS에서 설정 (GCC + CMake)

  1. 패키지 관리자 이용 (예: Ubuntu)
   sudo apt update
   sudo apt install libglfw3-dev libglm-dev
  1. GLAD 설정
  • GLAD 웹사이트에서 OpenGL 4.6 버전 선택 후 C 코드 생성
  • glad.c 파일을 프로젝트에 추가하고 컴파일 시 포함

3. 기본 OpenGL 윈도우 실행

아래 예제는 GLFW를 사용하여 OpenGL 윈도우를 생성하는 코드입니다.

#include <GLFW/glfw3.h>
#include <iostream>

int main() {
    if (!glfwInit()) {
        std::cerr << "GLFW 초기화 실패\n";
        return -1;
    }

    GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGL Window", nullptr, nullptr);
    if (!window) {
        std::cerr << "윈도우 생성 실패\n";
        glfwTerminate();
        return -1;
    }

    glfwMakeContextCurrent(window);

    while (!glfwWindowShouldClose(window)) {
        glClear(GL_COLOR_BUFFER_BIT);
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}

4. 실행 및 디버깅

  • 위 코드가 정상적으로 실행되면 빈 OpenGL 윈도우가 나타납니다.
  • 이후 단계에서 셰이더 및 3D 렌더링을 추가하여 기능을 확장할 것입니다.

버텍스 처리와 셰이더 개념

OpenGL에서는 그래픽 데이터를 처리하기 위해 셰이더(Shader)를 사용합니다. 셰이더는 GPU에서 실행되는 작은 프로그램으로, 렌더링 과정에서 중요한 역할을 합니다.

1. 셰이더의 개념

셰이더는 OpenGL의 프로그램 가능 파이프라인(Programmable Pipeline)의 일부로, 그래픽 데이터의 처리를 담당합니다. 기본적으로 다음과 같은 두 가지 주요 셰이더가 사용됩니다.

(1) 버텍스 셰이더(Vertex Shader)

  • 3D 모델의 정점(Vertex) 데이터를 받아 화면 좌표로 변환합니다.
  • 변환 행렬(World, View, Projection)을 적용하여 정점의 위치를 조정합니다.

(2) 프래그먼트 셰이더(Fragment Shader)

  • 래스터화된 픽셀(Fragment)의 최종 색상을 계산합니다.
  • 조명, 텍스처링 등의 효과를 적용할 수 있습니다.

2. 버텍스 셰이더와 프래그먼트 셰이더 예제

아래는 기본적인 OpenGL 셰이더 코드입니다.

(1) 버텍스 셰이더 코드 (vertex_shader.glsl)

#version 330 core
layout(location = 0) in vec3 aPos;  // 입력: 정점 위치
uniform mat4 model;  // 모델 변환 행렬
uniform mat4 view;   // 뷰 변환 행렬
uniform mat4 projection; // 투영 변환 행렬

void main() {
    gl_Position = projection * view * model * vec4(aPos, 1.0);
}

(2) 프래그먼트 셰이더 코드 (fragment_shader.glsl)

#version 330 core
out vec4 FragColor;  // 출력: 픽셀 색상

void main() {
    FragColor = vec4(1.0, 0.5, 0.2, 1.0);  // 오렌지색 출력
}

3. OpenGL에서 셰이더 프로그램 생성 및 컴파일

셰이더를 사용하려면 OpenGL에서 컴파일하고 연결해야 합니다.

(1) C++ 코드로 셰이더 로드 및 컴파일

GLuint compileShader(const char* source, GLenum type) {
    GLuint shader = glCreateShader(type);
    glShaderSource(shader, 1, &source, nullptr);
    glCompileShader(shader);

    int success;
    glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
    if (!success) {
        char log[512];
        glGetShaderInfoLog(shader, 512, nullptr, log);
        std::cerr << "셰이더 컴파일 오류: " << log << std::endl;
    }

    return shader;
}

(2) 버텍스 및 프래그먼트 셰이더 연결

GLuint createShaderProgram(const char* vertexSrc, const char* fragmentSrc) {
    GLuint vertexShader = compileShader(vertexSrc, GL_VERTEX_SHADER);
    GLuint fragmentShader = compileShader(fragmentSrc, GL_FRAGMENT_SHADER);

    GLuint shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);

    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    return shaderProgram;
}

4. 셰이더 적용 및 사용

셰이더를 생성한 후, OpenGL에서 다음과 같이 사용합니다.

GLuint shaderProgram = createShaderProgram(vertexShaderSource, fragmentShaderSource);
glUseProgram(shaderProgram);

이제 셰이더를 활용하여 3D 그래픽을 렌더링할 준비가 되었습니다. 다음 단계에서는 VBO와 VAO를 이용한 기초 렌더링을 다뤄보겠습니다.

VBO와 VAO를 이용한 기초 렌더링

OpenGL에서 VBO(Vertex Buffer Object)와 VAO(Vertex Array Object)를 활용하면 3D 객체를 효율적으로 렌더링할 수 있습니다.

1. VBO(Vertex Buffer Object)란?

VBO는 GPU 메모리에 정점 데이터를 저장하는 버퍼입니다.

  • 정점의 위치, 색상, 텍스처 좌표 등을 저장할 수 있습니다.
  • CPU에서 GPU로 데이터를 전송하는 오버헤드를 줄여 성능을 향상시킵니다.

2. VAO(Vertex Array Object)란?

VAO는 VBO를 관리하는 객체입니다.

  • VBO의 속성(정점 배열 설정)을 저장하고 필요할 때 불러올 수 있습니다.
  • 여러 개의 VBO를 그룹화하여 한 번의 호출로 쉽게 사용할 수 있습니다.

3. 삼각형 그리기 예제

다음 예제에서는 OpenGL을 사용하여 삼각형을 렌더링합니다.

(1) 정점 데이터 정의

삼각형을 그리기 위해 3개의 정점(Vertices)을 정의합니다.

float vertices[] = {
    -0.5f, -0.5f, 0.0f,  // 왼쪽 아래
     0.5f, -0.5f, 0.0f,  // 오른쪽 아래
     0.0f,  0.5f, 0.0f   // 위쪽
};

(2) VBO와 VAO 설정

VBO와 VAO를 생성하고 데이터를 GPU로 전송합니다.

GLuint VAO, VBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);

// VAO 바인딩
glBindVertexArray(VAO);

// VBO 바인딩 및 데이터 전송
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// 정점 속성 설정 (위치 좌표)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

// VAO 및 VBO 바인딩 해제
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);

(3) 렌더링 루프에서 삼각형 그리기

while (!glfwWindowShouldClose(window)) {
    glClear(GL_COLOR_BUFFER_BIT);

    glUseProgram(shaderProgram);
    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    glfwSwapBuffers(window);
    glfwPollEvents();
}

4. 실행 결과

위 코드를 실행하면 OpenGL 창에 삼각형이 렌더링됩니다.

5. 요약

  • VBO는 정점 데이터를 GPU에 저장하는 버퍼입니다.
  • VAO는 VBO의 설정을 저장하고, 빠르게 불러올 수 있도록 관리합니다.
  • glDrawArrays(GL_TRIANGLES, 0, 3);를 사용하여 삼각형을 화면에 그립니다.

다음 단계에서는 변환 행렬과 카메라 설정을 다루겠습니다.

변환 행렬과 카메라 설정

OpenGL에서 3D 장면을 표현하려면 객체의 위치와 시점을 조정해야 합니다. 이를 위해 변환 행렬(Transformation Matrices)을 사용하여 모델 변환, 뷰 변환, 투영 변환을 적용합니다.

1. 변환 행렬 개요

OpenGL에서는 4×4 변환 행렬(Matrix)을 사용하여 객체의 위치, 회전, 크기를 조정합니다.
주요 변환 행렬은 다음과 같습니다.

행렬 유형설명적용 대상
모델 행렬 (Model Matrix)개별 객체의 위치, 크기, 회전을 조정개별 3D 객체
뷰 행렬 (View Matrix)카메라의 위치 및 방향을 설정전체 장면
투영 행렬 (Projection Matrix)3D 공간을 2D 화면으로 투영전체 장면

2. GLM을 사용한 변환 행렬 설정

GLM(OpenGL Mathematics)은 OpenGL에서 사용할 수 있는 수학 라이브러리로, 행렬 연산을 쉽게 처리할 수 있습니다.

(1) GLM 라이브러리 추가

  • Windows (vcpkg 사용)
  vcpkg install glm
  • Linux/macOS (APT 사용)
  sudo apt install libglm-dev

(2) 모델 변환 (Model Transformation)

모델 행렬을 사용하여 객체를 이동, 회전, 확대할 수 있습니다.

#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>

// 모델 행렬: (x: 2, y: 0, z: -5) 위치로 이동
glm::mat4 model = glm::mat4(1.0f);
model = glm::translate(model, glm::vec3(2.0f, 0.0f, -5.0f));

(3) 뷰 변환 (View Transformation)

카메라의 위치와 방향을 설정합니다.

// 카메라 위치: (0, 0, 3), 타겟: 원점 (0, 0, 0), 위쪽 방향: (0, 1, 0)
glm::mat4 view = glm::lookAt(glm::vec3(0.0f, 0.0f, 3.0f), 
                             glm::vec3(0.0f, 0.0f, 0.0f), 
                             glm::vec3(0.0f, 1.0f, 0.0f));

(4) 투영 변환 (Projection Transformation)

3D 장면을 2D 화면으로 변환하는 역할을 합니다.

// 원근 투영 설정 (FOV: 45도, 화면 비율: 800x600, 근거리 0.1, 원거리 100)
glm::mat4 projection = glm::perspective(glm::radians(45.0f), 800.0f / 600.0f, 0.1f, 100.0f);

3. OpenGL 셰이더에서 변환 행렬 적용

변환 행렬을 OpenGL 셰이더로 전달하여 정점 위치를 변환합니다.

(1) 버텍스 셰이더 수정 (vertex_shader.glsl)

#version 330 core
layout(location = 0) in vec3 aPos;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    gl_Position = projection * view * model * vec4(aPos, 1.0);
}

(2) C++ 코드에서 행렬 전달

셰이더에서 사용할 변환 행렬을 OpenGL에 전달합니다.

GLuint modelLoc = glGetUniformLocation(shaderProgram, "model");
GLuint viewLoc = glGetUniformLocation(shaderProgram, "view");
GLuint projLoc = glGetUniformLocation(shaderProgram, "projection");

glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));

4. 실행 결과

위 코드를 실행하면 OpenGL 창에 3D 변환이 적용된 객체가 렌더링됩니다.

5. 요약

  • 모델 행렬: 개별 객체 이동, 회전, 크기 조정
  • 뷰 행렬: 카메라의 위치 및 방향 설정
  • 투영 행렬: 3D 장면을 2D 화면으로 변환
  • GLM 라이브러리를 활용하여 행렬 연산을 수행

다음 단계에서는 텍스처 매핑과 조명 효과를 다루겠습니다.

텍스처 매핑과 조명 효과

3D 그래픽에서 텍스처 매핑(Texture Mapping)과 조명 효과(Lighting Effects)는 현실적인 장면을 표현하는 핵심 기술입니다. OpenGL에서는 텍스처를 적용하여 모델의 표면을 더욱 사실적으로 만들고, 다양한 조명 모델을 활용하여 광원 효과를 구현할 수 있습니다.

1. 텍스처 매핑 (Texture Mapping)

텍스처 매핑이란 2D 이미지(텍스처)를 3D 모델의 표면에 입히는 기술입니다. 이를 위해 OpenGL에서는 UV 좌표(Texture Coordinates)를 사용합니다.

(1) 텍스처 좌표 설정

각 정점(Vertex)에는 텍스처 좌표(UV 좌표)를 할당해야 합니다.

float vertices[] = {
    //  정점 좌표       |  UV 좌표  
    -0.5f, -0.5f, 0.0f,  0.0f, 0.0f,  // 왼쪽 아래
     0.5f, -0.5f, 0.0f,  1.0f, 0.0f,  // 오른쪽 아래
     0.5f,  0.5f, 0.0f,  1.0f, 1.0f,  // 오른쪽 위
    -0.5f,  0.5f, 0.0f,  0.0f, 1.0f   // 왼쪽 위
};

(2) 텍스처 로드 및 적용 (SOIL 라이브러리 사용)

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

// 텍스처 필터링 설정
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// 이미지 로드 및 적용
int width, height, channels;
unsigned char* data = SOIL_load_image("texture.jpg", &width, &height, &channels, SOIL_LOAD_RGBA);
if (data) {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);
}
SOIL_free_image_data(data);
glBindTexture(GL_TEXTURE_2D, 0);

(3) 셰이더에서 텍스처 좌표 활용 (fragment_shader.glsl)

#version 330 core
in vec2 TexCoord;
out vec4 FragColor;
uniform sampler2D ourTexture;

void main() {
    FragColor = texture(ourTexture, TexCoord);
}

2. 조명 효과 (Lighting Effects)

조명을 추가하면 3D 장면의 깊이와 사실감을 더욱 향상할 수 있습니다. 대표적인 조명 모델로 Phong 조명 모델을 사용할 수 있습니다.

(1) Phong 조명 모델 개요

  • Ambient (주변광): 모든 방향에서 오는 약한 빛
  • Diffuse (난반사광): 표면이 빛을 직접 받을 때 발생하는 빛
  • Specular (반사광): 표면에서 반사되는 밝은 빛

(2) 프래그먼트 셰이더에서 조명 계산 (fragment_shader.glsl)

#version 330 core
in vec3 FragPos;
in vec3 Normal;
out vec4 FragColor;

uniform vec3 lightPos;
uniform vec3 viewPos;
uniform vec3 lightColor;
uniform vec3 objectColor;

void main() {
    // Ambient 조명
    float ambientStrength = 0.1;
    vec3 ambient = ambientStrength * lightColor;

    // Diffuse 조명
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;

    // Specular 조명
    float specularStrength = 0.5;
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
    vec3 specular = specularStrength * spec * lightColor;

    vec3 result = (ambient + diffuse + specular) * objectColor;
    FragColor = vec4(result, 1.0);
}

(3) 조명 속성 전달 (C++ 코드)

glm::vec3 lightPos(1.2f, 1.0f, 2.0f);
glUniform3fv(glGetUniformLocation(shaderProgram, "lightPos"), 1, glm::value_ptr(lightPos));
glUniform3fv(glGetUniformLocation(shaderProgram, "lightColor"), 1, glm::value_ptr(glm::vec3(1.0f, 1.0f, 1.0f)));
glUniform3fv(glGetUniformLocation(shaderProgram, "objectColor"), 1, glm::value_ptr(glm::vec3(1.0f, 0.5f, 0.31f)));

3. 실행 결과

  • 텍스처가 적용된 3D 모델이 화면에 출력됩니다.
  • 조명 효과가 적용되어 빛이 닿는 부분은 밝고, 반대편은 어두워집니다.

4. 요약

✅ 텍스처 매핑을 통해 3D 모델의 표면에 이미지를 입힐 수 있다.
✅ Phong 조명 모델을 사용하여 빛과 그림자 효과를 추가할 수 있다.
✅ OpenGL의 셰이더(Shader)를 활용하여 조명과 텍스처를 조합할 수 있다.

다음 단계에서는 프레임버퍼와 후처리 효과를 다루겠습니다.

프레임버퍼와 후처리 효과

프레임버퍼(Frame Buffer)를 사용하면 OpenGL에서 렌더링된 결과를 화면 대신 메모리에 저장하여 후처리(Post-processing) 효과를 적용할 수 있습니다. 이를 활용하면 블러(Blur), 색상 보정(Color Correction), 엣지 디텍션(Edge Detection) 등의 효과를 구현할 수 있습니다.

1. 프레임버퍼 개념

프레임버퍼(Frame Buffer, FBO)는 GPU가 렌더링한 결과를 저장하는 메모리 공간입니다.
기본적으로 OpenGL은 기본 프레임버퍼(Default Framebuffer)를 사용하여 화면에 직접 렌더링하지만, 사용자 정의 프레임버퍼(Custom Framebuffer)를 사용하면 메모리에 데이터를 저장한 후 이를 가공하여 최종 화면에 출력할 수 있습니다.

2. 프레임버퍼 생성 및 설정

(1) 프레임버퍼 객체(FBO) 생성

프레임버퍼를 생성하고 바인딩합니다.

GLuint fbo;
glGenFramebuffers(1, &fbo);
glBindFramebuffer(GL_FRAMEBUFFER, fbo);

(2) 렌더링 결과를 저장할 텍스처 생성

프레임버퍼에 렌더링 결과를 저장할 텍스처를 생성합니다.

GLuint textureColorBuffer;
glGenTextures(1, &textureColorBuffer);
glBindTexture(GL_TEXTURE_2D, textureColorBuffer);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// 생성한 텍스처를 프레임버퍼의 컬러 어태치먼트로 설정
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, textureColorBuffer, 0);

(3) 깊이(depth) 및 스텐실(stencil) 버퍼 추가

GLuint rbo;
glGenRenderbuffers(1, &rbo);
glBindRenderbuffer(GL_RENDERBUFFER, rbo);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);

(4) 프레임버퍼 설정 검증

if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
    std::cerr << "ERROR: 프레임버퍼가 완전하지 않습니다!" << std::endl;
glBindFramebuffer(GL_FRAMEBUFFER, 0);

3. 프레임버퍼를 이용한 렌더링 과정

(1) 프레임버퍼에 렌더링

프레임버퍼를 활성화한 상태에서 장면을 렌더링합니다.

glBindFramebuffer(GL_FRAMEBUFFER, fbo);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// 3D 장면 렌더링
renderScene();

(2) 화면에 프레임버퍼의 결과 출력

프레임버퍼에서 저장된 텍스처를 다시 화면에 렌더링합니다.

glBindFramebuffer(GL_FRAMEBUFFER, 0);
glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(screenShader);
glBindVertexArray(quadVAO);
glBindTexture(GL_TEXTURE_2D, textureColorBuffer);
glDrawArrays(GL_TRIANGLES, 0, 6);

4. 후처리 효과 적용

프레임버퍼를 활용하여 다양한 후처리 효과를 적용할 수 있습니다.

(1) 그레이스케일 필터 (흑백 효과)

프래그먼트 셰이더에서 색상을 조정하여 흑백 필터를 적용합니다.

#version 330 core
out vec4 FragColor;
in vec2 TexCoords;
uniform sampler2D screenTexture;

void main() {
    vec3 color = texture(screenTexture, TexCoords).rgb;
    float grayscale = dot(color, vec3(0.299, 0.587, 0.114));
    FragColor = vec4(vec3(grayscale), 1.0);
}

(2) 블러 효과 (Gaussian Blur)

픽셀 주변의 색상을 평균 내어 부드러운 효과를 적용합니다.

#version 330 core
out vec4 FragColor;
in vec2 TexCoords;
uniform sampler2D screenTexture;

void main() {
    float offset = 1.0 / 300.0;
    vec3 result = vec3(0.0);

    for (int x = -1; x <= 1; x++) {
        for (int y = -1; y <= 1; y++) {
            vec2 samplePos = TexCoords + vec2(x, y) * offset;
            result += texture(screenTexture, samplePos).rgb;
        }
    }

    FragColor = vec4(result / 9.0, 1.0);
}

5. 실행 결과

  • 프레임버퍼를 이용한 후처리 효과를 적용할 수 있습니다.
  • 그레이스케일 필터를 적용하면 흑백 화면이 렌더링됩니다.
  • 블러 필터를 적용하면 흐릿한 효과를 얻을 수 있습니다.

6. 요약

✅ 프레임버퍼(FBO)를 사용하면 화면 대신 메모리에 렌더링할 수 있다.
✅ 텍스처를 활용하여 후처리 효과(Post-processing)를 적용할 수 있다.
✅ 그레이스케일, 블러 등 다양한 필터를 프래그먼트 셰이더에서 구현할 수 있다.

다음 단계에서는 실습: 간단한 3D 장면 만들기를 다루겠습니다.

실습: 간단한 3D 장면 만들기

지금까지 학습한 OpenGL의 핵심 개념을 바탕으로 간단한 3D 장면을 구성해 보겠습니다. 이 실습에서는 3D 큐브 모델을 생성하고, 텍스처 매핑 및 조명 효과를 적용하여 현실적인 장면을 렌더링합니다.

1. 3D 큐브 정점 데이터 정의

큐브를 구성하는 8개의 정점(Vertex)과 UV 텍스처 좌표를 정의합니다.

float vertices[] = {
    // 정점 좌표       |  UV 좌표    | 법선 벡터
    -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,  0.0f,  0.0f, -1.0f,
     0.5f, -0.5f, -0.5f,  1.0f, 0.0f,  0.0f,  0.0f, -1.0f,
     0.5f,  0.5f, -0.5f,  1.0f, 1.0f,  0.0f,  0.0f, -1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,  0.0f,  0.0f, -1.0f,

    -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,  0.0f,  0.0f,  1.0f,
     0.5f, -0.5f,  0.5f,  1.0f, 0.0f,  0.0f,  0.0f,  1.0f,
     0.5f,  0.5f,  0.5f,  1.0f, 1.0f,  0.0f,  0.0f,  1.0f,
    -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,  0.0f,  0.0f,  1.0f
};

인덱스 버퍼를 사용하여 삼각형을 정의합니다.

unsigned int indices[] = {
    0, 1, 2, 2, 3, 0,  // 앞면
    4, 5, 6, 6, 7, 4,  // 뒷면
    0, 1, 5, 5, 4, 0,  // 바닥
    3, 2, 6, 6, 7, 3,  // 천장
    0, 3, 7, 7, 4, 0,  // 왼쪽 면
    1, 2, 6, 6, 5, 1   // 오른쪽 면
};

2. VBO, VAO 및 EBO 설정

(1) 버퍼 객체 생성 및 데이터 전송

GLuint VAO, VBO, EBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
glGenBuffers(1, &EBO);

// VAO 바인딩
glBindVertexArray(VAO);

// VBO 바인딩 및 데이터 전송
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

// EBO 바인딩 및 데이터 전송
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

// 정점 속성 설정 (위치, UV, 법선)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(5 * sizeof(float)));
glEnableVertexAttribArray(2);

glBindVertexArray(0);

3. 텍스처 적용

(1) 텍스처 로드 및 적용

GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

int width, height, channels;
unsigned char* data = SOIL_load_image("cube_texture.jpg", &width, &height, &channels, SOIL_LOAD_RGBA);
if (data) {
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);
}
SOIL_free_image_data(data);
glBindTexture(GL_TEXTURE_2D, 0);

4. 조명 설정 (Phong 조명 모델 적용)

(1) 프래그먼트 셰이더에서 조명 계산 (fragment_shader.glsl)

#version 330 core
in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoord;

out vec4 FragColor;
uniform sampler2D texture1;
uniform vec3 lightPos;
uniform vec3 viewPos;
uniform vec3 lightColor;

void main() {
    // Ambient 조명
    float ambientStrength = 0.1;
    vec3 ambient = ambientStrength * lightColor;

    // Diffuse 조명
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;

    // Specular 조명
    float specularStrength = 0.5;
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
    vec3 specular = specularStrength * spec * lightColor;

    vec3 result = (ambient + diffuse + specular) * texture(texture1, TexCoord).rgb;
    FragColor = vec4(result, 1.0);
}

(2) 조명 속성 전달 (C++ 코드)

glm::vec3 lightPos(1.2f, 1.0f, 2.0f);
glUniform3fv(glGetUniformLocation(shaderProgram, "lightPos"), 1, glm::value_ptr(lightPos));
glUniform3fv(glGetUniformLocation(shaderProgram, "lightColor"), 1, glm::value_ptr(glm::vec3(1.0f, 1.0f, 1.0f)));

5. 렌더링 루프

렌더링 루프에서 프레임마다 3D 큐브를 회전하도록 설정합니다.

while (!glfwWindowShouldClose(window)) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glUseProgram(shaderProgram);

    // 회전 변환 적용
    glm::mat4 model = glm::mat4(1.0f);
    model = glm::rotate(model, (float)glfwGetTime(), glm::vec3(0.5f, 1.0f, 0.0f));
    glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));

    glBindVertexArray(VAO);
    glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);

    glfwSwapBuffers(window);
    glfwPollEvents();
}

6. 실행 결과

  • 3D 큐브가 화면에 렌더링됩니다.
  • 텍스처가 적용된 큐브가 회전합니다.
  • Phong 조명 모델이 적용되어 빛 반사가 구현됩니다.

7. 요약

✅ 3D 큐브 모델을 생성하고 텍스처를 적용하였다.
✅ Phong 조명 모델을 활용하여 현실적인 조명을 추가하였다.
✅ VAO, VBO, EBO를 활용하여 효율적으로 정점 데이터를 관리하였다.

다음 단계에서는 요약을 다루겠습니다.

요약

본 기사에서는 C++과 OpenGL을 사용하여 3D 그래픽 파이프라인을 구현하는 방법을 다루었습니다. OpenGL의 핵심 개념을 이해하고, 개발 환경을 구축한 후, 셰이더 프로그래밍, 변환 행렬 적용, 텍스처 매핑 및 조명 효과를 활용하여 3D 장면을 렌더링하는 과정을 실습했습니다.

핵심 내용 정리

✅ 3D 그래픽 파이프라인: 응용(Application), 기하(Geometry), 래스터화(Rasterization) 단계를 거쳐 최종 화면을 렌더링함.
✅ OpenGL 개발 환경 구축: GLFW, GLAD, GLM 등의 라이브러리를 활용하여 설정.
✅ 셰이더 프로그래밍: 버텍스 셰이더와 프래그먼트 셰이더를 활용하여 그래픽 데이터를 처리.
✅ VBO & VAO 활용: 정점 데이터를 효율적으로 관리하고 화면에 렌더링.
✅ 변환 행렬 적용: 모델, 뷰, 투영 행렬을 활용하여 3D 객체의 위치, 회전, 확대 조정.
✅ 텍스처 매핑: 3D 모델의 표면에 이미지를 적용하여 현실적인 표현 구현.
✅ 조명 효과 적용: Phong 조명 모델(Ambient, Diffuse, Specular)로 입체적인 광원 효과 구현.
✅ 프레임버퍼와 후처리 효과: 렌더링된 결과를 메모리에 저장하고, 블러 및 색상 보정과 같은 필터 효과 적용.
✅ 실습: 텍스처가 적용된 회전하는 3D 큐브를 구현.

본 실습을 통해 OpenGL을 활용한 3D 그래픽 구현의 핵심 개념을 익힐 수 있었으며, 이를 확장하여 더욱 복잡한 그래픽 장면을 구현할 수 있습니다. 🚀

C++
3D 그래픽 C++ OpenGL 그래픽스 프로그래밍
목차
  1. 3D 그래픽 파이프라인 개요
    1. 응용 단계 (Application Stage)
    2. 기하 단계 (Geometry Stage)
    3. 래스터화 단계 (Rasterization Stage)
    4. 그래픽 파이프라인의 흐름 요약
  2. OpenGL 개발 환경 구축하기
    1. 1. 필수 라이브러리 및 도구
    2. 2. 개발 환경 설치
    3. 3. 기본 OpenGL 윈도우 실행
    4. 4. 실행 및 디버깅
  3. 버텍스 처리와 셰이더 개념
    1. 1. 셰이더의 개념
    2. 2. 버텍스 셰이더와 프래그먼트 셰이더 예제
    3. 3. OpenGL에서 셰이더 프로그램 생성 및 컴파일
    4. 4. 셰이더 적용 및 사용
  4. VBO와 VAO를 이용한 기초 렌더링
    1. 1. VBO(Vertex Buffer Object)란?
    2. 2. VAO(Vertex Array Object)란?
    3. 3. 삼각형 그리기 예제
    4. 4. 실행 결과
    5. 5. 요약
  5. 변환 행렬과 카메라 설정
    1. 1. 변환 행렬 개요
    2. 2. GLM을 사용한 변환 행렬 설정
    3. 3. OpenGL 셰이더에서 변환 행렬 적용
    4. 4. 실행 결과
    5. 5. 요약
  6. 텍스처 매핑과 조명 효과
    1. 1. 텍스처 매핑 (Texture Mapping)
    2. 2. 조명 효과 (Lighting Effects)
    3. 3. 실행 결과
    4. 4. 요약
  7. 프레임버퍼와 후처리 효과
    1. 1. 프레임버퍼 개념
    2. 2. 프레임버퍼 생성 및 설정
    3. 3. 프레임버퍼를 이용한 렌더링 과정
    4. 4. 후처리 효과 적용
    5. 5. 실행 결과
    6. 6. 요약
  8. 실습: 간단한 3D 장면 만들기
    1. 1. 3D 큐브 정점 데이터 정의
    2. 2. VBO, VAO 및 EBO 설정
    3. 3. 텍스처 적용
    4. 4. 조명 설정 (Phong 조명 모델 적용)
    5. 5. 렌더링 루프
    6. 6. 실행 결과
    7. 7. 요약
  9. 요약
    1. 핵심 내용 정리