웹지엘 그래픽 파이프라인(0) - 버텍스 셰이더

https://book.naver.com/bookdb/book_detail.nhn?bid=9188545 

WebGL을 활용한 3D 그래픽 프로그래밍

어렵다.. 

---

버텍스 셰이더

실감나는 3D 장면을 그리기 위해서는, 특정 위치에 오브젝트를 그리는 것 뿐만 아니라 광원이 오브젝트를 어떻게 비출지도 고려해야 한다. 광원 효과를 처리하는 것을 셰이딩(shading)이라 한다. 웹지엘의 셰이딩은 두 단계로 진행된다.

1. 버텍스 셰이더
2. 프래그먼트 셰이더

버텍스 셰이더는 자바스크립트에 의해 전송되는 3D 모델링 데이터가 처음으로 도달하는 단계다. 버텍스 셰이더는 프로그램 가능하며 자바스크립트 API를 이용해 유저에 의해 작성되는 코드이므로 버텍스를 다양한 방법으로 조작 가능하다.

 

실질적인 셰이딩을 적용하기 전에, 버텍스 셰이더는 각 버텍스를 변환 행렬과 곱한다. 모든 버텍스와 변환 행렬을 곱하면, 오브젝트는 장면의 특정 위치에 자리잡게 된다.

 

버텍스 셰이더는 다음과 같은 입력값을 사용한다.

• 버텍스 셰이더를 구성하는 소스 코드(GLSL로 작성)
• 각 버텍스에 적용되는 유저가 정의한 애트리뷰트(attribute) 변수(버텍스의 위치와 색상 값 등)
• 모든 버텍스에 적용되는 유니폼 상수(변환 행렬과 광원의 위치 등)

버텍스 셰이더의 소스 코드 예시는 아래와 같다

// 애트리뷰트는 유저가 정의한 변수로 각 버텍스에 필요한 데이터를 담고 있다. 
// 값은 자바스크립트 API를 호출해 할당한다. vec3는 3개의 원소를, vec4는 4개의 원소를 가지고 있다.
attribute vec3 aVertexPos;
attribute vec4 aVertexColor;
// 다음 두 줄은 mat4 타입의 유니폼 변수로, 각 버텍스에 적용될 변환에 대한 정보를 담고 있다.
// 값은 자바스크립트 API를 호출해 할당한다.
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
// varying은 버텍스 셰이더가 프래그먼트 셰이더로 정보를 전송할 때 이용되는 변수이다.
varying vec4 vColor; 
// 버텍스 셰이더와 프래그먼트 셰이더 모두 main 함수로 시작되는 진입점을 가진다.
// main 함수의 첫 라인에서 버텍스의 위치를 저장한 aVertexPos와 두 개의 변환행렬을 곱함으로써 버텍스에 변환을 적용하고,
// gl_Position에 저장한다.
// 버텍스 셰이더가 마지막으로 하는 일은 웹지엘 자바스크립트 API로부터 전달받은 색상 정보를 저장한 애트리뷰트의 값을 vColor에 저장해 프래그먼트 셰이더에서 그 값을 참조할 수 있도록 하는 것이다.
void main() {
  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPos, 1.0); // 내장된 특별 변수
  vColor = aVertexColor;
}

(gl_Position은 gl_FrontFacing, gl_PointSize와 함께 내장된 특별 변수)

 

위 문법은 오픈지엘 ES 셰이딩 언어로 문법은 C와 매우 유사하다.

 

위 코드를 라인 별로 분석하면 다음과 같다.

 

애트리뷰트(attribute)는 유저가 정의한 변수로 각 버텍스에 필요한 데이터를 담고 있다. 
값은 자바스크립트 API를 호출해 할당한다. vec3는 3개의 원소를, vec4는 4개의 원소를 가지고 있다.

attribute vec3 aVertexPos;
attribute vec4 aVertexColor;

다음 두 줄은 mat4 타입의 유니폼 변수로, 각 버텍스에 적용될 변환에 대한 정보를 담고 있다.
값은 자바스크립트 API를 호출해 할당한다.

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying은 버텍스 셰이더가 프래그먼트 셰이더로 정보를 전송할 때 이용되는 변수이다.

varying vec4 vColor;

버텍스 셰이더와 프래그먼트 셰이더 모두 main 함수로 시작되는 진입점을 가진다.
main 함수의 첫 라인에서 버텍스의 위치를 저장한 aVertexPos와 두 개의 변환행렬을 곱함으로써 버텍스에 변환을 적용하고,
gl_Position에 저장한다.
버텍스 셰이더가 마지막으로 하는 일은 웹지엘 자바스크립트 API로부터 전달받은 색상 정보를 저장한 애트리뷰트의 값을 vColor에 저장해 프래그먼트 셰이더에서 그 값을 참조할 수 있도록 하는 것이다.

void main() {
  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPos, 1.0); // 내장된 특별 변수
  vColor = aVertexColor;
}