[OpenGL] 3차원 객체 렌더 2

■ 3차원 큐브 렌더

이전에 렌더한 2D 평면을 확장시켜 3D 큐브를 렌더해 볼 것이다.
큐브를 렌더하기 위해서 총 36개의 정점이 필요하다 (총 평면 6개 > 평면마다 삼각형 2개 > 삼각형마다 정점 3개)

 

// 정점 데이터
float vertices[] = {
    -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
    0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,

    -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
    -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
    -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,

    -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

    -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
    -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,

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

 

// 큐브가 계속 회전하도록 함
model = glm::rotate(model, (float)glfwGetTime() * glm::radians(50.0f), glm::vec3(0.5f, 1.0f, 0.0f));

...
// 36개의 정점 사용
glDrawArrays(GL_TRIANGLES, 0, 36);

 

● 결과 1

 

결과를 출력하면 큐브의 일부 면이 다른 면 위에 그려지고 있다. 이는 OpenGL이 큐브를 삼각형 단위로, 프래그먼트 단위로 그릴 때 이전에 이미 그려진 픽셀 색상을 덮어쓰기 때문이다. OpenGL은 동일한 드로우 콜 내에서 삼각형이 그려지는 순서에 대해 보장하지 않으므로, 겹쳐서 그려질 수 있다.

OpenGL은 Z-버퍼라고 불리는 버퍼에 깊이 정보를 저장하여 픽셀을 덮어쓸지 말지를 결정할 수 있다. Z-버퍼를 사용하여 OpenGL에서 'Depth-testing'을 구성할 수 있다.

■ Z 버퍼 (Z-Buffer)

OpenGL은 깊이 정보를 Z-버퍼(또는 깊이 버퍼)에 저장한다. GLFW는 색상 버퍼(출력 이미지의 색상을 저장하는 버퍼)처럼 자동으로 Z-버퍼를 생성한다. 깊이는 각 프래그먼트의 Z 값으로 저장되며, 프래그먼트가 색상을 출력하려고 할 때마다 OpenGL은 해당 프래그먼트의 깊이 값을 Z-버퍼와 비교한다.

현재 프래그먼트가 다른 프래그먼트보다 뒤에 있으면 그 프래그먼트는 폐기되며, 그렇지 않으면 덮어쓴다. 이 과정을 Depth-testing(깊이 테스트)라고 하며, OpenGL에 의해 자동으로 수행된다.

그러나 OpenGL이 실제로 깊이 테스트를 수행하게 하려면 먼저 OpenGL에 깊이 테스트를 활성화하도록 알려야 한다. (기본적으로 깊이 테스트는 비활성화되어 있다)

 

// 깊이 테스트 활성화
glEnable(GL_DEPTH_TEST);

 

 

glEnable 및 glDisable 함수는 OpenGL에서 특정 기능을 활성화하거나 비활성화하는 기능을 제공한다. 지금은 GL_DEPTH_TEST를 활성화하여 깊이 테스트를 활성화한다.

// 버퍼 비트 초기화
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

또한 깊이 버퍼를 사용하기 때문에, 각 렌더링 반복(iteration) 전에 깊이 버퍼를 초기화 해 주어야 한다. 그렇지 않으면 이전 프레임의 깊이 정보가 버퍼에 남아있게 된다. 색상 버퍼를 초기화하는 것과 마찬가지로, glClear 함수에서 DEPTH_BUFFER_BIT 비트를 지정하여 깊이 버퍼를 초기화할 수 있다.

● 결과 2

- 소스 코드

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

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

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

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

float mixPercent = 0.0f;

int main()
{
    // ---------- [ 1. GLFW, GLAD 세팅 ] ----------

    // GLFW 초기화 및 설정
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // GLFW 윈도우 생성
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // GLAD - OpenGL 함수 포인터를 로드
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // 셰이더 프로그램 빌드 및 컴파일
    Shader ourShader("Shaders/Shader.vert", "Shaders/Shader.frag");

    // ---------- [ 2. 정점 데이터 입력 / 정점 속성 구성 ] ----------

    float vertices[] = {
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
        0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
        0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,

        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
        0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
        0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,

        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

        0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
        0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
        0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,

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

    // 깊이 테스트 활성화
    glEnable(GL_DEPTH_TEST);

    // VAO, VBO 생성
    // VAO: VBO와 정점 속성 포인터의 상태를 저장하기 위한 객체 
    // VBO: GPU 메모리에 정점 데이터를 저장하기 위한 버퍼 객체
    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    // 정점 배열 객체(VAO) 바인딩
    glBindVertexArray(VAO);

    // 정점 버퍼 객체(VBO)를 바인딩
    glBindBuffer(GL_ARRAY_BUFFER, VBO);

    // 바인딩된 버퍼 객체에 vertices 데이터를 복사하고,버퍼 객체의 크기와 데이터 설정
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // Position Attribute 구성
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

    // Texture coord Attribute 구성
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);

    // 다른 VAO 호출이 이 VAO를 실수로 수정하지 않도록 VAO를 바인딩 해제할 수 있지만, 일반적으로는 VAO(및 VBO)를 바인딩 해제하지 않는다.
    // glBindVertexArray(0);

    // ---------- [ 3. 텍스처 로드 및 생성 ] ----------

    // 텍스처 객체 생성 (2개)
    unsigned int texture1, texture2;

    // 상하 반전 설정
    stbi_set_flip_vertically_on_load(true);

    // < 텍스처 1 >
    glGenTextures(1, &texture1);
    glBindTexture(GL_TEXTURE_2D, texture1);

    // Wrapping 옵션 설정
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    // Filtering 옵션 설정
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    // 이미지 로드 (jpg)
    int width, height, nrChannels;
    unsigned char* data = stbi_load("Textures/container.jpg", &width, &height, &nrChannels, 0);

    // 텍스처 생성 (RGB)
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);

    // 메모리 반환
    stbi_image_free(data);

    // < 텍스처 2 >
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture2);

    // Wrapping 옵션 설정
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

    // Filtering 옵션 설정
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    // 이미지 로드 (png)
    data = stbi_load("Textures/awesomeface.png", &width, &height, &nrChannels, 0);

    // 텍스처 생성 (RGBA)
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
    glGenerateMipmap(GL_TEXTURE_2D);

    // 메모리 반환
    stbi_image_free(data);

    // 셰이더 활성화
    ourShader.use();

    // 셰이더 프로그램의 uniform 변수 설정 (매개 변수 : 1.location, 2.텍스처 유닛 인덱스)
    glUniform1i(glGetUniformLocation(ourShader.ID, "texture1"), 0);
    ourShader.setInt("texture2", 1); // 또는 미리 만들어진 shader 클래스 사용

    // ---------- [ 4. 렌더 루프 ] ----------
    while (!glfwWindowShouldClose(window))
    {
        // 입력 처리
        processInput(window);

        ourShader.setFloat("mixPercent", mixPercent);

        // 배경 렌더
        glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        // 각각의 텍스처 유닛에 텍스처 바인딩
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texture1);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, texture2);

        // 도형에 텍스처 렌더
        ourShader.use();

        // ---------- [ 5. 3D 변환 ] ----------

        // 모델 행렬
        glm::mat4 model = glm::mat4(1.0f);
        model = glm::rotate(model, (float)glfwGetTime() * glm::radians(50.0f), glm::vec3(0.5f, 1.0f, 0.0f));

        // 뷰 행렬
        glm::mat4 view = glm::mat4(1.0f);
        view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));

        // 투영 행렬
        glm::mat4 projection = glm::mat4(1.0f);
        projection = glm::perspective(glm::radians(45.0f), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);

        // pass them to the shaders
        unsigned int modelLoc = glGetUniformLocation(ourShader.ID, "model");
        unsigned int viewLoc = glGetUniformLocation(ourShader.ID, "view");
        unsigned int projectionLoc = glGetUniformLocation(ourShader.ID, "projection");

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

        // 변환 행렬을 이용해 변환된 정점들을 그린다
        glBindVertexArray(VAO);
        glDrawArrays(GL_TRIANGLES, 0, 36);

        // 프론트, 백 버퍼 교체
        glfwSwapBuffers(window);

        // 이벤트 처리
        glfwPollEvents();
    }

    // VAO, VBO 메모리 해제
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);

    // 사용된 리소스 해제, 초기화 및 정리 작업
    glfwTerminate();
    return 0;
}

