LearnOpenGL - Hello Triangle

url: https://learnopengl.com/Getting-started/Hello-Triangle 생성일: 2020년 12월 23일 오전 1:35

OpenGL에서는 모든 것이 3D 공간에 있지만, 화면이나 창은 픽셀의 2D배열이므로 OpenGL 작업의 대부분은 모든 3D 좌표를 화면에 맞는 2D 픽셀로 변환하는 것입니다. 3D좌표를 2D 픽셀로 변환하는 프로세스는 OpenGL의 그래픽 파이프라인에서 관리합니다. 그래픽 파이프 라인은 크게 두 부분으로 나눌 수 있습니다. 첫 번째 부분은 3D좌표를 2D 좌표로 변환하고 두번째 부분은 2D좌표를 실제 색상 픽셀로 변환합니다. 이 장에서는 그래픽 파이프 라인에 대해 간략하게 설명하고 이를 사용하여 멋진 픽셀을 만드는 방법에 대해 설명합니다.

그래픽 파이프라인은 3D좌표 세트를 입력으로 받아, 이를 화면의 컬러 2D픽셀로 변환합니다. 그래픽파이프라인은 각 단계에서 이전 단계의 출력을 입력으로 요구하는 여러 단계로 나눌 수 있습니다. 이 모든 단계는 고도로 전문화 되어 있으며 (하나의 특정 기능이 있음) 병렬로 쉽게 실행할 수 있습니다. 병렬 특성으로 인해 오늘날의 그래픽카드에는 그래픽 파이프라인 내에서 데이터를 빠르게 처리할 수 있는 수천개의 작은 처리 코어가 있습니다. 프로세싱 코어는 파이프 라인의 각 단계에 대해 GPU에서 작은 프로그램을 실행합니다. 이러한 작은 프로그램을 셰이더라고 합니다.

이러한 셰이더 중 일부는 개발자가 구성할 수 있으므로 기존 기본 셰이더를 대체 할 자체 셰이더를 작성할 수 있었습니다. 이를 통해 파이프라인의 특정 부분을 훨씬 더 세밀하게 제어 할 수 있으며 GPU에서 실행하기 때문에 귀중한 CPU시간도 절약 할 수 있습니다.셰이더는 OpenGL 셰이딩 언어 (GLSL)로 작성되었으며 다음 장에서 더 자세히 살펴보겠습니다.

아래에서 그래픽파이프라인의 모든 단계에 대한 추상적인 표현을 찾을 수 있습니다. 파란색 섹션은 자체 셰이더를 삽입할 수 있는 섹션을 나타냅니다.

보시다시피 그래픽 파이프라인에는 버텍스 데이터를 완전한 렌더링 된 픽셀로 처리하기 위해 특정 부분을 각각 처리하는 많은 섹션이 포함되어 있습니다. 파이프라인의 각 부분을 단순화 된 방식으로 간략하게 설명하여 파이프 라인 작동 방식에 대한 좋은 예시를 보여드리겠습니다.

그래픽 파이프라인에 대한 입력으로 우리는 여기서 Vertex Data 라는 배열에서 삼각형을 형성해야 하는 3개의 3D좌표 목록을 전달합니다. 이 Vertex Data는 버텍스들의 모음입니다. 버텍스는 3D 좌표 당 데이터 집합입니다. 이 버텍스의 데이터는 우리가 원하는 모든 데이터를 포함 할 수 있는 버텍스 속성(Vertex Attribute)을 사용 사용하여 표현되지만, 단순성을 위해 각 버텍스는 3D 위치와 일부 색상 값으로만 구성되어있다고 가정하겠습니다.

OpenGL이 좌표 및 색상 값 모음을 어떻게 만들지 알기 위해서는 OpenGL은 데이터로 어떤 종류의 렌더 유형을 형성 할 것인지 힌트를 요구합니다. 데이터가 점 집합, 삼각형 집합 또는 하나의 긴 선으로 렌더링 되길 원하시나요? 이러한 힌트를 프리미티브라고 하며 그리기 명령을 호출하는 동안 OpenGL에 제공됩니다. 히러한 힌트 중 하나가 GL_POINTS, GL_TRIANGLES 및 GL_LINE_STRIP입니다.

파이프라인의 첫 번째 부분은 단일 버텍스를 입력으로 받는 버텍스 셰이더입니다. 버텍스 셰이더의 주요 목적은 3D좌표를 다른 3D좌표를 변환하는 것이며(나중에 자세한 설명함) 버텍스 셰이더를 사용하면 버텍스 속성에 대한 몇 가지 기본 처리를 수행할 수 있습니다.

프리미티브 어셈블리 단계는 프리미티브를 형성하는 버텍스 셰이더에서 모든 버텍스 (또는 GL_POINTS가 선택된 경우 버텍스)을 입력으로 취하고 주어진 프리미티브 모양의 모든 점을 조립합니다. 이번 예제에서는 삼각형을 생성합니다.

그런 다음 지오메트리 셰이더의 출력은 rasterization 단계로 전달되어 결과 프리미티브(들)를 최종 화면의 해당 픽셀에 매핑하여 프레그먼트 셰이더에 매핑하여 프레그먼트 셰이더가 사용할 프레그먼트를 만듭니다. 프레그먼트 셰이더가 실행되기 전에 클리핑이 수행됩니다. 클리핑은 뷰 외부에 있는 모든 조각을 삭제하여 성능을 향상시킵니다.

