url: https://learnopengl.com/Getting-started/Shaders 생성일: 2020년 12월 25일 오후 2:25

앞 Hello Triangle 챕터에서 언급했듯이, 셰이더는 GPU에 있는 작은 프로그램입니다. 이러한 프로그램은 그래픽 파이프 라인의 각 특정 섹션에 대해 실행됩니다. 기본적으로 셰이더는 입력을 출력으로 변환하는 프로그램입니다. 셰이더는 또한 서로 통신할 수 없다는 점에서 매우 고립 된 프로그램입니다. 그들이 가지고 있는 유일한 의사 소통은 입력과 출력을 통해서입니다.

이전 장에서 우리는 셰이더의 표면과 그것들을 적절하게 사용하는 방법에 대해 간단히 다루었습니다. 이제 셰이더, 특히 OpenGL 셰이딩 언어에 대해 좀 더 일반적인 방식으로 설명하겠습니다.

셰이더는 C와 유사한 언어 GLSL로 작성됩니다. GLSL은 그래픽과 함께 사용하도록 맞춤화되었으며 특별히 벡터 및 행렬 연산을 대상으로하는 유용한 기능을 포함합니다.

셰이더는 항상 버전 선언으로 시작하고 입력 및 출력 변수, 유니폼 및 메인 함수로 이어집니다. 각 셰이더의 진입점은 입력 변수를 처리하고 결과를 출력 변수에 출력하는 메인 함수에 있습니다. 유니폼이 뭔지 모르더라도 걱정하지 마세요. 곧 알려드리겠습니다.

셰이더는 일반적으로 다음 구조를 갖습니다.

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;
  
uniform type uniform_name;
  
void main()
{
  // 입력(들)을 처리하고 이상한 그래픽 작업을 처리합니다.
  ...
  // 처리된 것들을 출력 변수로 출력합니다.
  out_variable_name = weird_stuff_we_processed;
}

특히 버텍스 셰이더에 대해 이야기 할 때 각 입력 변수는 버텍스 속성이라고도 합니다. 하드웨어에 의해 제한적으로 선언 할 수 있는 버텍스 속성의 최대 개수가 있습니다. OpenGL은 항상 최소 16개 이상의 4개 구성 요소(vec4 * 16개) 버텍스 속성을 사용할 수 있음을 보장하지만 일부 하드웨어에서는 GL_MAX_VERTEX_ATTRIBS 를 쿼리하여 검색 할 수 있는 더 많은 속성을 허용하기도 합니다.

int nrAttributes;
glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;

이것은 대부분의 목적에 충분한 수인 최소 16 을 반환합니다.

GLSL has, like any other programming language, data types for specifying what kind of variable we want to work with. GLSL has most of the default basic types we know from languages like C: int, float, double, uint and bool. GLSL also features two container types that we'll be using a lot, namely vectors and matrices. We'll discuss matrices in a later chapter.

GLSL은 다른 프로그래밍 언어와 마찬가지로 어떤 변수를 사용할지 지정하기 위한 데이터 유형을 가지고 있습니다. GLSL은 우리가 C와 같은 언어에서 알고 있는 대부분의 기본적인 타입들을 가지고 있습니다 : int, float, double , uint, bool. GLSL은 또한 우리가 많이 사용할 두 가지 컨테이너 유형인 벡터와 행렬을 제공합니다. 이후 장에서 행렬에 대해 논의할 것입니다.

GLSL의 벡터는 방금 언급 한 기본 타입에 대한 1,2,3 또는 4개의 구성 요소 컨테이너입니다. 다음과 같은 형식을 취할 수 있습니다. (n 은 구성 요소의 수를 나타냅니다.)

• vecn : n 개의 float를 가지는 기본 벡터
• bvecn : n 개의 boolean을 가지는 벡터
• ivecn : n 개의 정수를 가지는 벡터
• uvecn : n 개의 부호없는 정수를 가지는 벡터
• dvecn : n 개의 double을 가지는 벡터

대부분의 목적에는 float가 충분하므로 대부분의 경우 기본 vecn 을 사용합니다.

