[글쓴이:] 김 형준

GLSL 예제 – Flatten Shader(납작 쉐이더? =_=;)
원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?flatten

쉐이더 프로그래밍은 3차원 장면에 새로운 효과를 넣는데 매우 유용하다. 이 작은 예는 버텍스가 기묘한 방법으로 가공되는 것을 보여준다.

먼저 3D 모델을 납작하게 렌더링시키기 위해, 모델뷰 변환을 적용하기 전에 z 좌표의 값을 0으로 설정한다. 아래의 버텍스 쉐이더가 이 연산을 수행한다.

void main(void)
{
    vec4 v = vec4(gl_Vertex);
    v.z = 0.0;

    gl_Position = gl_ModelViewProjectionMatrix * v;
}

위의 코드를 보면, 먼저 지역변수(v)에 gl_Vertex를 복사하고 있다. gl_Vertex는 GLSL에서 제공하는 Attribute 변수이며, 버텍스 쉐이더가 수행되는 동안에는 읽기전용으로 사용할 수 있는 변수이다. 읽기전용이기 때문에 지역변수에 복사하여 값을 변환시킨것이다.

프레그먼트 쉐이더는 단지 색상만을 지정하므로, 이전 섹션(Hello World 예제)에서 제공한 코드와 동일하다.

이 쉐이더는 각 버텍스의 z 좌표를 0으로 지정한다. 주전자 3D 모델에 적용을 해보면, 아래의 그림처럼 납작해진 것으로 표현된다.

됐다. 이제 여기서 좀 응용을 해보자. 버텍스의 z값을 sin함수와 sin함수의 변수는 버텍스의 x좌표로 해면 주전자 모델이 너울거리는 것처럼 표시된다.

void main(void)
{
    vec4 v = vec4(gl_Vertex);
    v.z = sin(5.0 * v.x) * 0.25;

    gl_Position = gl_ModelViewProjectionMatrix * v;
}

이제 이 간단한 예제에 마지막으로 버텍스 에니메이션 효과를 적용해보자. 이 효과를 위해서, 시간을 추적하거나 프레임 카운터를 위한 변수가 필요하다. A vertex shader can’t keep track of values between vertices, let alone between frames. 그래서 OpenGL 어플리케이션에 변수를 하나 정의하고, 이 변수를 Uniform 변수로 쉐이더에 넘겨야 한다. OpenGL 어플리케이션에 “time”이라는 이름의 변수가 있는데, 이변수는 프레임을 카운터하고, 같은 이름의 Uniform 변수가 쉐이더 안에 있다.

버텍스 쉐이더에 대한 코드는 다음과 같다.

uniform float time;

void main(void)
{
    vec4 v = vec4(gl_Vertex);

    v.z = sin(5.0*v.x + time*0.01)*0.25;

    gl_Position = gl_ModelViewProjectionMatrix * v;
}

Uniform 변수를 설명한 섹션에서 언급했듯, OpenGL 어플리케이션에서는 다음 두단계가 필요하다.

• setup : Uniform 변수의 위치를 얻는다.
• render : Uniform 변수를 갱신한다.

setup 부분은 다음 코드와 같다.

loc = glGetUniformLocationARB(p, "time");

위의 코드에서 인자 p는 쉐이더 프로그램의 헨들이고, time은 버텍스 쉐이더에서 정의한 Uniform 변수의 이름이다. loc 변수는 GLint 형이며 render 함수에서 접근할 수 있는 위치에 정의되어야 한다.

render 함수는 아래와 같다.

void renderScene(void) 
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glLoadIdentity();
    gluLootAt(0, 0, 5, 0, 0, 0, 0, 1, 0);

    glUniform1fARB(loc, time);

    glutSolidTeaport(1);
    time += 0.1;

    glutSwapBuffers();
}

time 변수는 초기화부분에서 임의값으로 초기화되었을 것이고 매 프레임마다 증가된다.

여기까지의 예제 코드에 대한 전체 코드는 아래를 통해 다운로드 받길 바란다.

1167513658.zip1017013023.zip