OpenGL의 프레그먼트는 OpenGL이 단일 픽셀을 렌더링하는 데 필요한 모든 데이터입니다.

프레그먼트 셰이더의 주요 목적은 픽셀의 최종 색상을 계산하는 것이며 일반적으로 모든 고급 OpenGL 효과가 발생하는 단계입니다. 일반적으로 프래그먼트 셰이더에는 최종 픽셀 색상 (예: 조명, 그림자, 조명 색상 등)을 계산하는 데 사용할 수 있는 3D 장면에 대한 데이터가 포함됩니다.

모든 해당 색상 값이 결정되면 최종 객체는 알파 테스트 및 블렌딩 단계라고 하는 한 단계를 더 통과합니다. 이 단계는 프레그먼트의 해당 깊이 (그리고 스텐실) 값 (나중에 얻을 것임) 을 확인하고 이를 사용하여 결과 프레그먼트가 다른 개체의 앞 또는 뒤에 있는지 확인하고 그에 따라 폐기해야 합니다. 스테이지는 또한 알파 값( 알파값은 개체의 불투명도를 나타냅니다.)을 확인하고 그에 따라 개체를 블렌딩(혼합)합니다. 따라서 픽셀 출력 색상이 프래그먼트 셰이더에서 계산 되더라도 여러 삼각형을 렌더링 할 때 최종 픽샐 섹상은 완전히 다를 수 있습니다.

보시다시피 그래픽파이프라인은 전체가 매우 복잡하고 구성 가능한 부분이 많이 포함되어 있습니다. 그러나 거의 모든 경우에 대해 버텍스 및 프레그먼트 셰이더로만 작업하면 됩니다. 지오메트리 셰이더는 선택 사항이며 일반적으로 기본 셰이더로 남아 있습니다. 여기에 설명하지 않은 테셀레이션 단계와 변환 피드백 루프도 있지만 이건 나중에 설명하겠습니다.

최신 OpenGL에서는 최소한 우리 자신의 버텍스 및 프레그먼트 셰이더를 반드시 정의해야 합니다. (GPU에는 기본 버텍스 / 프레그먼트 셰이더가 없습니다.) 이러한 이유로 첫 번째 삼각형을 렌더링하기 전에 많은 지식이 필요하기 때문에 최신 OpenGL 학습을 시작하기가 매우 어렵습니다. 이 장의 끝에서 마침내 삼각형을 렌더링하면 그래픽 프로그래밍에 대해 더 많이 알게 될 것입니다.

버텍스 입력

무언가를 그리기를 시작하기 위해선 먼저 OpenGL에게 버텍스 데이터를 입력해야 합니다. OpenGL은 그래픽라이브러리이므로 OpenGL에서 지정하는 모든 좌표는 3D입니다. (x, y 그리고 z 좌표계) OpenGL은 모든 3D 좌표계를 너의 스크린에 맞는 2D 픽셀로 간단하게 변환되지 않습니다. OpenGL은 오직 3축을(x , y 그리고 z ) -1.0 에서 1.0 사이의 범위에만 있을때 진행합니다. 모든 좌표계는 정규화된 기기 좌표 범위에만 너의 화면에 보입니다. (그 밖에 있는 부분은 보이지 않습니다.) 하나의 삼각형을 렌더링하기 위해 3D 좌표를 가지고있는 각각의 버텍스들을 변환해야합니다. 우리는 정규화된 장치 좌표를 float 배열로 정의하겠습니다.

float vertices[] = {
    -0.5f, -0.5f, 0.0f,
     0.5f, -0.5f, 0.0f,
     0.0f,  0.5f, 0.0f
};  

OpenGL은 3D 공간에서 작동하므로 우리가 렌더링하는 2D 삼각형은 각각 버텍스들의 z 좌표는 0.0 을 가집니다. 이렇게 하면 삼각형의 깊이가 같아지므로 2D같이 보이게 됩니다.

정규화된 기기 좌표 (Normalized Device Coordinates NDC)

버텍스 좌표들이 버텍스 쉐이더를 통과하게 되면, 그것들은 -1.0 에서 1.0 범위의 x , y, z 의 작은 공간의 정규화된 기기 좌표가 되어야합니다. 어떠한 좌표들이 이 범위가 벗어난다면 버려지거나/clipped 되어 너의 스크린에 보여지지 않게 됩니다. 아래를 보면 삼각형이 정규화된 기기 좌표로 변환되는 것을 볼 수 있습니다. (z 축은 무시하겠습니다.)

일반적인 화면 좌표와 달리, 화면은 위쪽 방향의 y축 점들을 고정하고 그래프 중앙에는 왼쪽 상단 대신 (0,0) 좌표가 있습니다. 결국 변환된 모든 좌표가 이 좌표 공간에 표시되도록 합니다. 그렇지 않으면 해당 좌표가 표시되지 않습니다.

NDC 좌표는 glViewport에서 제공한 데이터를 사용하여 뷰포트 변환을 통해 화면 공간 좌표로 변환됩니다. 결과 화면 공간 좌표는 프레그먼트 셰이더에 대한 입력으로 프레그먼트로 변환됩니다.

