OpenGL Shader – 32

GLSL 예제 : Texture(MultiTexture) – 3/3

원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?textureMulti

멀티 텍스쳐링은 GLSL에서는 정말 쉽다. 해야할 것은 두개의 텍스쳐에 접근하는 일이 전부다. 그리고 이 장에서는 동일한 텍스쳐 좌표를 사용할 것이기 때문에 버텍스 쉐이더를 재작성하지 않고 이전 강좌의 것을 그대로 사용한다. 프레그먼트 쉐이더 또한 두개의 텍스쳐 색상을 추가하는 최소한의 변화만 있다.

varying vec3 lightDir,normal;
uniform sampler2D tex,l3d;

void main()
{
    vec3 ct,cf;
    vec4 texel;
    float intensity,at,af;
		
    intensity = max(dot(lightDir,normalize(normal)),0.0);
	
    cf = intensity * (gl_FrontMaterial.diffuse).rgb + 
         gl_FrontMaterial.ambient.rgb;
    af = gl_FrontMaterial.diffuse.a;
	
    texel = texture2D(tex,gl_TexCoord[0].st)+
            texture2D(l3d,gl_TexCoord[0].st);

    ct = texel.rgb;
    at = texel.a;
	
    gl_FragColor = vec4(ct * cf, at * af);	
}

그리고 이제, 약간 다른 특별한 것을 해보자: Glow in the Drak Effect. 이 특별한 효과는 두번째 텍스쳐를 어둠속에서 타오르는듯하게 보이는 것이다. 예를들어, 완전이 밝아졌다가 어두워지는 듯한 효과.
두 단계로 최종 색상을 다시 계산해야 하는데, 먼저 첫번째 텍스쳐를 프레그먼트 색상으로 조정된 상태의 색상을 계산하고, 이후에 두번째 텍스쳐 유닛을 강도에 기반해서 추가하는 것이다.

intensity가 0이라면, 두번째 텍스쳐가 전체적으로 완전하게 표시된다. 반대로 intensity가 1이라면, 두번째 텍스쳐를 10% 정도만 표시되도록 한다. 이런 표시를 위해 smoothStep라는 함수를 통해 구현할 것이다. 이 함수의 시그니쳐는 다음과 같다.

genType smoothStep(genType edge0, genType edge1, genType x);

만약 x<=edge0이면 결과는 0이고,  x>=edge1이면 1 그리고 edge0< x <edge1이면 Hermit 보간 연산이 수행된다. 우리의 경우 다음 함수를 호출한다.

coef = smoothStep(1.0, 0.2, intensity);

다음은 프레그먼트 쉐이더 코드이다.

varying vec3 lightDir,normal;
uniform sampler2D tex,l3d;

void main()
{
    vec3 ct,cf,c;
    vec4 texel;
    float intensity,at,af,a;
	
    intensity = max(dot(lightDir,normalize(normal)),0.0);
	
    cf = intensity * (gl_FrontMaterial.diffuse).rgb + 
             gl_FrontMaterial.ambient.rgb;
    af = gl_FrontMaterial.diffuse.a;
	
    texel = texture2D(tex,gl_TexCoord[0].st);
		
    ct = texel.rgb;
    at = texel.a;
	
    c = cf * ct;
    a = af * at;
		
    float coef = smoothstep(1.0,0.2,intensity);
    c += coef *  vec3(texture2D(l3d,gl_TexCoord[0].st));
	
    gl_FragColor = vec4(c, a);	
}

OpenGL Shader – 31

GLSL 예제 : Texture(Combine Texture + Fragment) – 2/3

원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?dirlightpix

OpenGL은 다양한 방법으로 텍스쳐 색상과 프레그먼트 생상을 혼합하는 방법을 제공한다.  바로 아래의 내용은 RGBA 모드를 위한 몇가지 모드이다.

GL_REPLACE      C = Ct                           A = At 
GL_MODULATE     C = Ct*Cf                        A = At*Af 
GL_DECAL        C = Cf * (1 - At) + Ct * At      A = Af

Ct와 At는 텍스쳐의 색상과 알파값이고, Cf와 Af는 프레그먼트의 색상과 알파값이며 C와 A는 최종적인 색상과 알파값이다.

이전 섹션에서 제공되었던 예제는 GL_REPLACE의 경우의 예였다. 여기서는 정육면체에 GL_MODULATE의 내용을 구현해보자. 쉐이더들은 하얀색의 Diffuse Directional Light를 가지고 Diffuse와 Ambient 요소만을 계산한다. 재질에 대한 완전한 정의는 Lighting(광원) 섹션을 살펴보길 바란다.