GLSL 예제 : Color Shader
원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?color

GLSL은 OpenGL 상태의 일부분에 접근할 수 있다. 이 섹션에서는 glColor를 사용하는 OpenGL 어플리케이션의 색상에 어떻게 접근하는지를 살펴보겠다.

GLSL은 현재의 색상에 대한  Attribute 변수를 가지고 있다. 또한 버텍스 쉐이더로부터 프레그먼트 쉐이더로 전달되는 색상을 얻기 위한 Varying 변수를 가지고 있다.

attribute vec4 gl_Color;

varying vec4 gl_FrontColor; // 버텍스 쉐이더에서 쓰기 가능
varying vec4 gl_BackColor; // 버텍스 쉐이더에서 쓰기 가능

varying vec4 gl_Color; // 프레그먼트 쉐이더에서 읽기 가능

아이디어는 다음과 같다.

1. OpenGL 어플리케이션은 glColor 함수를 사용해서 색상값을 보낸다.
2. 버텍스 쉐이더는 gl_Color Attribute 변수로 색상값을 받는다.
3. 버텍스 쉐이더는 앞면과 뒷면의 색상을 계산하고, gl_FrontColor과 gl_BackColor에 저장한다.
4. 프레그먼트 쉐이더는 gl_Color Varying 변수로 보간된 색상을 받는데, 이 색상은 현재의 프리미티브의 방향에 따라 다르다. 예를들어 보간은 gl_FrontColor나 gl_BackColor 값을 사용해서 보간된다.
5. 프레그먼트 쉐이더는 gl_Color 값에 기반해서 gl_FragColor를 설정한다.

varying 변수는 버텍스 쉐이더와 프레그먼트 쉐이더 모두에서 같은 이름으로 선언되어져야한다. 여기서의 파악해야할 주요 내용은, 버텍스 쉐이더안에는 2개의 변수가 있는데, 바로 gl_FrontColor와 gl_BackColor이며, 현재의 프리미티브의 면의 방향에 따라 gl_Color의 값이 자동으로 산출되어 진다는 것이다. 여기서 gl_Color Attribute 변수와 gl_Color Varying 변수 사이에는 어떤 충돌도 없다는 점인데, gl_Color Attribute 변수는 버텍스 쉐이더에서만 볼 수 있고 gl_Color Varying 변수는 프레그먼트 쉐이더에서 볼 수 있기 때문이다.

설명은 충분이 했고, 버텍스 쉐이더에 대한 코드를 살펴보자. 여기서 앞면의 색이 계산되어졌다.

void main()
{
    gl_FrontColor = gl_Color;
    gl_Position = ftransform();
}

위의 코드를 들여다보면, gl_Color는 Attribute 변수로써 OpenGL 어플리케이션의 glColor를 통해 값이 지정된다. 이렇게 지정된 색상값을 gl_FrontColor Varying 변수에 입력되어 프레그먼트 쉐이더로 넘겨진다.

프레그먼트 쉐이더를 살펴보자. 버텍스 쉐이더처럼 매우 간단하다.

void main()
{
    gl_FragColor = gl_Color;
}

간단이 설명해보면, 먼저 버텍스 쉐이더로부터 받은 색상(gl_Color Varying 변수)을 실제 프리미티브의 색상으로 지정하기 위해 gl_FragColor에 지정하고 있다.

위의 실제 예제 코드는 아래를 통해 다운로드 받기 바란다.

실행 결과는 다음과 같다.

GLSL Samples – Hello World in GLSL
원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?minimal

이 섹션은 Hello World에 대한 GLSL 판이다. 가장 기본적인 내용을 수행하는 쉐이더를 살펴볼 것이다 : 버텍스의 변환, 단일 색상으로 프리미티브 렌더링하여 화면 표시.

버텍스 쉐이더
이전 섹션중에 버텍스 쉐이더 부분에서 언급했듯이, 버텍스 쉐이더는 버텍스의 변환을 담당한다. OpenGL의 고정기능과 동일한 내용을 수행하는 버텍스의 변환을 수행하는 쉐이더를 살펴볼 것이다.