벡터의 구성 요소는 vec.x 를 통해 액세스 할 수 있습니다. 여기서 x 는 벡터의 첫 번째 구성 요소입니다. x, y, z 및 w 를 사용하여 각각 첫 번째, 두 번째, 세 번째 및 네 번째 구성 요소에 접근할 수 있습니다. GLSL을 사용하면 색상에 rgba 를 사용하거나 텍스쳐 좌표에 stpq 를 사용하여 동일한 구성 요소에 접근할 수 있습니다.

벡터 데이터 유형을 사용하면 스위즐링이라고 하는 흥미롭고 유연한 구성 요소를 선택할 수 있습니다. 스위즐링을 사용하면 다음과 같은 구문을 사용할 수 있습니다.

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

원래 벡터에 해당 구성 요소가 있는 한 최대 4개의 문자 조합을 사용하여 동일한 유형의 새 벡터를 사용할 수 있습니다. 예를 들어 vec2 의 .z 구성 요소에 접근할 수 없습니다. 또한 벡터를 다른 벡터 생성자 호출에 인수로 전달하여 필요한 인수 수를 줄일 수 있습니다.

vec2 vect = vec2(0.5, 0.7);
vec4 result = vec4(vect, 0.0, 0.0);
vec4 otherResult = vec4(result.xyz, 1.0);

따라서 벡터는 모든 종류의 입력 및 출력에 사용할 수 있는 유연한 데이터 유형입니다. 이 책 전체에서 벡터를 창의적으로 관리 할 수 있는 방법에 대한 많은 예를 볼 수 있을 것입니다.

셰이더는 그 자체로 멋진 작은 프로그램이지만 전체의 일부이므로 개별 셰이더에 입력 및 출력을 가져 와서 재료를 이동할 수 있도록 합니다.

GLSL은 그러한 목적을 위해 in 과 out 키워드를 정의했습니다. 각 셰이더는 해당 키워드를 사용하여 입력 및 출력을 지정할 수 있으며 출력 변수가 전달되는 다음 셰이더 단계의 입력 변수와 일치하는 위치를 지정할 수 있습니다. 하지만 버텍스 및 프레그먼트 셰이더는 약간 다릅니다.

버텍스 셰이더는 어떠한 형태의 입력을 반드시 받아야 합니다. 그렇지 않으면 비효율적입니다. 버텍스 셰이더는 버텍스 데이터에서 직접 입력을 받는다는 점에서 입력이 다릅니다. 버텍스 데이터가 구성되는 방식을 정의하기 위해 위지 메타 데이터로 입력 변수를 지정하여 CPU에서 버텍스 속성을 구성할 수 있습니다. 이전 장에서 이것을 layout (location = 0) 으로 보았습니다. 따라서 버텍스 셰이더는 입력에 대한 추가 레이아웃 사양이 필요하므로 버텍스 데이터와 연결할 수 있습니다.

layout (location = 0) 지정자를 생략하고 glGetAttribLocation을 통해 OpenGL 코드의 속성 위치를 쿼리 할 수도 있지만 버텍스 셰이더에서 설정하는 것을 선호합니다. 그것이 더 이해하기 쉽고 너의(그리고 OpenGL도) 작업을 절약시켜 주기 때문입니다.

다른 예외는 프레그먼트 셰이더가 최종 출력 색상을 생성해야 하므로 프레그먼트 셰이더에 vec4 색상 출력 변수가 필요하다는 점입니다. 프래그먼트 셰이더에서 출력 색상을 지정하지 않으면 해당 프래그먼트에 대한 색상 버퍼 출력이 정의되지 않습니다. (일반적으로 OpenGL이 검은색 또는 흰색으로 랜더링 하는것을 뜻함)

따라서 한 셰이더에서 다른 셰이더로 데이터를 보내려면 보내는 셰이더에서 출력을 선언하고 수신 셰이더에서 유사한 입력을 선언해야 합니다. 유형과 이름이 양쪽에서 동일하면 OpenGL은 해당 변수를 함께 연결 한 다음 셰이더 간에 데이터를 보낼 수 있습니다. (프로그램 개체를 linking할 때 수행됩니다.) 이것이 실제로 어떻게 작동하는지 보여주기 위해 이전 장의 셰이더를 변경하여 버텍스 셰이더가 프레그먼트 셰이더를 결정하도록 할 것입니다.