빛을 사용하기 때문에, 그래서 법선벡터에 대해,  버텍스 쉐이더는 몇가지 작업을 해야한다. 주로 법선벡터를 카메라 좌표계로 변환하고 정규화하는 일이며 빛의 방향에 대해서도 정규화를 해야한다. (빛의 방향은 이미 OpenGL에 의해서 카메라 좌표계로 변환되어졌다). 지금 단계에서 버텍스 쉐이더는 다음과 같다.

varying vec3 lightDir,normal;
	
void main()
{
    normal = normalize(gl_NormalMatrix * gl_Normal);
    lightDir = normalize(vec3(gl_LightSource[0].position));
		
    gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position = ftransform();
}

프레그먼트 쉐이더에서, 프레그먼트의 색상과 알파값은 각각 cf와 af에 계산되어진다. 위에서 언급한 GL_MODULATE 공식을 계산하는 나머지 쉐이더 코드는 다음과 같다.

varying vec3 lightDir,normal;
uniform sampler2D tex;
	
void main()
{
    vec3 ct,cf;
    vec4 texel;
    float intensity,at,af;
		
    intensity = max(dot(lightDir,normalize(normal)),0.0);
		
    cf = intensity * (gl_FrontMaterial.diffuse).rgb + 
              gl_FrontMaterial.ambient.rgb;
    af = gl_FrontMaterial.diffuse.a;
		
    texel = texture2D(tex,gl_TexCoord[0].st);
    ct = texel.rgb;
    at = texel.a;
		
    gl_FragColor = vec4(ct * cf, at * af);	
}

OpenGL Shader – 30

GLSL 예제 : Texture(Simple Texture) – 1/3

원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?dirlightpix

GLSL에서 텍스쳐링 연산을 하기 위해서, 버텍스에 대한 텍스쳐 좌표에 접근해야 한다. GLSL은  각 텍스쳐 유닛 각각에 대한 Attribute 변수들을 제공한다.

attribute vec4 gl_MultiTexCoord0;
attribute vec4 gl_MultiTexCoord1;
attribute vec4 gl_MultiTexCoord2;
attribute vec4 gl_MultiTexCoord3;
attribute vec4 gl_MultiTexCoord4;
attribute vec4 gl_MultiTexCoord5;
attribute vec4 gl_MultiTexCoord6;
attribute vec4 gl_MultiTexCoord7;

또한 GLSL은 uniform 변수 배열 형태로 각 텍스쳐에 대한 텍스쳐 행렬에 접근할 수 있다.

uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];

버텍스 쉐이더는 OpenGL 어플리케이션에서 지정한 텍스쳐 좌표 등을 얻을 수 있다. 버텍스에 대한 텍스쳐 좌표를 계산을 해야하고, 계산후에 미리 정의된 varying 변수인 gl_TexCoord[i] 변수에 계산된 텍스쳐 좌표를 저장하는데, 여기서 i는 텍스쳐 유닛에 대한 인덱스이다.

텍스쳐에 대한 텍스쳐 좌표를 설정하는 간단한 버텍스 쉐이더는 아래와 같다. 사용하는 텍스쳐 유닛은 0이다.

void main() {
    gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position = ftransform();
}

만약 텍스쳐 행렬을 사용하길 원한다면 아래와 같다.

void main() {
    gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_Position = ftransform();
}

gl_TexCoord가 Varying 변수라고 언급했었는데, 예를들어서 이 gl_TexCoord는 프레그먼트 쉐이더에서 계산된 텍스쳐 좌표를 접근하는데 사용될 수 있다.

텍스쳐 값에 접근하기 위해서, 프레그먼트 쉐이더에서는 특별한 타입의 변수을 선언할 필요가 있다. 2D 텍스쳐에 대해서는 다음과 같다.

uniform sampler2D tex;

1D와 3D 텍스쳐에 대한 데이터 타입도 가능한데, 일반적인 포멧은 sampler_i_D이며 _i_에 해당하는 것이 텍스쳐의 차원이다. 사용하고자 하는 텍스쳐 유닛을 포함하는 tex 변수를 선언한다. 텍셀(텍스쳐 이미지의 화소 색상)을 제공하는 함수는 texture2D이다. 이 함수는 sampler2D와 텍스쳐의 좌표를 인자로 받으며 텍셀값을 반환한다. 아래에 texture2D 함수에 대한 시그니쳐가 있다.

vec4 texture2D(sampler2D, vec2);

반환값은 OpenGL 어플리케이션에서 설정된 모든 텍스쳐 설정값을 고려해서 계산되어진 값인데, 예를들어서 필터링, 밉맵, 클램프 등이다. 프레그먼트 쉐이더에서는 아래처럼 작성할 수 있다.