정의 된 버텍스 데이터를 사용하여 그래픽 파이프라인의 첫 번째 프로세스인 버텍스셰이더에 입력으로 보내려고 합니다. 이는 버텍스 데이터를 저장하는 GPU에 메모리를 만들고 OpenGL이 메모리를 해석하는 방법을 구성하고 데이터를 그래픽카드로 보내는 방법으로 지정하여 수행됩니다. 그런 다음 버텍스 셰이더는 메모리에서 지정한만큼의 버텍스를 처리합니다.

우리는 GPU의 메모리에 많은 수의 버텍스를 저장할 수 있는 소위 버텍스 버퍼 개체(VBO)를 통해 이 메모리를 관리합니다. 이러한 버퍼 개체를 사용하는 이점은 한번에 한 버텍스씩 데이터를 보낼 필요 없이 대량의 데이터를 한번에 그래픽카드로 보내고 충분한 메모리가 남아있는 경우 그대로 유지할 수 있다는 것입니다. CPU에서 그래픽카드로 데이터를 보내는 것은 상대적으로 느리기 때문에 가능한 많은 데이터를 한번에 보내는게 중요합니다. 데이터가 그래픽카드의 메모리에 있으면 버텍스셰이더는 버텍스에 거의 즉각적으로 액세스하여 매우 빠릅니다.

버텍스 버퍼 개체는 OpenGL 장에서 말한 것처럼 OpenGL 개체의 첫번째 항목입니다. OpenGL의 모든 개체와 마찬가지로 이 버퍼에는 해당 버퍼에 해당하는 고유한 ID가 있으므로 glGenBuffers 함수를 사용하여 버퍼 ID로 하나 생성할 수 있습니다.

unsigned int VBO;
glGenBuffers(1, &VBO);  //버퍼의 갯수

OpenGL에는 많은 유형의 버퍼 개체가 있으며 버텍스 버퍼 개체의 버퍼 유형은 GL_ARRAY_BUFFER 입니다. OpenGL을 사용하면 버퍼 유형이 다른한 한번에 여러 버퍼에 바인딩 할 수 있습니다. glBlindBuffer 함수를 사용하여 새로 생서된 버퍼를 GL_ARRAY_BUFFER 타겟에 바인딩할 수 있습니다.

glBindBuffer(GL_ARRAY_BUFFER, VBO);  

그 시점부터 우리가 만드는 모든 버퍼 호출(GL_ARRAY_BUFFER 타겟에서)은 현재 바인딩된 버퍼인 VBO를 구성하는데 사용됩니다. 그런 다음 이전에 정의된 버텍스 데이터를 버퍼의 메모리에 복사하는 glBufferData 함수를 호출 할 수 있습니다.

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glBufferData는 사용자 정의 데이터를 현재 바인딩된 버퍼로 복사하는 것을 위해 특별히 고안된 함수입니다. 첫번째 인수는 데이터를 복사하려는 버퍼의 유형입니다. 현재 GL_ARRAY_BUFFER 타겟에 바인딩 된 버텍스 버퍼 개체입니다.(VBO) 두번째 인수는 버퍼에 전달할 데이터의 크기(바이트) 를 지정합니다. 버텍스 데이터의 크기는 단순한 sizeof 면 충분합니다. 세번째 매개변수는 우리가 보내려는 실제 데이터입니다.

네번째 매개변수는 그래픽카드가 주어진 데이터를 관리하는 방법을 지정합니다. 이는 3가지 형태를 취할 수 있습니다.

• GL_STREAM_DRAW : 데이터가 한번만 설정되고 GPU에서 적게 사용됩니다.
• GL_STATIC_DRAW : 데이터가 한번만 설정되고 많이 사용됩니다.
• GL_DYNAMIC_DRAW : 데이터가 많이 변경되고 많이 사용합니다.

삼각형의 위치 데이터는 변경되지 않고 많이 사용되며 모든 렌더 호출에서 동일하게 유지되므로 사용 유형은 GL_STATIC_DRAW 가 가장 좋습니다. 예를 들어 자주 변경될 수 이쓴ㄴ 데이터가 있는 버퍼가 있는 경우 GL_DYNAMIC_DRAW 유형을 사용하면 그래픽 카드가 더 빠른 쓰기를 허용하는 메모리에 데이터를 배치할 수 있습니다.

현재 우리는 VBO라는 버텍스 버퍼 개체에의해 관리되는 것처럼 그래픽카드의 메모리 내에 버텍스 데이터를 저장했습니다. 다음으로 실제로 이 데이터를 처리하는 버텍스 및 프레그먼트 셰이더를 만들고자 하므로 빌드를 시작하겠습니다.

버텍스 셰이더

버텍스 셰이더는 우리와 같은 사람들이 프로그래밍 할 수 있는 셰이더 중 하나입니다. 최신 OpenGL에서는 렌더링을 수행하려면 최소한 버텍스 및 프레그먼트 셰이더를 설정해야하므로 셰이더를 간략하게 소개하고 첫 번째 삼각형을 그리기 위해 두 개의 매우 간단한 셰이더를 구성합니다. 다음 장에서는 셰이더에 대해 자세히 설명합니다.

가장 먼저 해야 할 일은 셰이더 언어 GLSL(OpenGL Shading Language)로 버텍스 셰이더를 작성한 다음 셰이더를 컴파일하여 애플리케이션에서 사용할 수 있도록 하는것입니다. 아래에서 GLSL의 매우 기본적인 버텍스 셰이더의 소스코드를 찾아볼 수 있습니다.