고정기능은 다음과 같이 모델뷰 행렬과 투영행렬에 의해 변환을 수행한다.

GLSL에서 위의 내용을 수행하는 코드를 작성하려면 모델뷰 행렬과 투영행렬을 얻을 수 있도록 OpenGL에 접근할 필요가 있다. 이전에 언급했듯이, OpenGL의 상태 중 일부를 GLSL에서 접근할 수 있는데, 주로 언급한 투영행렬과 모델뷰행렬이다. 행렬은 이미 정의된 Uniform 변수를 통해서 제공된다.

uniform mat4 gl_ModelViewMatrix;
uniform mat4 gl_ProjectionMatrix;

하나 더 필요한 것은 입력 버텍스에 접근하는 것이다. 이런 버텍스는 하나씩 하나씩 버텍스 쉐이더에 접근되는데 Attribute 변수를 통해서 제공된다.

attribute vec4 gl_Vertex;

행렬에 의해 변환된 버텍스를 출력하기 위해서, 쉐이더는 반드시 미리 정의된 변수인 gl_Position을 사용해야 하며 gl_Position은 vec4로 선언된 변수다.

위처럼 한다면, 이제 버텍스 쉐이더를 작성하는게 가능하다. 하지만 아직은 버텍스 변환 연산만 가능하다. 주의할 것은 버텍스 변환 이외의 다른 기능은 작동하지 않는데, 예를들어 빛계산은 수행되지 않는다.

버텍스 쉐이더는 main 함수를 가져야만 한다.

void main()
{
    gl_Position = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;
}

위의 코드에서, 투영행렬은 모든 버텍스에 대해서 모델뷰행렬과 곱해지는데, 이것은 분명이 시간 낭비다. 왜냐하면 투영행렬과 모델뷰행렬은 모든 버텍스에 대해서 변하지 않는다. 이 행렬들은 Uniform 변수다.

GLSL은 몇개의 파생된 행렬을 제공하는데, 바로 gl_ModelViewProjecteionMatrix로써, 투영행렬과 모델뷰행렬을 곱한 결과 매트릭스이다. 이 변수를 사용해 다시 코드를 작성하면…

void main()
{
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

위의 두 main() 함수에 대한 쉐이더의 최종 결과는 동일하다. 그런데 고정기능과 동일한 변환을 보장하는가? 음… 이론적으로 그렇다. 그러나 버텍스의 변환의 실제 절차는 여기와 달리 동일한 순서를 따르지 않는다. 이것은 보통 그래픽 카드에 매우 최적화된 작업인데, 최적화의 이점을 취하기 위해 하나의 특별한 기능이 제공된다. 이 기능의 또 다른 이유는 float 데이터 타입의 정밀도에 제약이 있기 때문이다. 계산이 다른 순서로 이뤄질때, 이 제한된 정밀도로 인해 다른 결과가 얻어진다. 그래서 GLSL은 최고의 수행속도뿐만 아니라 고정기능과 동일한 결과를 항상 얻을 수 있는 함수를 제공한다. 바로 마법과 같은 그 함수는:

vec4 ftransform(void);

이 함수는 입력받은 버텍스를 변환한 결과를 반환하며, 고정기능과 동일한 단계를 수행해 고정기능과 동일한 결과를 제공한다. 이제 쉐이더는 다음과 같이 재작성될 수 있다.

void main()
{
    gl_Position = ftransform();
}

프레그먼트 쉐이더
프레그먼트 쉐이더 역시 프레그먼트의 색상을 설정할 수 있는 미리 정의된 변수를 가지고 있다: gl_FragColor. 버텍스 쉐이더의 경우에서처럼, 프레그먼트 쉐이더 역시 main 함수를 가지고 있다. 다음 코드는 푸르스름한 색상으로 모든 프레그먼트를 그리는 프레그먼트 쉐이더 코드이다.

void main()
{
	gl_FragColor = vec4(0.4, 0.4, 0.8, 1.0);
}

위의 버텍스 쉐이더와 프레그먼트 쉐이더를 적용한 결과는 아래와 같다.