Vertex shader

#version 330 core
layout (location = 0) in vec3 aPos; // 위치 변수는 속성 위치 0을 가집니다.
  
out vec4 vertexColor; // 프레그먼트 셰이더에 색상 출력 지정

void main()
{
    gl_Position = vec4(aPos, 1.0); // vec3을 vec4의 생성자에 직접 제공하는 방법
    vertexColor = vec4(0.5, 0.0, 0.0, 1.0); // 출력 변수를 진한 빨강으로 지정
}

Fragment shader

#version 330 core
out vec4 FragColor;
  
in vec4 vertexColor; // 버텍스 셰이더에서 온 입력 변수 (같은 이름과 타입)  

void main()
{
    FragColor = vertexColor;
} 

vertexColor 변수를 버텍스 셰이더에서 설정 한 vec4 출력으로 선언했고, 프레그먼트 셰이더에서 비슷한 vertexColor 입력을 선언 한 것을 볼 수 있습니다. 둘 다 동일한 유형과 이름을 갖기 때문에 프래그먼트 셰이더의 vertexColor는 버텍스 셰이더의 vertexColor와 연결됩니다. 버텍스 셰이더에서 색상을 진한 빨강 색으로 설정 했으므로 프레그먼트의 결과도 진한 빨간색이어야 합니다. 다음 이미지는 결과를 보여줍니다

자 갑니다! 버텍스 셰이더에서 프레그먼트 셰이더로 값을 보낼 수 있었습니다. 조금 더 멋지게 꾸미고 응용 프로그램에서 프레그먼트 셰이더로 색상을 보낼 수 있는지 살펴보겠습니다

Uniform은 CPU의 애플리케이션에서 GPU의 셰이더로 데이터를 전달하는 또 다른 방법입니다. 그러나 유니폼은 버텍스 속성에 비해 약간 다릅니다. 우선 유니폼은 전역입니다. 무슨 뜻이나면 유니폼 변수는 셰이더 프로그램 개체마다 고유하며 셰이더 프로그램의 모든 단계에서 모든 셰이더가 액세스 할 수 있음을 의미합니다. 두번째로, 유니폼은 값을 설정하는 것과 상관없이 유니폼은 재설정되거나 업데이트 될때까지 값을 유지합니다.

GLSL에서 유니폼을 선언하려면 이름이 있는 셰이더에 uniform 이라는 키워드를 추가 하기만하면 됩니다. 그 시점부터 셰이더에서 새로 선언된 유니폼을 사용할 수 있습니다. 이번에는 유니폼을 통해 삼각형의 색상을 설정할 수 있는지 살펴 보겠습니다.

#version 330 core
out vec4 FragColor;
  
uniform vec4 ourColor; // OpenGL 코드에서 이 변수를 설정합니다.

void main()
{
    FragColor = ourColor;
}   

프레그먼트 셰이더에서 유니폼 vec4 OurColor를 선언하고 프래그먼트의 출력 색상을 유니폼값으로 설정했습니다. 유니폼은 전역 변수이므로 원하는 셰이더 단계에서 정의할 수 있으므로 프래그먼프 쎼이더에 뭔가를 가져 오기 위해 다시 버텍스 셰이더를 거칠 필요가 없습니다. 버텍스 셰이더에서 이 유니폼을 사용하지 않으므로 거기에서 정의 할 필요가 없습니다.

GLSL 코드에서는 사용되지 않는 유니폼을 선언하면 컴파일러는 컴파일 된 버전에서 변수를 자동으로 제거합니다. 이는 오류의 원인이 될 수 있습니다.

유니폼이 현재 비어 있습니다. 아직 유니폼에 데이터를 추가하지 않았으니 데이터를 추가 해 봅시다. 먼저 셰이더에서 유니폼 속성의 인덱스 / 위치를 찾아야 합니다. 유니폼의 인덱스 / 위치가 있으면 값을 업데이트 할 수 있습니다. 프레그먼트 셰이더에 단일 색상을 전달하는 대신 시간이 지남에 따라 점차적으로 색상을 변경하여 꾸며봅시다.