#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

보시다시피 GLSL은 C와 비슷합니다. 각 셰이더는 버전 선언으로 시작합니다. OpenGL 3.3 이상부터 GLSL 버전 번호는 OpenGL 버전과 일치합니다. (예 : GLSL 버전 420은 OpenGL 4.2에 해당). 또한 core profile 기능을 사용하고 있음을 명시적으로 나타냅니다.

다음으로 in 키워드를 사용하여 버텍스 셰이더의 모든 입력 버텍스 속성을 선언합니다. 지금은 위치 데이터에만 관심이 있으므로 하나의 버텍스 속성만 필요합니다. GLSL에는 접미사 숫자를 기준으로 1~4개의 부동 소수점을 포함하는 벡터 데이터 유형이 있습니다. 각 버텍스에는 3D 좌표가 있으므로 aPos 라는 이름으로 vec3 입력 변수를 만듭니다. 또한 layout (location = 0) 을 통해 입력 변수의 위치를 구체적으로 설정했으며 나중에 해당 위치가 필요한 이유를 알 수 있습니다.

Vector

그래픽 프로그래밍에서 우리는 벡터의 수학적 개념을 자주 사용합니다. 벡터는 모든 공간에서 위치/방향을 깔끔하게 표현하고 유용한 수학적 속성을 가지고 있기 때문입니다. GLSL의 벡터는 최대 크기가 4이고 각 값은 각각 vec.x , vec.y , vec.z 및 vec.w 를 통해 접근할 수 있습니다. 각각에 대한 값은 공간에서의 좌표를 나타냅니다. vec.w 는 공간의 위치로 사용되지 않지만 (우리는 4D가 아닌 3D를 다르고 있음) 원근 분할이라는 것에 사용됩니다. 이후 장에서 벡터에 대해 훨씬 더 깊게 다뤄보겠습니다.

버텍스 셰이더의 출력을 설정하려면 씬 뒤에서 사전 정의된 vec4 gl_Position 변수에 위치 데이터를 할당해야 합니다. 메인 함수의 끝에서, 우리가 설정한 gl_position은 버텍스 셰이더의 출력으로 사용될 것입니다. 입력은 크기 3의 벡터이므로 이를 크기 4의 벡터로 케스팅 해야 합니다. vec4 의 생성자 안에 vec3 값을 삽입하고 w 구성 요소를 1.0f 로 설정하면 됩니다. (이렇게 하는 이유는 이후 장에서 설명하겠습니다.)

셰이더 컴파일

버텍스 셰이더의 소스 코드를 가져 와서 지금 코드 파일 맨 위에 const char 문자열에 저장합니다.

const char *vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 aPos;\n"
    "void main()\n"
    "{\n"
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    "}\0";

OpenGL이 셰이더를 사용하려면 런타임에 소스코드에서 동적으로 컴파일 해야 합니다. 가장 먼저 해야 할 일은 셰이더 개체를 만드는 것입니다. 다시 ID로 참조됩니다. 따라서 버텍스 셰이더를 unsigned int 로 지정하고 glCreateShader로 셰이더를 만듭니다.

unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);

glCreateShader에 대한 인수로 생성하려는 셰이더 유형을 제공합니다. 버텍스 셰이더를 생성하고 있으므로 GL_VERTEX_SHADER 로 전달합니다. 다음으로 셰이더 소스 코드를 셰이더 개체에 연결하고 셰이더를 컴파일합니다.

glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);

glShaderSource 함수는 컴파일 셰이더 개체를 첫번째 인수로 사용합니다. 두번째 인수는 소스 코드로 전달할 문자열 수를 지정합니다. 세번째 매개 변수는 버텍스 셰이더의 실제 소스 코드이며 네번째 매개 변수는 NULL로 남겨 둘 수 있습니다.

glCompileShader를 호출 한 후 컴파일이 성공했는지 확인하고 그렇지 않은 경우 어떤 오류가 발견되었는지 확인하여 오류를 수정할 수 있습니다. 컴파일 타임 오류 확인은 다음과 같이 수행됩니다.

int  success;
char infoLog[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);

먼저 성공을 나타내는 정수와 오류 메시지(있는 경우)에 대한 저장 컨테이너를 정의합니다. 그런 다음 glGetShaderiv로 컴파일이 성공했는지 확인합니다. 컴파일이 실패하면 glGetShaderInfoLog를 사용하여 오류 메시지를 검색하고 오류 메시지를 출력해야 합니다.

if(!success)
{
    glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
    std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
}

아무런 애러를 감지하지 못했다면 버텍스 셰이더가 컴파일 되었다는 이야기입니다.

프레그먼트 셰이더

프레그먼트 셰이더는 삼각형을 렌더링하기 위해 만들어진 두번째이자 마지막 셰이더입니다. 프레그먼트 셰이더는 픽셀의 색상 출력을 계산하는 것입니다. 단순하게 유지하기 위해 프레그먼트 셰이더는 항상 주황색을 출력합니다.

