[Learn OpenGL] Hello Triangle - 4

Element Buffer Objects

정점을 렌더링할 때 논의할 마지막 사항은 Element Buffer Object 입니다.

 

EBO가 어떻게 작동하는지 설명하기 위해 예를 들어보겠습니다.

 

삼각형 대시 사각형을 그리고 싶다고 가정해 봅시다.

 

OpenGL은 주로 삼각형을 사용하기 때문에, 두 개의 삼각형을 사용하여 사각형을 그릴 수 있습니다.

 

이렇게 하면 다음과 같은 정점 집합이 생성됩니다.

 

float vertices[] = {
    // 첫 번째 삼각형
     0.5f,  0.5f, 0.0f,  // 오른쪽 상단
     0.5f, -0.5f, 0.0f,  // 오른쪽 하단
    -0.5f,  0.5f, 0.0f,  // 왼쪽 상단
    // 두 번째 삼각형
     0.5f, -0.5f, 0.0f,  // 오른쪽 하단
    -0.5f, -0.5f, 0.0f,  // 왼쪽 하단
    -0.5f,  0.5f, 0.0f   // 왼쪽 상단
};

 

보시다시피, 지정된 정점 중 일부가 중복됩니다.

 

오른쪽 하단과 왼쪽 상단을 두번씩 지정합니다.

 

이것은 50%의 오버헤드 입니다. 같은 사각형을 6개 대신 4개의 정점만으로도 지정할 수 있기 때문입니다.

 

수천개의 삼각형이 있는 더 복잡한 모델의 경우 중복되는 부분이 많아질 수 있습니다.

 

더 나은 해결책은 고유한 정점만을 저장하고, 이 정점들을 그리고자 하는 순서를 지정하는 것입니다.

 

이 경우 사각형을 위해 4개의 정점만 저장하고, 그리고 싶은 순서를 지정하기만 하면 됩니다.

 

OpenGL이 이런 기능을 제공한다면 좋겠지요?

 

다행히도 EBO는 정확히 그렇게 작동합니다.

 

EBO는 정점 버퍼 객체와 마찬가지로 버퍼이며, OpenGL이 어떤 정점을 그릴지 결정하는 데 사용되는 인덱스를 저장합니다.

 

이러한 인덱스를 사용한 드로잉은 우리 문제의 해결책입니다.

 

시작하기 위해서는 먼저 (고유한) 정점과 사각형으로 그리기 위한 인덱스를 지정해야 합니다

 

float vertices[] = {
     0.5f,  0.5f, 0.0f,  // 오른쪽 상단
     0.5f, -0.5f, 0.0f,  // 오른쪽 하단
    -0.5f, -0.5f, 0.0f,  // 왼쪽 하단
    -0.5f,  0.5f, 0.0f   // 왼쪽 상단
};
unsigned int indices[] = {  // 인덱스는 0부터 시작합니다!
    0, 1, 3,   // 첫 번째 삼각형
    1, 2, 3    // 두 번째 삼

 

인덱스를 사용하면 6개 대신 4개의 정점만 필요하다는 것을 알 수 있습니다.

 

다음으로 요소 버퍼 객체(Element Buffer Object, EBO)를 생성해야 합니다.

 

unsigned int EBO;
glGenBuffers(1, &EBO);

 

VBO와 마찬가지로 EBO를 바인딩하고 glBufferData를 사용하여 인덱스를 버퍼에 복사합니다.

 

VBO처럼, 이 호출들도 바인드와 언바인드 호출 사이에 배치해야 하지만,

 

이번에는 버퍼 유형으로 GL_ELEMENT_ARRAY_BUFFER를 지정합니다.

 

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

 

이제 버퍼 대상으로 GL_ELEMENT_ARRAY_BUFFER를 사용한다는 것에 주목하세요.

 

남은 작업은 glDrawArrays 호출을 인덱스 버퍼에서 삼각형을 렌더링하도록 지시하는 glDrawElements로 대체하는 것입니다.

 

glDrawElements를 사용할 때, 현재 바인딩된 요소 버퍼 객체에 제공된 인덱스를 사용하여 그리게 됩니다.

 

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

 

첫 번째 인자는 glDrawArrays와 유사하게 그리고자 하는 모드를 지정합니다.

 

두 번째 인자는 그리고자 하는 요소의 개수 또는 카운트입니다. 6개의 인덱스를 지정했으므로 총 6개의 정점을 그리려고 합니다.

 

세 번째 인자는 인덱스의 유형으로 GL_UNSIGNED_INT입니다.

 

마지막 인자를 사용하여 EBO에서 오프셋을 지정할 수 있습니다(또는 인덱스 배열을 전달할 수 있지만, 그것은 요소 버퍼 객체를 사용하지 않을 때입니다), 하지만 우리는 이것을 0으로 두겠습니다.

 

glDrawElements 함수는 현재 GL_ELEMENT_ARRAY_BUFFER 대상에 바인딩된 EBO에서 인덱스를 가져옵니다.

 

이는 인덱스를 사용하여 객체를 렌더링할 때마다 해당 EBO를 바인딩해야 한다는 것을 의미하며, 이는 다소 번거로울 수 있습니다.

 

하지만 정점 배열 객체(Vertex Array Object, VAO)도 요소 버퍼 객체 바인딩을 추적합니다.

 

VAO가 바인딩되어 있는 동안 마지막으로 바인딩된 요소 버퍼 객체는 VAO의 요소 버퍼 객체로 저장됩니다.

 

VAO에 바인딩하면 해당 EBO도 자동으로 바인딩됩니다.

 

 

VAO는 GL_ELEMENT_ARRAY_BUFFER가 대상일 때 glBindBuffer 호출을 저장합니다.

 

이는 또한 해제 호출도 저장한다는 것을 의미하므로, VAO를 해제하기 전에 요소 배열 버퍼를 해제하지 않도록 주의해야 합니다.

 

그렇지 않으면 EBO가 구성되지 않은 상태가 됩니다.

 

 

이제 초기화 및 렌더링 코드는 다음과 같이 보입니다.

 

// ..:: 초기화 코드 :: ..
// 1. 정점 배열 객체 바인드
glBindVertexArray(VAO);
// 2. OpenGL이 사용할 정점 배열을 정점 버퍼에 복사
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. OpenGL이 사용할 인덱스 배열을 요소 버퍼에 복사
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 그런 다음 정점 속성 포인터 설정
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

[...]

// ..:: 렌더링 루프의 그리기 코드 :: ..
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);

 

프로그램을 실행하면 아래 그림과 같은 이미지를 볼 수 있습니다.