左中右的均值

即三个左中右三个像素点相加/3

precision mediump float;
uniform sampler2D u_image; //图片
uniform vec2 u_textureSize;
varying vec2 v_texCoord;
void main() {
   vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
   // 对左中右像素求均值
   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;
}

3x3卷积内核与卷积权重

即3x3的像素点,每个像素点都乘以内核因子后相加
最后再除以一个权重

var edgeDetectKernel = [ //3x3卷积内核
    -1, -1, -1,
    -1,  8, -1,
    -1, -1, -1
];
function computeKernelWeight(kernel) {  //卷积权重
 var weight = kernel.reduce(function(prev, curr) {
     return prev + curr;
 });
 return weight <= 0 ? 1 : weight;
}

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] ;
 
   // 只把rgb值求和除以权重
   // 将阿尔法值设为 1.0
   gl_FragColor = vec4((colorSum / u_kernelWeight).rgb, 1.0);
}

Webgl中的均值滤波与卷积

左中右的均值

3x3卷积内核与卷积权重