컴퓨터 그래픽의 색상은 일반적으로 RGBA로 축약되는 빨강, 녹색, 파랑 및 알파(투명도) 구성 요소의 4개의 값 배열로 표시됩니다. OpenGL 또는 GLSL에서 색상을 정의할 때 각 구성 요소의 강도를 0.0 에서 1.0 사이의 값으로 설정합니다. 예를 들어 빨간색은 1.0 으로, 녹색을 1.0 으로 설정하면 두 색상이 혼합되어 노란색이 됩니다. 이 3가지 색상 구소 요소를 고려하면 1600만 가지가 넘는 색상을 생성할 수 있습니다.

#version 330 core
out vec4 FragColor;

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
} 

프레그먼트 셰이더에는 하나의 출력 변수만 필요하며 이는 우리가 직접 계싼해야하는 최종 색상 출력을 정의하는 크기 4의 벡터입니다. out 키워드를 사용하여 출력 값을 선언할 수 있으며 여기에서 즉시 FragColor 라는 이름을 지정합니다. 다음으로 알파 값이 1.0 (1.0 은 완전히 불투명함)의 주황색으로 vec4를 색상 출력에 할당합니다.

프래그먼트 셰이더를 컴파일하는 과정은 버텍스 셰이더와 비슷하지만 이번에는 셰이더 유형으로 GL_FRAGMENT_SHADER 상수를 사용합니다.

unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

이제 두 셰이더가 모두 컴파일되고 남은 것은 렌더링에 사용할 수 있는 셰이더 프로그램에 두 셰이더 개체를 연결하는 것 뿐입니다. 여기서도 컴파일 오류를 확인하세요!

셰이더 프로그램

셰이더 프로그램 개체는 결합 된 여러 셰이더의 최종 링크 버전입니다. 막 컴파일 된 셰이더를 사용하려면 셰이더 프로그램 개체에 링크한 다음 개체를 렌더링 할때 이 셰이더 프로그램을 활성화 해야 합니다. 활성화된 셰이더 프로그램의 셰이더는 렌더링 호출을 실행할 때 사용됩니다.

셰이더를 프로그램에 연결할 때 각 셰이더의 출력을 다음 셰이더의 입력에 연결합니다. 출력과 입력기 일치하지 않으면 링크 오류가 발생합니다.

프로그램 개체를 만드는 것은 쉽습니다.

unsigned int shaderProgram;
shaderProgram = glCreateProgram();

glCreateProgram 함수는 프로그램을 생성하고 새로 생성 된 프로그램 개체에 대한 ID 참조를 반환합니다. 이제 이전에 컴파일 된 셰이더를 프로그램 개체에 연결 한 다음 glLinkProgram과 연결해야 합니다.

glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

코드는 매우 자명해야 합니다. 셰이더를 프로그램에 연결하고 glLinkProgram을 통해 연결합니다.

셰이더 컴파일과 마찬가지로 셰이더 프로그램 연결이 실패해쓴지 확인하고 해당 로그를 검색 할 수도 있습니다. 그러나 이제 glGetshaderiv 및 glGetShaderInfoLog를 사용하는 대신 다음을 사용합니다.

glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if(!success) {
    glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
    ...
}

결과는 새로 생성 된 프로그램 개체를 인수로 사용하여 glUseProgram을 호출하여 활성화 할 수 있는 프로그램 개체입니다.

glUseProgram(shaderProgram);

glUseProgram 이후의 모든 셰이더 및 렌더링 호출은 이제 이 프로그램 개체 (및 셰이더)를 사용합니다.

아 맞다. 일단 이 셰이더 개체를 프로그램 개체에 연결했다면 삭제하는 것을 잊지 마세요! 더 이상 필요하지 않습니다.

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

지금 우리는 입력 버텍스 데이터를 GPU에 보내고 GPU에 버텍스 및 프래그먼트 셰이더 내에서 버텍스 데이터를 처리하는 방법을 지시했습니다. 거의 다 왔지만 아직 남았습니다. OpenGL은 아직 메모리에서 버텍스 데이터를 해석하는 방법과 버텍스 데이터를 버텍스 셰이더 속성에 연결하는 방법을 아직 모릅니다. 우리는 친절하게 OpenGL에게 그 방법을 알려줄 것입니다.

버택스 속성 링킹

버텍스 셰이더를 사용하면 버텍스 속성의 형태로 원하는 입력을 지정할 수 있으며, 이는 유연성을 크게 높혀주지만 입력 데이터의 어떤 부분이 버텍스 셰이더의 어떤 버텍스 속성으로 이동하는지 수동으로 지정해야 함을 뜻하기도 합니다. 이는 OpenGL이 렌더링 전에 버텍스 데이터를 해석하는 방법을 지정해야 함을 의미합니다.

버텍스 버퍼 데이터는 다음과 같은 형식으로 지정됩니다.

위치 데이터는 32비트 (4바이트) 부동 소수점 값으로 저장됩니다.

• 각 위치는 3개의 값으로 구성됩니다.
• 각 3개 값 세트 사이에는 공백(또는 다른 값)이 없습니다. 값은 배열에 빼곡히 압축되어 있습니다.
• 데이터의 첫 번째 값은 버퍼의 시작 부분에 있습니다.

이 지식을 바탕으로 glVertexAttribPointer를 사용하여 버텍스 데이터(버텍스 속성 당)를 해석하는 방법을 OpenGL에게 알려줄 수 있습니다.

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);  

glVertexAttribPointer 함수에는 매개 변수가 상당히 많으므로 자세히 살펴보겠습니다.

