야생의 게임 덕후 프로그래머 :9

수채화나 유화 같은 느낌의 렌더링을 하기 위해 가장 유명(?)한 알고리즘

알고리즘 및 소스 코드를 볼 수 있는 사이트 

http://www.dgp.toronto.edu/~hertzman/sbr02/

<올라와 있는 예제를 실행 시키면 나오는 결과>

스트로크 값만 잘 변경해 활용하면 다양한 효과를 볼 수 있을 듯 하다.

hertzman Painterly Rendering.zip

출처 : http://igortrindade.wordpress.com/2010/04/23/fun-with-opengl-and-shaders/

이미지 필터에 대한 공부 중 가장 기본 중에 기본 sharpening 과 embossing

두 필터의 내용은 방법이 비슷하니까 같이 묶어서 정리 ! 

sharpening matrix

0 -1 0

-1 5 -1

0 -1 0

비슷한 행렬로는 edge detection이 있습니다. 

edge detection

-1 -1 -1

-1 8 -1

-1 -1 -1

이제 저 행렬을 fragment shader에 적용합니다. 

sharpening 

uniform sampler2D sampler;

uniform vec2 offset[9];

uniform int kernel[9];

void main()
{
vec4 sum = vec4(0.0);
int i;

for (i = 0; i < 9; i++) {
vec4 color = texture2D(sampler, gl_TexCoord[0].st + offset[i]);
sum += color * kernel[i];
}

gl_FragColor = sum;
}

결과물

 원본 이미지

 sharpening 이미지

비슷한 행렬을 사용하는 edge detection을 적용한 fragment shader

uniform sampler2D sampler;

uniform vec2 offset[9];

uniform int kernel[9];

void main()
{
vec4 sum = vec4(0.0);
int i;

for (i = 0; i < 9; i++) {
vec4 color = texture2D(sampler, gl_TexCoord[0].st + offset[i]);
sum += color * kernel[i];
}

sum += 0.51;

gl_FragColor = sum;
}

결과물

 edge detection 이미지

마지막으로 embossing을 위한 fragment shader 

uniform sampler2D sampler;
uniform vec2 offset[9];
uniform int kernel[9];

void main()
{
vec4 sum = vec4(0.0);
int i = 0;
for( i = 0; i < 9; i++) {
vec4 color_tmp = texture2D(sampler, gl_TexCoord[0].st + offset[i]);
float h = (color_tmp.x + color_tmp.y + color_tmp.z + color_tmp.w)/4.0;
if (h > 1)
h = 1.0;

if (h < 0)
h = 0.0;

vec4 color = vec4(h, h, h, h);
sum.x += color.x * kernel[i];
}

sum.x /= 1.0;
sum.x += 0.51;

if (sum.x > 1)
sum.x = 1;
if (sum.x < 0)
sum.x = 0;

gl_FragColor = vec4(sum.x, sum.x, sum.x, 1);
}

결과물

 embossing 이미지

출처 : http://scosco.com.ne.kr/Stereo3DHtml/vr_0003_gaussian.htm

영상을 부드럽게 처리하기 위해선 저역필터를 통과시켜야 한다. 

다양한 저역필터가 존재하지만 그 중 많이 사용하는 것이 바로 가우시안 필터이다. 

가우시안 함수는 자연현상을 가장 잘 표현하는 함수 식 중의 하나이다.
1차원 가우시안 분포를 식으로 나타내면 아래와 같다.





μ는 일반적으로 0으로 놓는다. σ는 값의 분포를 결정지으며, 표준편차를 의미한다.
일반적으로 μ = 0과 σ^2 = 1를 정규분포라고 부른다.

영상처리에서 가우시안 필터는 2차원 가우시안 함수 값을 이용하여 마스크를 생성하고,
입력영상과 마스크 연산을 수행해주는 것을 의미한다.
이 때, σ에 의해 필터의 크기가 결정되는데, 이 때 값의 분포와 그래프는 아래와 같다.

-4 * σ <= x <= 4 * σ






지금까지는 1차원 가우시안 함수를 설명했지만, 실제 영상에서는 2차원 가우시안 함수가 사용되어야 한다.
2차원 가우시안 함수는 아래와 같다.





위의 식에서 μ = 0 이라고 가정했다. (이후부터 μ는 고려하지 않는다.)
아래는 σ에 따른 이미지의 Bluring을 보여주고 있다.


원본
σ = 1.0
σ = 2.0

출처 : http://wannemag.blogspot.kr/2014/03/glsl-function-mix.html

mix 에 대한 간단한 기능 구현

vec4 my_mix(vec4 x, vec4 y, float a) {
vec4 x_contribution = x * (1.0 - a);
vec4 y_contribution = y * a;

return x_contribution + y_contribution;
}

void main(void) {

vec4 white_layer = vec4(1.0, 1.0, 1.0, 1.0);
vec4 black_layer = vec4(0.0, 0.0, 0.0, 1.0);

float amount_of_second_layer = 0.5;

//gl_FragColor = mix(white_layer, black_layer, amount_of_second_layer);
gl_FragColor = my_mix(white_layer, black_layer, amount_of_second_layer);

}

clamp 에 대한 간단한 기능 구현

vec4 my_clamp(vec4 x, vec4 minVal, vec4 maxVal) {
float x_comp = x.x < minVal.x ? minVal.x : x.x > maxVal.x ? maxVal.x : x.x;
float y_comp = x.y < minVal.y ? minVal.y : x.y > maxVal.y ? maxVal.y : x.y;
float z_comp = x.z < minVal.z ? minVal.z : x.z > maxVal.z ? maxVal.z : x.z;
float w_comp = x.w < minVal.w ? minVal.w : x.w > maxVal.w ? maxVal.w : x.w;

return vec4(x_comp, y_comp, z_comp, w_comp);
}