float timeValue = glfwGetTime();
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

먼저 glfwGetTime()을 통해 실행 시간을 초 단위로 검색합니다. 그런 다음 sin 함수를 사용하여 0.0 - 1.0 범위에서 색상을 변경하고 결과를 greenValue에 저장합니다

그런 다음 glGetUniformLocation을 사용하여 ourColor 유니폼의 위치를 쿼리합니다. 셰이더 프로그램과 유니폼 (위치를 검색하려는)의 이름을 쿼리 함수에 제공합니다. glGetUniformLocation이 -1 을 반환하면 위치를 찾을 수 없습니다. 마지막으로 glUniform4f 함수를 사용하여 유니폼의 값을 설정할 수 있습니다. 유니폼의 위치를 찾는 데 셰이더 프로그램을 먼저 사용할 필요는 없지만 유니폼 업데이트 는 현재 활성화 된 셰이더 프로그램에서 uniform을 설정하므로 먼저 프로그램을 사용해야 합니다 (glUseProgram호출)

OpenGL의 핵심은 C라이브러리에 있기 떄문에 함수 오버로딩에 대한 기본 지원이 없으므로 다른 유형으로 함수를 호출 할 수 있는 곳이면 어디에서나 OpenGL은 필요한 각 유형에 대해 새 함수를 정의합니다.

glUniform이 이에 대한 완벽한 예입니다. 이 기능은 설정하려는 유니폼유형에 대한 특정 접미사가 필요합니다. 가능한 접미사 중 몇 가지는 다음과 같습니다.

• f : 함수가 값이 float 라고 예상합니다.
• i : 함수가 값이 int 라고 예상합니다.
• ui: 함수가 값이 unsigned int 라고 예상합니다.
• 3f : 함수는 값이 3개의 float 라고 생각합니다.
• fv : 함수는 값이 float 백터/배열이라고 생각합니다.

OpenGL 옵션을 구성 할 때마다 유형에 해당하는 오버로드 된 기능을 선택하기만 하면 됩니다. 우리의 경우 glUniform4f를 통해 데이터를 전 전달하기 위해 uniform의 4개의 float를 개별적으로 설정하려고 합니다. (fv 버전도 사용할 수 있음).

이제 균일 변수의 값을 설정하는 방법을 알았으므로 렌더링에 사용할 수 있습니다. 색상을 점진적으로 변경하려면 매 프레임마다 이 유니폼을 업데이트 해야 합니다. 그렇지 않으면 삼각형은 한 번만 설정하면 단색을 유지합니다. 따라서 우리는 greenValue를 계산하고 각 렌더링 반복마다 uniform을 업데이트합니다.

while(!glfwWindowShouldClose(window))
{
    // 입력
    processInput(window);

    // 렌더
    // 컬러 버퍼 클리어
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

		// 셰이더를 활성화해야 합니다.
    glUseProgram(shaderProgram);
  
    // uniform color 업데이트
    float timeValue = glfwGetTime();
    float greenValue = sin(timeValue) / 2.0f + 0.5f;
    int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

    // 삼각형을 렌더링합니다.
    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);
  
		// 버퍼 스왑 및 IO 이벤트 폴링
    glfwSwapBuffers(window);
    glfwPollEvents();
}

이 코드는 이전 코드를 비교적 간단하게 수정 한 것입니다. 이번에는 삼각형을 그리기 전에 각 프레임마다 균일한 값을 업데이트 합니다. 유니폼을 올바르게 업데이트 하면 삼각형의 색상이 점차 녹색에서 검은색으로, 다시 녹색으로 변하는 것을 볼 수 있습니다.

shaders.mp4

문제가 있는 경우 여기에서 소스코드를 확인하세요.

보시다시피 유니폼은 모든 프레임을 변경할 수 있는 속성을 설정하거나 애플리케이션과 셰이더 간에 데이터를 교환하는 데 유용한 도구입니다.하지만 각 버텍스에 대한 색상을 설정하려면 어떻게 해야 할까요? 이 경우에는 우리가 가진 버텍스만큼의 uniform을 선언해야 합니다. 더 나은 해결책은 버텍스 속성에 더 많은 데이터를 포함하는 것입니다.

