GLSL Implementing Filter Effects

http://blog.csdn.net/neng18/article/details/38083987

The "emboss" image effect refers to the foreground projecting background of the image. Common in some monument carving, to achieve relief is actually very simple. We calculate the pixel of the image and the pixel at the top left, and add a grayscale. This grayscale represents the background color. Here we set this interpolation value to 128 (the image RGB value is 0-255). At the same time, we should also convert the difference between the two colors to luminance information. Otherwise the embossed image will appear in color.

"Precision Mediump float;      \ n "" varying vec2 v_texcoord;     \ n "" Uniform sampler2d s_basemap;            \ n "" Uniform vec2 texsize;   \ n "" void main () \ n "" {\ n "" Vec2 Tex =v_texcoord;           \ n "" Vec2 Upleftuv = VEC2 (TEX.X-1.0/TEXSIZE.X,TEX.Y-1.0/TEXSIZE.Y);                           \ n "" Vec4 Curcolor = texture2d (S_basemap,v_texcoord);                  \ n "" Vec4 Upleftcolor = texture2d (S_BASEMAP,UPLEFTUV);                           \ n "" vec4 delcolor = Curcolor-upleftcolor;                  \ n "" float h = 0.3*delcolor.x + 0.59*delcolor.y + 0.11*delcolor.z;                   \ n "" Vec4 Bkcolor = VEC4 (0.5, 0.5, 0.5, 1.0);                             \ n "" Gl_fragcolor = Vec4 (h,h,h,0.0) +bkcolor; \ n "} \ n";

Mosaic of entry effects

Next we complete a more common effect-mosaic. The mosaic of the picture is the color of a fairly large area of the picture with the same point. It can be thought of as a large-scale reduction in the resolution of the image, and let some details of the image hidden, such as television to show the body of a criminal, But he can't show his face, and this time we can add a mosaic to his face.

Implementing the mosaic with HLSL code is very simple, but again, we need some extra steps, and the first step is to convert the texture coordinates to the integer coordinates of the actual size of the image. Next, we'll quantify the image's coordinates---such as the size of the mosaic block is 8x8 pixels. Then we can use the following method to get the image sample value after mosaic, assuming [x.y] is the integer coordinate of the image:

[X,Y]MOSAIC = [Int (X/8) *8, int (Y/8) *8].

"Precision Mediump float;    \ n "
  " varying vec2 v_texcoord;    \ n "
  " Uniform sampler2d s_basemap;\n ""
  uniform vec2 texsize;       \ n "
  " vec2 mosaicsize = VEC2 (8,8); \ n "
  " void Main ()                 \ n "
  " {                           \ n "
  "	vec2 intxy = VEC2 (v_ Texcoord.x*texsize.x, v_texcoord.y*texsize.y);   \ n "
  "	vec2 xymosaic = VEC2 (Floor (intxy.x/mosaicsize.x) *mosaicsize.x,floor (INTXY.Y/MOSAICSIZE.Y) * MOSAICSIZE.Y);  \ n "
  "	vec2 uvmosaic = VEC2 (xymosaic.x/texsize.x,xymosaic.y/texsize.y);     \ n "
  "	vec4 basemap = texture2d (s_basemap,uvmosaic);                        \ n "
  "	gl_fragcolor = basemap;                                              \ n "
  }                                                                       \ n";

The reader may find this mosaic too common, indeed it is not novel, let us improve, we hope to achieve such an effect: the mosaic area is not square, but round, circular area outside, we use the original color of the image overlay. So we need to change the code.

First find the original mosaic area of the positive center (the original is the upper left corner): And then calculate the image sampling point to the center of the distance, if in the Mosaic circle, use the central color of the area, otherwise the original color. The modified code is as follows, where we adjust the size of the mosaic area to 16x16. This effect is more obvious.

"Precision HIGHP float;            \ n "" varying vec2 v_texcoord;        \ n "" Uniform sampler2d s_basemap;               \ n "" Uniform vec2 texsize;      \ n "" Vec2 mosaicsize = VEC2 (8,8); \ n "" void main () \ n "" {\ n "" Vec2 intxy = VEC2 (V_texcoord    . x*texsize.x, V_TEXCOORD.Y*TEXSIZE.Y); \ n "" Vec2 Xymosaic = VEC2 (Floor (intxy.x/mosaicsize.x) *mosaicsize.x,floor (INTXY.Y/MOSAICSIZE.Y) *mosaicsize.y) + 0.5* Mosaicsize;   \ n "" vec2 delxy = xymosaic-intxy;      \ n "" Float DelL = length (DELXY); \ n "" Vec2 Uvmosaic = VEC2 (XYMOSAIC.X/TEXSIZE.X,XYMOSAIC.Y/TEXSIZE.Y);                \ n "" Vec4 _finalcolor;  \ n "" if (dell< 0.5*mosaicsize.x) \ n "" _finalcolor = Texture2d (S_basemap,uvmosaic);  \ n "" Else \ n "" _finalcolor = Texture2d (S_basemap,v_texcoord);      \ n "" Gl_fragcolor = _finalcolor; \ n "} \ n";

