Image Filtering with GLSL

Outline Convolution Convolution implementation using GLSL Commonly used convolution filter Mean Filter Gaussian Filter Laplacian Filter Sharpness Filter Sobel Filter

Convolution1 Convolution Convolution kernel an operation in which the final pixel is the weighted sum of the neighboring pixels Convolution kernel a matrix which gives some weight to each one of the neighbor pixels Also known as filter, mask, kernel, template, or window

Convolution2

Mean Filter Most commonly used for the image noise elimination eliminating pixel values which are unrepresentative of their surroundings

Gaussian Filter1 A kind of lowpass filter Used to blur an image and remove detail and noise 1/16 4/16 2/16

Gaussian Filter2

Gaussian Filter3 Filter size 3 5 9 15 35

Laplacian Filter1 Used for the image edges detection -4 1

Laplacian Filter2

Sharpness Filter Used to increase and to make stand out the details of an image -1 -1 -1 -1 -1 5 -1 -1 9 -1 -1 -1 -1 -1

Sobel Filter1 Edge detection: compute opposite of the (color) gradient vector, or the norm of this vector

Sobel Filter2 Height map to Normal map Using Sobel Filters (ref) Encode [-1,1]3 to [0,1]3 Note: in glsl, I swap the first and third rows of Gy, as the t axis points up!

馬賽克

Fragment Shader (1/2) Array constructor (assume texture 256x256) step_w = 1/256 Array constructor

Fragment Shader (2/2)