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

출처 : https://code.google.com/p/gpuakf/source/browse/glsl/kuwahara.glsl

출처에 있는 코드를 적용한 결과

<원본>

LoG를 통해 구현했던 Edge Effect는 아무래도 커널로 변환하는 과정이 완벽하지 않아서 인지

영 노이즈가 많이 생기길래 .. 간단하게 Canny Edge Effect 구현하는 코드를 구함

출처 :

edge.pdf

구현 방법은 간단하게 

1) 원본 이미지를 흑백 변환해주고

2) 흑백 변환된 이미지에 가우시안 블러를 적용하여 엣지를 구할 이미지 생성하고

3) 블러까지 적용된 이미지로 Gradient를 생성해 주면 끝 !

아래 코드는 위의 glsl 코드를 약간 변형하여 엣지의 두께 및 색상을 조절할 수 있는 코드 !

Edge Effect Shader

참고 : http://homepages.inf.ed.ac.uk/rbf/HIPR2/log.htm

         http://fourier.eng.hmc.edu/e161/lectures/gradient/node9.html

LoG는 이미지의 외곽선을 추출하기 위해 

이미지에 가우시안 블러를 적용하고 블러가 적용된 이미지에 라플라시안 필터를 적용하여

라플라시안보다 노이즈가 적은 외곽선을 추출하는 기법.

가우시안 블러 수식 

라플라시안 필터 수식

LoG 수식

수식에 필요한 값은 가운데 좌표가 0인 x, y 값과 가우시안 표준편차인 σ 값이 필요하다.

이 LoG 수식을 그래프로 표현한 것이 아래 그림이다. 

LoG값으로 커널을 생성할 수 있는데 커널을 생성하기 위해선 비례식이 필요하다. 

커널의 사이즈에 따라 비례식이 변하게 되는데 기준은 LoG(0,0)이다. 

LoG(0,0)의 경우 x와 y 값이 모두 0이기 때문에 결국 모두 같은 값으로 계산된다.

LoG(0,0) = -1/(πσ^4)

커널의 가운데 값이 가장 작은 값으로 존재해야 하므로 커널의 비례식은 아래와 같이 표현 할 수 있다.

α : -10*Radius = LoG(x,y) : LoG(0,0)

커널 반지름 : Radius

LoG(0,0)과 매치되는 -10*Radius의 경우는 .. 솔직히 아래 커널 값을 보고 이정도면 맞겠구나 하고 

때려 맞춰 넣은 값이다. 저 LoG 식에서 커널 값을 도출해 내는 정확한 방법을 찾고 있지만... 검색 능력이 딸리는 것인지 찾기 못했다 ㅠㅠ.. 

여튼 저 비례식을 이용하면 아래와 비슷한 커널값을 도출해 낼 수 있다.

이 커널 값은 커널 반지름(반경)은 4이고 가우시안 표준편차(σ)는 1.4를 적용하였을 때 커널 값이다. 

LoG vertex Shader

LoG frag Shader

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

UnSharp Mask Filter
가우시안 필터가 이미지를 부드럽게 만드는 것이라면 UnSharp Mask Filter는 이미지를 날카롭게 만드는 방법이다.
기본적으로 UnSharp는 원본이미지와 Bluring된 원본이미지가 필요하다.
그리고 아래와 같이 연산을 하면 된다.

g(x, y) = f(x, y) - f_smooth(x, y)
h(x, y) = f(x, y) + g(x, y)

f(x, y)는 원본 이미지의 픽셀이고, f_smooth(x, y)는 앞에서 설명한 가우시안 필터를 이용하여 생성해 낸 픽셀이다.
g(x, y)는 원본 이미지와 Bluring 이미지를 뺀 값인데 결과적으로 영상의 경계선 부분만 검출된다.

                                       원본                                                                           블러

 경계선결과

저 수식을 그림으로 표현하면 아래와 같다.








결과적으로 Highpass 부분만 남은 (c)를 (a)에 더함으로써 경계선 부분이 선명한 이미지가 출력되었다.
수식을 보면 알겠지만 g(x, y)에 k라는 factor를 두어 영상의 경계선을 더욱더 부각시킬수도 있고
경계선을 없애버릴 수도 있다. k는 일반적으로 0.0f 이상을 사용해야 하지만 음수여도 상관은 없다. 
수정된 공식은 아래와 같다.

h(x, y) = f(x, y) + k * g(x, y)

출처 : http://littlecheesecake.me/blog/13804700/opengles-shader

이미지 정보를 바탕으로 볼륨감을 주는 Emboss effect 

해당 효과를 적용하기 위한 shader code 정리

Emboss vertex shader

Emboss fragment shader

출처 : http://gmc.yoyogames.com/index.php?showtopic=608626

Mosaic Shader Vertex

보시는 것 처럼 vertex 부분은 손댈 곳이 없습니다. 

그냥 shader에 들어온 vertex와 texCoord를 그대로 사용해서 넘겨주시면 됩니다. 

Mosaic Shader Frag

frag Shader에 경우 Scale값과 Texel 값으로 모자이크의 범위를 정하고 

해당 좌표의 모자이크 범위를 구해 범위의 중점 색상으로 타일 전체를 칠해줍니다. 

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

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

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

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

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

hertzman Painterly Rendering.zip

삽질을 피하는 방법 | 2009/04/02 08:03 - 출처

MS Visaul Studio로 코딩하다가 다음과 같은 링크 에러를 만난다면 이렇게 해결하면 됩니다.

LIBCMTD.lib(wincrt0.obj) : error LNK2019: _WinMain@16 외부 기호(참조 위치: ___tmainCRTStartup 함수)에서 확인하지 못했습니다.

프로젝트 속성 > 링커 > 시스템 > 하위시스템 항목을 '콘솔'로 변경해주면 됩니다.

이 에러는 콘솔 프로그램을 작성하기 위해서 프로젝트를 생성했는데 프로젝트 속성은 윈도우즈 프로그램으로 설정이 되어 있을 때 나타납니다.

출처 : 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 이미지