• 첫 번째 매개 변수는 구성하려는 버텍스 속성을 지정합니다. layout (location = 0) 을 사용하여 버텍스 셰이더에서 위치 버텍스 속성의 위치를 지정했습니다. 이것은 버텍스 속성의 위치를 0 으로 설정하고 이 vertex 속성에 데이터를 전달하고 싶기 때문에 0 을 입력합니다.
• 다음 인수는 버텍스 속성의 크기를 지정합니다. vertex 속성은 vec3 이므로 3 값을 넣어줍니다.
• 세번째 인수는 GL_FLOAT 데이터의 유형을 지정합니다. (GLSL의 vec* 는 부동소수점 값으로 구성됨).
• 다음 인수는 데이터를 정규화 할지의 여부를 지정합니다. 정수 데이터 유형 (int, byte)를 입력하고 이를 GL_TRUE로 설정하면 정수 데이터는 0 (또는 부호 있는 데이터일 경우 1 )로 정규화 되고 float으로 변환 될 때 1 로 정규화 됩니다. 이는 우리와 관련이 없으므로 GL_FALSE로 두겠습니다.
• 다섯번째 인수는 stride로 알려져 있으며, 이는 연속된 버텍스 속성 사이의 공간을 알려줍니다. 다음 위치 데이터 세트는 float 크기의 정확히 3배 떨어져 있으므로 해당 값을 stride로 지정합니다. 배열이 빼곡히 압축되어 있다는 것을 알고 있기 때문에 (다음 버텍스 속성 값 사이에 공간이 없음) OpenGL이 stride를 결정할 수 있도록 stride를 0 으로 지정할 수도 있습니다 ( 값이 빼곡히 압축 된 경우에만 작동함.) 더 많은 버텍스 속성이 있을 때마다 각 버텍스 속성 사이의 간격을 신중하게 정의해야 하지만, 나중에 더 많은 예제를 보게 될 것입니다.
• 마지막 매개 변수는 void* 유형이므로 이상한 캐스팅이 필요합니다. 이것은 버퍼에서 위치 데이터가 시작되는 오프셋입니다. 위치 데이터가 데이터 배열의 시작 부분에 있으므로 이 값은 0 입니다. 이 매개 변수에 대해서는 나중에 자세히 살펴보겠습니다.

각 버텍스 속성은 VBO가 관리하는 메모리에서 데이터를 가져오며, 데이터를 가져오는 VBO(여러 VBO를 가질 수 있음)는 glVertexAttribPointer를 호출할 때 현재 GL_ARRAY_BUFFER에 바인딩 된 VBO에 의해 결정됩니다. 이전에 정의 된 VBO는 glVertexAttribPointer를 호출하기 전에 여전히 바인딩되어 있으므로 버텍스 속성 0은 이제 버텍스 데이터와 연결됩니다.

이제 OpenGL이 버텍스 데이터를 해석하는 방법을 지정했으므로 버텍스속성 위치를 인수로 제공하는 glEnableVertexAttribArray를 사용하여 버텍스 속성도 활성화해야합니다. 버텍스 속성은 기본적으로 비활성화 되어 있습니다. 활성화를 끝냈다면 우리는 모든 것을 설정했습니다! 우리는 버텍스 개체를 사용하여 버퍼에서 버텍스 데이터를 초기화하고, 버텍스 및 프레그먼트 셰이더를 설정하고, OpenGL에게 버텍스 데이터를 버텍스 셰이더의 버텍스 속성과 연결하는 방법을 알려주었습니다. OpenGL에서 개체를 그리면 다음과 같습니다.

// 0. OpenGL이 사용할 버퍼에 우리의 버텍스 배열을 복사합니다.
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 1. 그런다음 버텍스 속성 포인터를 세팅합니다.
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);  
// 2. 물체를 랜더링하고 싶을 때 우리가 짠 셰이더 프로그램을 사용합니다.
glUseProgram(shaderProgram);
// 3. 이제 물체를 그립니다.
someOpenGLFunctionThatDrawsOurTriangle();   

물체를 그리고 싶을때마다 이러한 과정을 반복해야 합니다. 그렇게 많아 보이지 않을수도 있지만, 5개 이상의 버텍스 속성과 100개 이상의 서로 다른 오브젝트가 있다고 상상해보세요. 적절한 버퍼 개체를 바인딩하고 각 개체에 대한 모든 버텍스 속성을 구성하는 것은 번거로운 프로세스가 됩니다. 이러한 모든 상태 구성을 개체에 저장하고 단순히 이 개체를 바인딩하여 상태를 복원 할 수 있는 방법이 있다면 어떨까요?

Vertex Array Object

버텍스 배열 개체 (VAO라고 함)는 버텍스 버퍼 개체처럼 바인딩 될 수 있으며 해당 지점에서 이후의 모든 버텍스 속성 호출은 VAO 내부에 저장됩니다. 이것은 버텍스 속성 포인터를 구성 할 때 이러한 호출을 한 번만 수행하면 되고 개체를 그릴 때마다 해당 VAO를 바인딩 할 수 있다는 장점이 있습니다. 따라서 서로 다른 VAO를 바인딩 하는 것 만큼 쉽게 서로 다른 버텍스 데이터와 버텍스 속성 구성들 사이를 전환할 수 있습니다. 방금 설정한 모든 상태는 VAO 내에 저장됩니다.