uniform sampler2D tex;
	
void main()
{
    vec4 color = texture2D(tex,gl_TexCoord[0].st);
    gl_FragColor = color;
}

gl_TexCoord에 접근할때 선택자 st의 사용에 주의하라. GLSL의 데이터 타입과 변수에 관해 앞서 언급했던것처럼, 텍스쳐 좌표에 접근할때는 선택자는 s,t,p,q가 될 수 있다. r은 rgb 선택자들과 충돌하기 때문에 사용하지 않는다.

OpenGL Shader – 29

GLSL 예제 : Lighting(Spot Light Per Pixel) – 6/6

원문 : http://www.lighthouse3d.com/opengl/glsl/index.php?dirlightpix

이 강좌는 이전 강좌에서 제공되는 코드의  90% 이상의 내용에 기반하고 있다. Point Light와 비교해 Spot Light에서 유일하게 차이점은, Point Light는 모든 방향으로 빛을 방사하는데 반해서 Spot Light는 제한 영역에만 빛을 받는다는 점이다.

OpenGL 어플리케이션의 관점에서 다음과 같은 차이들이 있다.

  • Spot Light는 방향을 가지고 있으며(spotDirection) 이 방향은 Spot Light의 Cone의 축이다.
  • Cone의 각도가 있다. GLSL은 어플리케이션에서 지정되어진 것으로써와 spotCosCutoff라는 cosine 변수로써, 이둘 모두를 제공한다.
  • 마지막으로 감쇄 비율이 있다(spotExponent). 예를들어서, 빛의 강도가 Cone의 원 모양의 밑바닥의 중심점으로부터 어떤식으로 감소하는지를 측정하는 것이다.

버텍스 쉐이더는 이전 강좌의 Point Light와 동일하고 프레그먼트 쉐이더에서 몇가지 변경이 있다. Diffuse, Specular 그리고 Ambient 요소는 오직 빛의 Cone의 안쪽에서 프레그먼트에만 영향을 미친다. 그러므로 우리가 먼저 해야할 첫번째것은 Cone 안쪽의 프레그먼트의 검사이다.

버텍스 벡터에서 빛 사이의 Cosine 각도와 Spot 방향은 반드시 spotCosCutoff보다 넓어야 한다. 만약 그렇지 않으면, 프레그먼트는 Cone의 바깓에 있고 단지 전역 Ambient 요소의 광원 효과만 받게 된다.

    ...

    n = normalize(normal);

    /* compute the dot product between normal and ldir */
    NdotL = max(dot(n,normalize(lightDir)),0.0);

    if (NdotL > 0.0) {
        spotEffect = dot(normalize(gl_LightSource[0].spotDirection), 
                         normalize(-lightDir));
        if (spotEffect> gl_LightSource[0].spotCosCutoff) {
	
            /* compute the illumination in here */

        }
    }
	
gl_FragColor = ...

조도의 계산은 Point Light의 경우에 매우 많이 비슷한데, 유일한 차이점은 감쇄값은 아래의 공식의 Spot Light의 효과(spotEffect)와 곱해져야 한다는 것이다.
spotDirection은 빛의 상태로부터 얻어진 값이며, lightDir은 광원으로부터 버텍스까지의 벡터이며, spotExp는 Spot의 감쇄비율이다. 이것 역시 OpenGL의 상태로부터 가져오며, 빛들의 강도가 Cone의 중심으로부터 Cone의 경계까지 어떻게 점점 감쇄하는지를 조정한다. 값이 크면 클수록 더 빨리 빛의 강도가 감쇄하며, Zero(0)의 의미는 빛의 Cone 안에서 일정한 빛의 강도를 의미한다.

spotEffect = pow(spotEffect, gl_LightSource[0].spotExponent);
att = spotEffect / (gl_LightSource[0].constantAttenuation +
      gl_LightSource[0].linearAttenuation * dist +
      gl_LightSource[0].quadraticAttenuation * dist * dist);

color += att * (diffuse * NdotL + ambient);

halfV = normalize(halfVector);
NdotHV = max(dot(n,halfV),0.0);
color += att * gl_FrontMaterial.specular * 
         gl_LightSource[0].specular * 
         pow(NdotHV,gl_FrontMaterial.shininess);

아래의 이미지는 OpenGL의 고정기능의 결과와 우리의 Spot Light Per Pixel에 대한 결과이다. OpenGL의 고정기능은 버텍스에 대해서 빛의 효과를 계산하는데 반해 우리의 Spot Light는 픽셀(프레그먼트)에 대해 빛의 효과를 계산한다.