WebglFundemental mean filtering

The mean of the left, middle and right

• That is, the sum of three left, middle and right pixels divided by 3

precision mediump float;
uniform sampler2D u_image; / / picture
uniform vec2 u_textureSize;
varying vec2 v_texCoord;
void main(a) {
   vec2 onePixel = vec2(1.0.1.0) / u_textureSize;
   // Average the left, middle and right pixels
   gl_FragColor = (
       texture2D(u_image, v_texCoord) +
       texture2D(u_image, v_texCoord + vec2(onePixel.x, 0.0)) +
       texture2D(u_image, v_texCoord + vec2(-onePixel.x, 0.0))) / 3.0;
}
Copy the code

3×3 convolution kernel and convolution weight

• That’s 3×3 pixels, and each pixel is multiplied by the kernel factor and added up
• And then finally divide by a weight

var edgeDetectKernel = [ //3x3 convolution kernel
    -1, -1, -1,
    -1.8, -1,
    -1, -1, -1
];
function computeKernelWeight(kernel) {  // convolution weights
 var weight = kernel.reduce(function(prev, curr) {
     return prev + curr;
 });
 return weight <= 0 ? 1 : weight;
}
Copy the code

precision mediump float;
 
uniform sampler2D u_image;
uniform vec2 u_textureSize;
uniform float u_kernel[9];
uniform float u_kernelWeight;
varying vec2 v_texCoord;
 
void main() {
   vec2 onePixel = vec2(1.0.1.0) / u_textureSize;
   vec4 colorSum =
     texture2D(u_image, v_texCoord + onePixel * vec2(- 1.- 1)) * u_kernel[0] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 0.- 1)) * u_kernel[1] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 1.- 1)) * u_kernel[2] +
     texture2D(u_image, v_texCoord + onePixel * vec2(- 1.0)) * u_kernel[3] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 0.0)) * u_kernel[4] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 1.0)) * u_kernel[5] +
     texture2D(u_image, v_texCoord + onePixel * vec2(- 1.1)) * u_kernel[6] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 0.1)) * u_kernel[7] +
     texture2D(u_image, v_texCoord + onePixel * vec2( 1.1)) * u_kernel[8];// Just divide the RGB values by the weight
   // Set alpha to 1.0
   gl_FragColor = vec4((colorSum / u_kernelWeight).rgb, 1.0);
}
Copy the code