이전 장에서 VBO를 채우고, 버텍스 속성 포인터를 구성하고, 모든 것을 VAO에 저장하는 방법을 보았습니다. 이번에는 버텍스 데이터에 색상 데이터도 추가하려고 합니다. 색상 데이터를 vertices 배열에 3개의 float 를 추가할 것입니다. 삼각형의 각 모서리에 빨간색, 초록색 및 파란색을 각각 할당합니다.

float vertices[] = {
    // 위치              // 색상
     0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 오른쪽 하단
    -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 왼쪽 하단
     0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 상단
};    

이제 버텍스 셰이더로 보낼 더 많은 데이터가 있으므로 버텍스 속성 입력으로 색상 값도 수신하도록 버텍스 셰이더도 조정해야 합니다. aColor 속성을 레이아웃 지정자를 사용하여 위치를 1로 설정했습니다.

#version 330 core
layout (location = 0) in vec3 aPos;   // 위치 변수는 속성 위치 0을 가집니다.
layout (location = 1) in vec3 aColor; // 색상 변수는 속성 위치 1을 가집니다.
  
out vec3 ourColor; // 출력 색상은 프레그먼트 셰이더로 갑니다.

void main()
{
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor; // ourColor를 버텍스 데이터에서 얻은 입력 색상으로 설정합니다
}       

프레그먼트 색상에 더 이상 uniform을 사용하지는 않지만, 이제 ourColor 출력 변수를 사용하므로 프레그먼트 셰이더도 변경해야 합니다.

#version 330 core
out vec4 FragColor;  
in vec3 ourColor;
  
void main()
{
    FragColor = vec4(ourColor, 1.0);
}

다른 버텍스 속성을 추가하고 VBO의 메모리를 업데이트 했기 때문에 버텍스 속성 포인터를 다시 구성해야 합니다. VBO 메모리의 업데이트 된 데이터는 이제 다음과 같이 보입니다.

현재 레이아웃을 알면 glVertexAttribPointer로 버텍스 형식을 업데이트 할 수 있습니다.

// 위치 속성
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 색상 속성
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3* sizeof(float)));
glEnableVertexAttribArray(1);

glVertexAttribPointer의 앞에 있는 몇개의 인수는 비교적 간단합니다. 이번에는 속성 위치 1 에 vertex 속성을 구성합니다. 색상 값의 크기는 float 3 이며 값을 정규화 하지 않습니다

이제 두 개의 버텍스 속성이 있으므로 stride 값을 다시 계산해야 합니다. 데이터 배열에서 다음 속성 값 (예 : 위치 벡터의 다음 x 구성 요소)을 얻으려면 6 float 을 오른쪽으로, 3개는 위치 값으로, 3개는 색상 값으로 이동해야 합니다. 이것은 우리에게 float 크기 (= 24 바이트)의 6배의 stride값을 제공합니다.

또한 이번에는 오프셋을 지정해야 합니다. 각 버텍스의 위치 버텍스 속성이 먼저이므로 오프셋 0을 선언합니다. color 속성은 위치 데이터 다음에 시작하므로 오프셋은 바이트 단위의 3 * sizeof (float) (= 12 바이트) 입니다.

애플리케이션을 다시 시작하면 다음 이미지가 표시됩니다.

문제가 있는 경우 여기에서 소스 코드를 확인하세요.

현재 보고 있는 이미지는 거대한 색상 팔레트가 아닌 3가지 색상만 제공했기 때문에 이미지가 예상한 것과 정확히 일치하지 않을 수 있습니다. 이것은 모두 프레그먼트 셰이더에서 프레그먼트 보간(interpolation)이라고 하는 것의 결과입니다. 삼각형을 렌더링 할 때 레스터화 단계는 일반적으로 원래 지정된 버텍스보다 훨씬 많은 프레그먼트를 생성합니다. 그런 다음 레스터라이저는 삼각형 모양의 위치에 따라 각 프레그먼트 위치를 결정합니다.