// 입력 처리 함수
void processInput(GLFWwindow* window)
{
    // ESC가 눌리면 윈도우 닫기
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
    {
        glfwSetWindowShouldClose(window, true);
    }

    if (glfwGetKey(window, GLFW_KEY_UP) == GLFW_PRESS)
    {
        mixPercent += 0.05f;
    }

    if (glfwGetKey(window, GLFW_KEY_DOWN) == GLFW_PRESS)
    {
        mixPercent -= 0.05f;
    }
}

// 윈도우 사이즈 변경 시 호출될 콜백 함수
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    glViewport(0, 0, width, height);
}

 

 

■ 여러개의 큐브 렌더

화면에 위치와 회전이 다른 10개의 큐브를 렌더하려고 한다. 큐브의 그래픽 레이아웃은 이미 정의되어 있어, 더 많은 객체를 렌더링할 때 버퍼나 속성 배열을 변경할 필요는 없다. 각 객체에 대해 변경해야 할 유일한 것은 모델 행렬로, 이를 통해 큐브를 월드 공간에 변환한다.

먼저, 각 큐브의 월드 공간 위치를 지정하는 이동 벡터를 정의한다. 10개의 큐브 위치를 glm::vec3 배열에 정의한다.

 

glm::vec3 cubePositions[] = {
    glm::vec3( 0.0f,  0.0f,  0.0f), 
    glm::vec3( 2.0f,  5.0f, -15.0f), 
    glm::vec3(-1.5f, -2.2f, -2.5f),  
    glm::vec3(-3.8f, -2.0f, -12.3f),  
    glm::vec3( 2.4f, -0.4f, -3.5f),  
    glm::vec3(-1.7f,  3.0f, -7.5f),  
    glm::vec3( 1.3f, -2.0f, -2.5f),  
    glm::vec3( 1.5f,  2.0f, -2.5f), 
    glm::vec3( 1.5f,  0.2f, -1.5f), 
    glm::vec3(-1.3f,  1.0f, -1.5f)  
};

 

 

이제 렌더 루프 내에서 glDrawArrays를 10번 호출하고, 각 드로우 콜 전에 각기 다른 모델 행렬을 Vertex Shader에 전달한다.

 

glBindVertexArray(VAO);
for(unsigned int i = 0; i < 10; i++)
{
    glm::mat4 model = glm::mat4(1.0f);
    model = glm::translate(model, cubePositions[i]);
    float angle = 20.0f * i; 
    model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f));
    ourShader.setMat4("model", model);

    glDrawArrays(GL_TRIANGLES, 0, 36);
}

 

 

렌더 루프 내에 작은 반복문을 만들어, 각 모델 행렬에 고유한 회전을 추가하여 객체를 10번 렌더링한다.

● 결과 3

- 소스 코드

https://learnopengl.com/code_viewer_gh.php?code=src/1.getting_started/6.3.coordinate_systems_multiple/coordinate_systems_multiple.cpp