Core OpenGL은 VAO를 사용해야 버텍스 입력으로 무엇을 해야 하는지 알 수 있습니다. 만약 우리가 VAO를 묶지 못한다면 OpenGL은 어떠한 것도 그리지 않을 것입니다.

버텍스 배열 개체에는 다음이 저장됩니다.

• glVertexAttribPointer를 통한 버텍스 속성 구성
• glVertexAttribPointer에 대한 호출별 버텍스 속성과 연관된 버텍스 버퍼 개체.

\VAO를 만드는 프로세스는 VBO를 만들었을 때와 비슷합니다.

unsigned int VAO;
glGenVertexArrays(1, &VAO);  

VAO를 사용하려면 glBindVertexArray를 사용하여 VAO를 바인딩 하기만 하면 됩니다. 그 시점부터 우리는 해당 VBO(들)와 속성 퍼인터(들)을 바인드/구성 한 다음 나중에 사용하기 위해 VAO를 언 바인드 해야 합니다. 개체를 그리려는 즉시 개체를 그리기 전에 선호하는 설정으로 VAO를 바인딩하기만 하면 됩니다. 코드에서 이것은 다음과 같이 보일 껍니다.

// ..:: 초기화 코드 (한 번만 수행 (개체가 자주 변경되지 않는 한)) :: ..
// 1. Vertex Array Object 바인딩
glBindVertexArray(VAO);
// 2. OpenGL이 사용할 버퍼에 버택스 배열을 복사합니다.
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 그런다음 우리의 버텍스 속성 포인터를 세팅합니다.
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);  
  
[...]

// ..:: 그리는 코드 (랜더 루프에서) :: ..
// 4. 물체를 그립니다.
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
someOpenGLFunctionThatDrawsOurTriangle();   

이게 다입니다! 지단 몇 백만 페이징서 수행 한 모든 작업은 버텍스 속성 구성과 사용할 VBO를 VAO에 저장하는 이 순간까지 이어졌습니다. 일반적으로는 그리려는 개체가 여러 개인 경우 먼저 모든 VAO (및 필요한 VBO 및 속성 포인터)를 생성 / 구성하고 나중에 사용하기 위해 저장합니다. 개체 중 하나를 그리려는 순간 해당 VAO를 가져 와서 바인딩 한 다음 개체를 그리고 VAO를 다시 바인딩 해제합니다.

우리 모두가 기다려 온 삼각형

선택한 개체를 그리기 위해 OpenGL은 현재 활성화 된 셰이더, 이전에 정의 된 버텍스 속성 구성 및 VBO의 버텍스 데이터 (VAO를 통해 간접적으로 바인딩 됨)를 사용하여 프리미티브를 그리는 glDrawArrays 함수를 제공합니다.

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

glDrawArrays 함수는 우리가 그리려는 OpenGL 기본 유형을 첫 번째 인수로 취합니다. 처음에 삼각형을 그리고 싶다고 말 했으니 GL_TRIANGLES를 전달합니다. 두 번째 인수는 우리가 그리려는 버텍스 배열의 시작 인덱스를 지정합니다. 우리는 이것을 0 으로 둡니다. 마지막 인수는 우리가 그리는 버텍스의 수를 저장합니다. 즉, 3 입니다.(데이터에서 정확히 3개의 버텍스 길이 인 삼각형 1개만 렌더링합니다.)

이제 코드를 컴파일하고 오류가 나면 거꾸로 작업하십시오. 애플리케이션이 컴파일 되자말자 다음 결과가 표시됩니다.

전체 프로그램의 소스 코드는 여기 있습니다.

출력이 똑같지 않다면 그 과정에서 뭔가 잘못했을 가능성이 있으므로 전체 소스 코드를 확인하고 놓친 것이 있는지 확인하세요.

Element Buffer Objects (요소 버퍼 개체)

버텍스를 렌더링 할 때 마지막으로 논의하고 싶은 것이 하나 있는데 그것은 EBO로 축약된 Element Buffer Objects 입니다. 요소 버퍼 개체가 작동하는 방식을 설명하기 위해 예제를 보는 것이 가장 좋습니다. 삼각형 대신 사각형을 그리려고 한다고 가정합니다. 두 개의 삼각형을 사용하여 직사각형을 그릴 수 있습니다. (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   // 왼쪽 상단
}; 

보시다시피 지정된 버텍스에 일부 겹치는 부분이 있습니다. 오른쪽 하단 과 왼쪽 상단을 두 번 지정합니다! 같은 사각형이 6개가 아닌 4개의 버텍스로만 지정 될 수 있기 때문에 이것은 50% 오버헤드입니다. 이것은 큰 덩어덩어리가 있는 1000개 이상의 삼각형이 겹치는 경우가 있는 복잡한 모델일 경우 더 악화될 것입니다. 더 나은 해결책은 고유 한 버텍스만 저장 한 다음 이러한 버텍스를 그릴 순서를 지정하는 것입니다. 이 경우 사각형에 4개의 버텍스만 저장 한 다음 순서를 지정하면 됩니다. 우리는 그것을 해보고 싶습니다. OpenGL에 이와 같은 기능을 제공한다면 좋지 않을까요?

