[Learn OpenGL] Hello Triangle - 2

Vertext input

무엇인가를 그리기 위해서는 우선 OpenGL에 입력 정점 데이터를 제공해야 합니다.

 

OepnGl은 3D그래픽 라이브러리이므로 모든 좌표는 3D(즉, x, y, z)입니다.

 

OpenGL은 단순히 모든 3D좌표를 화면의 2D픽셀로 변환하지 않습니다.

 

OpenGL은 3D좌표가 모든 3축에서 -1.0과 1.0 사이의 특정 범위에 있을 때만 처리합니다.

 

이렇게 Normilized device coordinates는 화면에 표시됩니다.(이 범위 밖의 모든 좌표는 표시되지 않습니다)

 

 

단일 삼각형을 렌더링하고자 하므로 총 세 개의 정점을 지정하려고 합니다.

 

각 정점은 3D위치를 가지고 있습니다. 우리는 그것들을 OpenGL의 가시영역인 Normilized device coordinates로 정의합니다.

 

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

 

OpenGL은 3D 공간에서 작동하기 때문에 각 정점이 z 좌표를 0.0으로 갖는 2D 삼각형을 렌더링합니다.

 

이렇게 하면 삼각형의 깊이가 동일하게 유지되어 2D처럼 보입니다.

 

Normilized device coordinates(NDC)

vertex shader에서 정점 좌표가 처리된 후, 그것들은 x, y, z 값이 -1.0 에서 1.0까지 변하는 작은 공간인

 

ndc에 있어야 합니다.

 

이 범위를 벗어나는 좌표는 버려지거나 클리핑되어 화면에 표시되지 않습니다.

 

아래는 z축을 무시한 ndc 내에 지정된 삼각형을 볼 수 있습니다.

 

 

 

NDC좌표는 glViewport에서 제공한 데이터를 사용하여 뷰포트 변환을 통해 화면 공가 좌표로 변환 됩니다.

 

그 결과 화면 공간 좌표는 프래그먼트 셰이더에 입력으로 변환 됩니다.

 

 

정점 데이터를 정의한 후, 이를 그래픽 파이프라인의 첫 번째 과정인 정점 셰이더에 입력으로 보내고자 합니다.

 

이는 GPU에 정점 데이터를 저장할 메모리를 생성하고, OpenGL이 메모리를 해석하는 방법을 구성하며, 데이터를 그래픽 카드로 보내는 방법을 지정함으로써 수행됩니다.

 

정점 셰이더는 메모리에서 우리가 지시한 만큼의 정점을 처리합니다.

 

이 메모리는 소위 정점 버퍼 객체(VBO)를 통해 관리됩니다.

 

VBO는 GPU의 메모리에 많은 수의 정점을 저장할 수 있습니다.

 

이러한 버퍼 객체를 사용하는 장점은 대량의 데이터를 한 번에 그래픽 카드로 보낼 수 있고, 메모리가 충분하다면 그곳에 데이터를 유지할 수 있다는 것입니다.

 

한 번에 한 정점씩 데이터를 보내는 것보다 훨씬 효율적입니다. CPU에서 그래픽 카드로 데이터를 보내는 것은 상대적으로 느리기 때문에, 가능한 많은 데이터를 한 번에 보내려고 합니다.

 

데이터가 그래픽 카드의 메모리에 있으면 정점 셰이더는 정점에 거의 즉각적으로 접근할 수 있어 매우 빠릅니다.

 

 

정점 버퍼 객체는 OpenGL 장에서 논의한 바와 같이 OpenGL 객체의 첫 번째 예입니다.

 

OpenGL의 다른 객체와 마찬가지로, 이 버퍼에는 해당 버퍼에 대응하는 고유 ID가 있으므로 glGenBuffers 함수를 사용하여 버퍼 ID를 생성할 수 있습니다

 

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

 

OpenGL에는 많은 종류의 버퍼 객체가 있으며, 정점 버퍼 객체의 버퍼 타입은 GL_ARRAY_BUFFER입니다.

 

OpenGL은 다른 버퍼 타입을 가진 여러 버퍼에 동시에 바인딩할 수 있습니다. glBindBuffer 함수를 사용하여 새로 생성된 버퍼를 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 타겟에 바인딩된 정점 버퍼 객체입니다.

 

두 번째 인자는 버퍼에 전달하고자 하는 데이터의 크기(바이트 단위)를 지정하며, 정점 데이터의 단순한 sizeof로 충분합니다.

 

세 번째 매개변수는 전송하고자 하는 실제 데이터입니다.

 

네 번째 매개변수는 그래픽 카드가 제공된 데이터를 어떻게 관리할지를 지정합니다. 이는 세 가지 형태를 가질 수 있습니다:

 

1. GL_STREAM_DRAW: 데이터는 한 번만 설정되고 GPU에서 몇 번 사용됩니다.
2. GL_STATIC_DRAW: 데이터는 한 번만 설정되고 여러 번 사용됩니다.
3. GL_DYNAMIC_DRAW: 데이터는 자주 변경되고 여러 번 사용됩니다.

삼각형의 위치 데이터는 변경되지 않고, 많이 사용되며, 모든 렌더링 호출에 대해 동일하므로 사용 유형은 GL_STATIC_DRAW가 가장 적합합니다.

 

예를 들어, 자주 변경될 가능성이 있는 데이터를 가진 버퍼를 가지고 있다면, GL_DYNAMIC_DRAW 사용 유형은 그래픽 카드가 더 빠른 쓰기를 위해 메모리에 데이터를 배치하도록 합니다.

 