이러한 위치를 기반으로 모든 프레그먼트 셰이더의 입력 변수를 보간합니다. 예를 들어 위쪽 점이 녹색이고 아래쪽 점이 파란색인 선이 있다고 가정합니다. 프래그먼트 셰이더가 라인의 70% 위치 주변에 있는 프래그먼트엣 ㅓ실행되는 경우 결과 색상의 입력 속성은 녹색과 파란색의 선형 조합이 됩니다. 더 정확하게 말하면 30% 의 파란색과 70% 의 녹색입니다.

이것이 바로 삼각형에서 일어나는 일입니다. 우리는 3개의 꼭지점과 3개의 색상을 가지고 있으며 삼각형의 픽셀로 볼 때 대략 50000개의 프레그먼트를 포함하고 있을 것입니다 .색상을 잘 살펴보면 모든 것이 의미가 있음을 알 수 있습니다. 빨간색에서 파란색으로 먼저 보라색이 되고 파란색으로 바뀝니다. 프래그먼트 보간은 모든 프래그먼트 셰이더의 입력 속성에 적용됩니다.

셰이더 작성, 컴파일 및 관리는 매우 번거로울 수 있습니다. 셰이더 주제에 대한 마지막 작업으로서, 우리는 셰이더를 디스크에서 읽고, 컴파일 하고, 연결하고, 오류를 확인하고, 사용하기 쉬운 셰이더 클래스를 만들어 우리의 삶을 좀 더 쉽게 만들 것입니다. 이것은 또한 우리가 지금까지 배운 지식의 일부를 유용한 추상적인 물체에 어떻게 캡슐화할 수 있는지에 대한 아이디어를 제공합니다.

셰이더 클래스는 주로 학습 목적과 휴대성을 위해 헤더 파일로 작성하겠습니다. 먼저 필요한 인클루드 항목을 추가하고 클래스 구조를 정의하세요.

#ifndef SHADER_H
#define SHADER_H

#include <glad/glad.h> // 필요한 OpenGL 헤더를 모두 가져올 수 있는 glad를 포함합니다.
  
#include <string>
#include <fstream>
#include <sstream>
#include <iostream>
  

class Shader
{
public:
    // 프로그램 ID
    unsigned int ID;
  
		// 생성자가 셰이더를 읽고 생성합니다.
    Shader(const char* vertexPath, const char* fragmentPath);
    // 셰이더를 사용/활성화합니다.
    void use();
		// 유니폼 함수 유틸리티
    void setBool(const std::string &name, bool value) const;  
    void setInt(const std::string &name, int value) const;   
    void setFloat(const std::string &name, float value) const;
};
  
#endif

헤더 파일 맨 위에 몇 가지 전처리기 지시문을 사용했습니다. 이런 짧은 코드를 사용하면 여러 파일에 셰이더 헤더가 포함되어 있더라도 아직 포함되지 않은 경우에만 이 헤더 파일을 포함하고 컴파일하도록 컴파일러에 알립니다. 이것은 연결 충돌을 방지합니다.

셰이더 클래스는 셰이더 프로그램의 ID를 보유합니다. 생성자는 디스크에 간단한 텍스트 파일로 저장할 수 있는 버텍스 및 프레그먼트 셰이더의 소스 코드 파일 경로를 각각 필요로 합니다. 약간의 추가 기능을 추가하기 위해 몇 가지 유틸리티 함수를 추가하여 조금 더 편리하게 합니다. use는 셰이더 프로그램을 활성화 하고 모든 set 으로 시작하는 함수는 균일한 위치를 쿼리하고 값을 설정합니다.

C++ 파일 스트림을 사용하여 파일의 내용을 여러 string개체로 읽습니다.