고맙게도, 요소 버퍼 개체가 정확히 그러한 역할을 합니다. 버텍스 버퍼 개체와 비슷한 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개의 꼭지점이 필요하다는 것을 알 수 있습니다. 다음으로 요소 버퍼 개체를 만들어야 합니다.

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

VBO와 마찬가지로 EBO를 바인딩하고 glBufferData를 사용하여 인덱스를 버퍼에 복사합니다. 또한, 이번에는 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 를 버퍼 타겟으로으로 제공합니다. 마지막으로 할 일은 glDrawArray 호출을 glDrawElements로 대체하여 인덱스 버퍼에서 삼각형 렌더링을 할 것임을 나타내는 것입니다. glDrawElements를 사용할 때 현재 바인딩 된 요소 버퍼 개체에 제공된 인덱스를 사용하여 그릴 것입니다.

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

첫 번째 인수는 glDrawArrays와 유사하게 그릴 모드를 지정합니다. 두번째 인수는 그릴 요소의 개수 또는 횟수입니다. 6개의 인덱스를 지정했으므로 총 6개의 정점을 그리려고 합니다. 세 번째 인수는 GL_UNSIGNED_INT 유형의 인덱스 유형힙니다. 마지막 인수를 사용하면 EBO에서 오프셋을 지정할 수 있지만(또는 인덱스 배열을 전달 할 수 있지만 요소 버퍼 개체를 사용하지 않는 경우) 0으로 남겨 둡니다.

glDrawElements 함수는 현재 GL_ELEMENT_ARRAY_BUFFER 대상에 바인딩 된 EBO에서 인덱스를 가져옵니다. 이것은 우리가 인덱스로 개체를 렌더링 하고 싶을 때마다 해당 EBO를 바인딩 해야 함을 의미합니다. 꼭지점 배열 개체도 요소 버퍼 개체 바인딩을 추적합니다. VAO가 바인딩 된 동안 바인딩되는 마지막 요소 버퍼 개체는 VAO의 요소 버퍼 개체로 저장됩니다. VAO에 바인딩 되면 해당 EBO도 자동으로 바인딩 됩니다.

VAO는 대상이 GL_ELEMENT_ARRAY_BUFFER 일 때 glBindBuffer 호출을 저장합니다. 이것은 또한 바인딩 해제 호출을 저장하므로 VAO바인딩을 해제하기 전에 요소 배열 버퍼를 바인딩 해제하지 않았는지 확인하십시오. 그렇지 않으면 EBO가 구성되지 않습니다.

결과 초기화 및 그리기 코드는 이제 다음과 같습니다.

// ..:: Initialization code :: ..
// 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);  

[...]
  
// ..:: Drawing code (in render loop) :: ..
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);

프로그램을 실행하면 아래와 같은 이미지가 표시됩니다. 왼쪽 이미지는 익숙해 보이고 오른쪽 이미지는 와이어 프레임 모드에서 그려진 직사각형입니다. 와이어어 프레임 사각형은 사각형이 실제로 두 개의 삼각형으로 구성되어 있음을 보여줍니다.

와이어프레임 모드

와이어프레임 모드로 삼각형을 그리면 너는 OpenGL이 glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) 을 통해 프리미티브를 그리는 방법을 구성할 수 있습니다. 첫 번째 인수는 모든 삼각형의 앞면과 뒷면에 적용하고 싶다고 말하고 두 번째 인자는 선으로 그리라고 합니다. 이후의 모든 드로잉 호출은 glPolygonMode(GL_FRONT_AND_BACK, GL_FILL) 을 사용하여 기본값을 다시 설정할 때까지 와이어 프레임 모드에서 삼각형을 렌더링합니다.

오류가 있으면 뒤로 돌아가서 놓친 것이 있는지 확인하십시오. 전체 소스 코드는 여기에서 찾을 수 있습니다.

우리가 그랬던 것처럼 삼각형이나 직사각형을 그릴 수 있게 되었다면 축하합니다. 현대 OpenGL의 가장 어려운 부분 중 하나인 첫 삼각형을 그릴 수 있었습니다. 첫 삼각형을 그리기 전에 많은 양의 지식이 필요하기 때문에 이것은 어려운 부분입니다. 고맙게도 우리는 이제 그 장벽을 넘어서고 다음 장은 이해하기 훨씬 더 쉬울 것입니다.

Additional resources

• antongerdelan.net/hellotriangle: Anton Gerdelan's take on rendering the first triangle.
• open.gl/drawing: Alexander Overvoorde's take on rendering the first triangle.
• antongerdelan.net/vertexbuffers: some extra insights into vertex buffer objects.
• learnopengl.com/In-Practice/Debugging: there are a lot of steps involved in this chapter; if you're stuck it may be worthwhile to read a bit on debugging in OpenGL (up until the debug output section).

Exercises

1. 데이터에 더 많은 정점을 추가하여 glDrawArrays를 사용하여 2개의 삼각형을 나란히 그려보십시오. : 정답
2. 이제 데이터에 대해 두 개의 서로 다른 VAO 및 VBO를 사용하여 동일한 두 개의 삼각형을 만들어 보세요 : 정답
3. 두 번째 프로그램이 노란색을 출력하는 다른 프레그먼트 셰이더를 사용하는 두 개의 셰이더 프로그램을 만듭니다. 두 삼각형을 다시 그립니다. 두 삼각형을 모두 노란색을 출력하는 곳에서 그립니다. : 정답