Vertext Shader

정점 셰이더는 우리 같은 사람들이 프로그래밍할 수 있는 셰이더 중 하나입니다.

 

현대 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에 해당합니다).

 

또한 우리가 코어 프로파일 기능을 사용하고 있다는 것을 명시적으로 언급합니다.

 

다음으로는 in 키워드를 사용하여 정점 셰이더의 모든 입력 정점 속성을 선언합니다.

 

지금은 위치 데이터에만 관심이 있으므로 단일 정점 속성만 필요합니다.

 

GLSL에는 포스트픽스 숫자에 따라 1에서 4개의 float를 포함하는 벡터 데이터 유형이 있습니다.

 

각 정점이 3D 좌표를 가지고 있으므로 aPos라는 이름의 vec3 입력 변수를 생성합니다.

 

또한 layout (location = 0)을 통해 입력 변수의 위치를 특별히 설정합니다. 나중에 이 위치가 왜 필요한지 보게 될 것입니다.

 

Vector

그래픽 프로그래밍에서는 공간 내에서 위치나 방향을 표현하는 데에 유용한 수학적 특성을 갖고 있는 수학적 개념인 벡터를 자주 사용합니다.

 

GLSL에서 벡터는 최대 크기가 4이며, 각각의 값을 vec.x, vec.y, vec.z, vec.w를 통해 각각 검색할 수 있습니다.

 

여기서 각각은 공간에서의 좌표를 나타냅니다. vec.w 구성 요소는 공간에서의 위치로 사용되지 않습니다(우리는 3D를 다루고 있지, 4D가 아닙니다) 하지만 perspective division이라는 것에 사용됩니다.

 

벡터에 대해 더 깊이 논의할 예정입니다.

 

 

정점 쉐이더의 출력을 설정하려면 vec4인 위치 데이터를 미리 정의된 gl_Position에 할당해야 합니다.

 

우리가 gl_Position에 설정한 것이 정점 쉐이더의 출력으로 사용됩니다.

 

 

현재 정점 쉐이더는 입력 데이터를 전혀 처리하지 않고 단순히 쉐이더의 출력으로 전달하기 때문에 매우 간단합니다.

 

실제 어플리케이션에서는 입력 데이터가 보통 이미 정규화된 device 좌표에 있지 않기 때문에

 

먼저 OpenGL의 가시 영역 내에 들어가는 좌표로 변환해야 합니다.

 

Compiling a shader

코드 파일 상단에 정점 쉐이더의 소스 코드를 const C 문자열로 저장합니다.

 

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;
}

 

정점 셰이더 컴파일 중 오류가 감지되지 않았다면, 이제 컴파일이 완료되었습니다.

 

Fragment shader

프래그먼트 셰이더는 삼각형을 렌더링하기 위해 생성할 두 번째이자 마지막 셰이더입니다.

 

프래그먼트 셰이더는 픽셀의 색상 출력을 계산하는 데 중점을 둡니다. 간단하게 유지하기 위해 프래그먼트 셰이더는 항상 오렌지색 계열의 색상을 출력할 것입니다.

 

컴퓨터 그래픽에서 색상은 빨간색, 녹색, 파란색 및 알파(불투명도) 성분의 4가지 값 배열로 표현됩니다.

 

이는 일반적으로 RGBA로 약칭됩니다. OpenGL이나 GLSL에서 색상을 정의할 때 각 성분의 강도를 0.0에서 1.0 사이의 값으로 설정합니다.

 

예를 들어, 빨간색을 1.0, 녹색을 1.0으로 설정하면 두 색상이 혼합되어 노란색이 됩니다. 이 세 가지 색상 성분을 사용하여 1600만 가지 이상의 다양한 색상을 생성할 수 있습니다!

 

#version 330 core
out vec4 FragColor;

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

 

프래그먼트 셰이더는 단 하나의 출력 변수만 필요하며, 이는 최종 색상 출력을 정의하는 4차원 벡터입니다.

 

우리는 out 키워드로 출력 값을 선언할 수 있으며, 여기서 우리는 FragColor라고 적절히 이름을 지었습니다. 다음으로, 우리는 완전히 불투명한 알파 값(1.0)을 가진 오렌지색으로 vec4를 색상 출력에 할당합니다.

 

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

 

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

 

이제 두 셰이더 모두 컴파일되었고, 남은 일은 두 셰이더 객체를 하나의 셰이더 프로그램에 연결하는 것입니다. 이 프로그램은 렌더링에 사용될 수 있습니다.

 

여기에서도 컴파일 오류를 확인하는 것을 잊지 마세요!

 

Shader Program

셰이더 프로그램 객체는 여러 셰이더가 결합된 최종 연결 버전입니다.

 

최근에 컴파일된 셰이더를 사용하려면 셰이더 프로그램 객체에 연결하고 객체를 렌더링할 때 이 셰이더 프로그램을 활성화해야 합니다.

 

활성화된 셰이더 프로그램의 셰이더는 렌더링 호출을 할 때 사용됩니다.

 

프로그램에 셰이더를 연결할 때, 각 셰이더의 출력을 다음 셰이더의 입력에 연결합니다.

 

출력과 입력이 일치하지 않으면 연결 오류가 발생합니다.

 

프로그램 객체를 생성하는 것은 쉽습니다:

 

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에게 그 방법을 알려줄 것입니다.