[카테고리:] Shader

작성일자

쉐이더(Shader) 코드를 외부 자원으로 분리하기

Shader 코드를 외부 자원으로 분리해서 좀 더 깔끔하게 코드를 작성하고자 합니다. 물론 이런 분리는 유지보수 및 Shader에 대한 분리를 통해 유연성을 증가시키는 장점도 있습니다. Shader 코드를 shader.glsl이라는 파일로 작성했다고 할 때, 이 파일 자원을 불러와 사용하는 코드의 예시는 다음과 같습니다. 

fetch("shader.glsl").then(response => {
    return response.text();
}).then(text => {
    const fragmentShaerCode = text;
    const material = new THREE.ShaderMaterial({

        ...

        vertexShader: `
            uniform float iTime;    
        
            varying vec2 vUv;

            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix  * vec4(position,1.0);
            }
        `,
        
        fragmentShader: fragmentShaerCode
    });

    ....

}).catch(function (error) {
    console.warn(error);
});

vertex Shader는 분리되어 있지 않았지만 fragment Shader는 분리된 파일 자원(여기서는 shader.glsl)을 불러와 사용하고 있습니다.

작성일자

GLSL, 원(Circle)

완전한 3차원 장면은 Shader로 완성된다고 할 수 있는데요. Shader를 통해 매우 사실적인 물, 안개, 번개 등과 같은 표현이 가능합니다. 아래는 Shader 언어 중 GLSL로 작성된 원을 렌더링하는 코드입니다.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

float circle(vec2 position, float radius) {
    return step(length(position), radius);
}

void main() {
    vec2 position = gl_FragCoord.xy / u_resolution;
    position -= 0.5;
    vec3 color = vec3(circle(position, 0.3));
    gl_FragColor = vec4(color, 1.0);

}

결과는 아래와 같구요.

코드를 보면 12번은 색상을 결정해야 하는 위치 좌표를 (0,0) ~(1,1)의 범위로 정규화해 줍니다. (0,0)은 화면의 좌측하단입니다. 13번은 다시 이 좌표를 (-0.5,-0.5) ~ (0.5,0.5)로 변경해 줍니다. 원의 가운데 위치하도록 하기 위함입니다. 8번은 원을 표현하기 위한 픽셀의 색상값을 결정하는 함수의 코드인데요. step(A, B)는 B가 A보다 크거나 같으면 1을 반환하고, 아니라면 0을 반환합니다.

작성일자

GLSL를 이용한 그래픽 효과

3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.

먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.

다음은 물에 대한 결과입니다.

전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.

작성일자

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);	
}