Edge Effect Shader

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

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

출처 :

edge.pdf

구현 방법은 간단하게 

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

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

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

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

Edge Effect Shader

precision mediump  float; uniform sampler2D uTexID0;           // 흑백 블러 이미지 varying vec2 vTexCoord; uniform vec2 uTexel;             // 텍셀 uniform float               uOffset;             // 엣지 두께 uniform float uThreshold;       // 임계치 uniform vec4 uColor;             // 엣지 색상 void main() {     vec2 pixelRight   = vTexCoord + vec2(uTexel.x*uOffset,0.0),          pixelLeft    = vTexCoord + vec2(-uTexel.x*uOffset,0.0),          pixelTop     = vTexCoord + vec2(0.0,uTexel.y*uOffset),          pixelBottom  = vTexCoord + vec2(0.0,-uTexel.y*uOffset);     vec2 gradient = vec2(length(texture2D(uTexID0,pixelRight).xyz                          - texture2D(uTexID0,pixelLeft).xyz),                          length(texture2D(uTexID0,pixelTop).xyz                          - texture2D(uTexID0,pixelBottom).xyz));     // 배경은 흰색 엣지는 입력받은 색상으로 그려줌     gl_FragColor =  mix( vec4(1.0,1.0,1.0,1.0), uColor, length(gradient)-uThreshold);   }