[Learn OpenGL] Shaders - 3

More Attributes!

이전 장에서 VBO를 채우고, 정점 속성 포인터를 구성하고, 이 모든 것을 VAO에 저장하는 방법을 보았습니다.

이번에는 정점 데이터에 색상 데이터를 추가하려고 합니다.

각 정점 배열에 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    // 위
};    

 

이제 정점 쉐이더로 더 많은 데이터를 보내야 하기 때문에, 정점 속성 입력으로 색상 값을 받기 위해 정점 쉐이더를 조정할 필요가 있습니다.

layout 지정자를 사용하여 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를 설정
}       

 

이제 Fragment의 색상에 대해 유니폼을 사용하지 않고 ourColor 출력 변수를 사용하므로 조각 쉐이더도 변경해야 합니다.

#version 330 core
out vec4 FragColor;  
in vec3 ourColor;

void main()
{
    FragColor = vec4(ourColor, 1.0);
}

 

VBO의 메모리에 또 다른 정점 속성을 추가하고 업데이트했기 때문에 정점 속성 포인터를 다시 구성해야 합니다.

VBO의 메모리에서 업데이트된 데이터는 다음과 같이 보입니다.

 

위치와 색상 데이터가 VBO 내부에서 교차되어 있어 glVertexAttribPointer로 구성됨

현재 레이아웃을 알고 있으므로 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에서 정점 속성을 구성합니다. 색상 값은 3개의 float 크기를 가지며 값을 정규화하지 않습니다.

 

이제 두 개의 정점 속성이 있으므로 스트라이드 값을 다시 계산해야 합니다.

 

데이터 배열에서 다음 속성 값(예: 위치 벡터의 다음 x 구성 요소)을 얻으려면 오른쪽으로 6개의 float만큼 이동해야 합니다.

 

세 개는 위치 값이고 세 개는 색상 값입니다. 이로 인해 스트라이드 값은 float의 크기인 6배인 바이트(= 24 바이트)가 됩니다.

 

또한 이번에는 오프셋을 지정해야 합니다. 각 정점에 대해 위치 정점 속성이 먼저 오므로 0의 오프셋을 선언합니다.

 

색상 속성은 위치 데이터 뒤에 시작하므로 오프셋은 3 * sizeof(float)의 바이트(= 12 바이트)입니다.

 

 

이미지가 여러분이 예상했던 것과 정확히 일치하지 않을 수 있습니다.

 

왜냐하면 우리는 단지 3가지 색상만 제공했지만, 지금 보이는 것은 방대한 색상 팔레트이기 때문입니다.

 

이 모든 것은 조각 쉐이더에서 발생하는 '(fragment interpolation)'이라는 것의 결과입니다.

 

삼각형을 렌더링할 때 래스터화 단계는 원래 지정된 정점보다 훨씬 더 많은 조각들을 생성합니다. 래스터라이저는 삼각형 모양 위에 위치한 각 조각의 위치를 결정합니다.

 

이 위치에 기반하여, 조각 쉐이더의 모든 입력 변수들이 보간됩니다.

 

예를 들어, 위쪽 점이 녹색이고 아래쪽 점이 파란색인 선이 있다고 가정해봅시다. 조각 쉐이더가 선의 70% 위치에 있는 조각에서 실행되면, 그 결과 색상 입력 속성은 녹색과 파란색의 선형 조합이 될 것입니다.

 

더 정확하게 말하자면 30% 파란색과 70% 녹색이 될 것입니다.

 

이것이 바로 삼각형에서 발생한 일입니다. 우리는 3개의 정점과 따라서 3가지 색을 가지고 있으며, 삼각형의 픽셀을 보면 아마도 약 50000개의 조각들이 있을 것이며,

 

여기서 조각 쉐이더는 이 픽셀들 사이에서 색상을 보간했습니다.

 

색상을 자세히 살펴보면 모든 것이 말이 된다는 것을 알 수 있습니다: 빨간색에서 파란색으로 가면서 먼저 보라색이 되고 그 다음에 파란색이 됩니다. 조각 보간은 조각 쉐이더의 모든 입력 속성에 적용됩니다.