Fig.: Improved mosaic effect

L sharpness blur of advanced effect

The above two effect is relatively simple, let's call it an entry effect, it does not use too much digital image processing or signal processing knowledge. The next step is to introduce a slightly more complex effect, the first of which is the blurring and sharpening of the image.

Image blur becomes image smoothing (smoothing), we know that the human eye is very sensitive to high-frequency components, if in a continuous change in the brightness of the image, then suddenly appear a bright spot, then we can easily detect, similar, if the image has a sudden jump-the obvious edge, We are also easily aware of it. The component of these sudden changes is the high-frequency component of the image. The human eye usually uses low-frequency components to identify the contours and to perceive the details through high-frequency components (which is why when the photo resolution is low, people can only identify the approximate outline of the picture, and not see the details). However, these high-frequency components also often contain noise components. Image smoothing is to filter out the high-frequency components of the image.

So how to filter out the high-frequency components of the image. Let's first introduce the concept of digital image filter.

In simple and popular terms, the digital filter of an image is actually an array of n x N (the elements in the array become the coefficients of the filter or the weight of the filter, and n is called the Order of the filters). When the image is filtered, the value of a pixel-centric nxn pixel and this filter do convolution operations (that is, the corresponding position of the pixels and the corresponding position of the weight of the multiply accumulation added), the formula is as follows

where x, y is the pixel coordinate that is currently being processed.

In general, our filter order of 3 is sufficient, the 3x3 filter for obfuscation is as follows

。

The

After such a filter is actually equivalent to averaging a pixel and 8 pixels around it, which is very reasonable---is equal to mixing a pixel with a few pixels around-naturally blurred.

"Precision Mediump float;                                                									  \ n "" Vec4 Dip_filter (mat3 _filter, sampler2d _image, vec2 _xy, vec2 texsize) \ n "" { \ n "" Mat3 _filter_pos_delta_x=mat3 (VEC3 ( -1.0, 0.0, 1.0), VEC3 (0.0, 0.0, 1.0), VEC            3 (1.0,0.0,1.0));              \ n "" Mat3 _filter_pos_delta_y=mat3 (VEC3 ( -1.0,-1.0,-1.0), VEC3 ( -1.0,0.0,0.0), VEC3 ( -1.0,1.0,1.0));                                      \ n "" Vec4 Final_color = vec4 (0.0, 0.0, 0.0, 0.0); \ n "" for (int i = 0; i<3;                                                                                 i++) \ n "" { \ n "" for (int j = 0; j<3;                                                                             j + +) \ n "" { \ n "" Vec2 _xy_new = vec2 (_xy.x + _filter_pos_delta_x[i][j], _xy.y + _filter_pos_delta_y[i][j]) ; \ n "" vec2 _uv_new = veC2 (_xy_new.x/texsize.x, _xy_new.y/texsize.y);                 \ n "" Final_color + = texture2d (_image,_uv_new) * _FILTER[I][J];																  \ n ""} \ n ""} \ n "" return final_color;															  \ n ""} \ n "" varying vec2 v_texcoord;    															  \ n "" Uniform vec2 texsize;														  \ n "" Uniform sampler2d s_basemap; \ n "" void main () \ n "" {\ n "" Vec2 intxy = VEC2 (v_texcoord.x * texsize.x, V   		  _TEXCOORD.Y * texsize.y);
  \ n "" Mat3 _smooth_fil = MAT3 (1.0/9.0,1.0/9.0,1.0/9.0, \ n "" 1.0/9.0,1.0/9.0,1.0/9.0, \ n ")										  "1.0/9.0,1.0/9.0,1.0/9.0);
  \ n "" Vec4 tmp = Dip_filter (_smooth_fil, S_basemap, Intxy, texsize); "                                                  			  "Gl_fragcolor = tmp; \ n "} \ n";

The above fuzzy filter is called the box filter, is the simplest filter, if the distance from the center pixel to consider the effect of the filter coefficients, we usually use a more reasonable filter---Gaussian filter-a 2 Gaussian sampling of the filter, its template is as follows:

It is easy to see that the farther away the center is from the pixel, the smaller the weight factor.

For sharpening operations, the commonly used sharpening template is the Laplace (Laplacian) template, which is defined as follows:

It is easy to see the Laplace template approach: the first to subtract itself from the surrounding 8 pixels, indicating the difference between itself and the surrounding pixels, and then add this difference to the new pixel gray. Visible, if a dark area has a bright spot, then the result of sharpening processing is that the highlight becomes brighter, which enhances the image details.

The following third officer diagram shows the box filter respectively. Gaussian filtering and Laplace filtered images