Shader(const char* vertexPath, const char* fragmentPath)
{
    // 1. filePath에서 버텍스/프레그먼트 소스코드 검색
    std::string vertexCode;
    std::string fragmentCode;
    std::ifstream vShaderFile;
    std::ifstream fShaderFile;
    // ifstream 개체가 예외를 throw할 수 있는지 확인합니다.
    vShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
    fShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
    try 
    {
        // 파일 열기
        vShaderFile.open(vertexPath);
        fShaderFile.open(fragmentPath);
        std::stringstream vShaderStream, fShaderStream;
				// 파일의 버퍼 내용을 스트림으로 읽습니다
        vShaderStream << vShaderFile.rdbuf();
        fShaderStream << fShaderFile.rdbuf();		
        // 파일 헨들러를 닫습니다
        vShaderFile.close();
        fShaderFile.close();
        // 스트림을 스트링으로 변경합니다
        vertexCode   = vShaderStream.str();
        fragmentCode = fShaderStream.str();		
    }
    catch(std::ifstream::failure e)
    {
        std::cout << "ERROR::SHADER::FILE_NOT_SUCCESFULLY_READ" << std::endl;
    }
    const char* vShaderCode = vertexCode.c_str();
    const char* fShaderCode = fragmentCode.c_str();
    [...]

다음으로 셰이더를 컴파일하고 연결해야합니다. 또한 컴파일/ 링크 실패 여부를 검토하고 있는 경우에는 컴파일 타임 오류를 출력합니다. 이것은 디버깅할때 유용합니다 (이러한 오류 로그가 필요합니다.

// 2. 셰이더 컴파일
unsigned int vertex, fragment;
int success;
char infoLog[512];
   
// 버텍스 셰이더
vertex = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex);
// 어떠한 컴파일 에러가 있으면 출력합니다.
glGetShaderiv(vertex, GL_COMPILE_STATUS, &success);
if(!success)
{
    glGetShaderInfoLog(vertex, 512, NULL, infoLog);
    std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
};
  
// 프레그먼트 셰이더도 비슷합니다.
[...]
  
// 셰이더 프로그램
ID = glCreateProgram();
glAttachShader(ID, vertex);
glAttachShader(ID, fragment);
glLinkProgram(ID);
// 링킹 에러가 있을 경우 출력합니다.
glGetProgramiv(ID, GL_LINK_STATUS, &success);
if(!success)
{
    glGetProgramInfoLog(ID, 512, NULL, infoLog);
    std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
}
  
// 셰이더가 지금 프로그램에 연결되어 있고 더이상 필요하지 않으니 삭제
glDeleteShader(vertex);
glDeleteShader(fragment);

use 함수는 간단합니다.

void use() 
{ 
    glUseProgram(ID);
}  

Uniform setter 함수들은 다 비슷합니다.

void setBool(const std::string &name, bool value) const
{         
    glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value); 
}
void setInt(const std::string &name, int value) const
{ 
    glUniform1i(glGetUniformLocation(ID, name.c_str()), value); 
}
void setFloat(const std::string &name, float value) const
{ 
    glUniform1f(glGetUniformLocation(ID, name.c_str()), value); 
} 

그럼 완성 된 셰이더 클래스가 있습니다. 셰이더 클래스를 사용하는 것은 매우 쉽습니다. 셰이더 개체를 한 번 만들고 그 시점부터 사용을 시작하면 됩니다.

Shader ourShader("path/to/shaders/shader.vs", "path/to/shaders/shader.fs");
[...]
while(...)
{
    ourShader.use();
    ourShader.setFloat("someUniform", 1.0f);
    DrawStuff();
}

여기서는 shader.vs 와 shader.fs 라는 두 파일에 버텍스 및 프레그먼트 셰이더 소스 코드를 저장했습니다. 원하는대로 셰이더 파일의 이름을 자유롭게 지정할 수 있습니다. 개인적으로 .vs 와 .fs 확장자가 매우 직관적이라고 생각합니다.

새로 생성된 셰이더 클래스를 사용하여 여기에서 소스 코드를 찾을 수 있습니다. 셰이더 파일 경로를 클릭하여 셰이더의 소스 코드를 찾을 수 있습니다.

1. 삼각형이 거꾸로 되도록 버텍스 셰이더를 조정합니다: 정답
2. uniform을 통해 수평 오프셋을 저장하고, 이 오프셋 값을 사용하여 버텍스 셰이더에서 화면 오른쪽으로 삼각형을 이동합니다.: 정답
3. out 키워드를 사용하여 꼭지점 위치를 프레그먼트 셰이더로 넘겨주고 프레그먼트의 색상을 꼭지점 위치와 동일하게 설정합니다 (버텍스 위치 값이 삼각형을 가로질러 보간되는 방식 참고). 이렇게하면 왜 삼각형의 왼쪽 아래 부분이 검은색일까요? : 정답