`#version 300 es // fragment shaders don't have a default precision so we need // to pick one. highp is a good default. It means "high precision" //Why it is necessary to set precission for the fragment shader? //Vertex shader works without this, but fragment shader //doesn't work without this code row (as I see). // Why the different behaviour exist? //precision mediump float; precision highp float; in vec4 vColor; in highp vec2 vTextureCoord; uniform lowp sampler2D uSampler; //uImage // the convolution kernel data //this is for image processing see later uniform float u_kernel[9]; uniform float u_kernelWeight; // we need to declare an output for the fragment shader out vec4 outColor; void main() { // Just set the output to a constant reddish-purple // outColor = vColor; // gl_FragColor = mix ( vColor , texture2D(uSampler, vTextureCoord), 0.6 ); // outColor = texture2D(uSampler, vTextureCoord); // outColor = mix ( vColor , texture(uSampler, vTextureCoord), 0.6 ); /* //image processing:What if we want to do image processing that actually //=================: looks at other pixels? // Since WebGL references textures in texture coordinates // which go from 0.0 to 1.0 then we can calculate // how much to move for 1 pixel with the simple math // onePixel = 1.0 / textureSize. vec2 onePixel = vec2(1) / vec2(textureSize(uSampler , 0)); // average the left, middle, and right pixels. // Here's a fragment shader that averages the left and right pixels // of each pixel in the texture. outColor = // mix ( vColor , ( texture(uSampler, vTextureCoord ) + //left pixel texture(uSampler, vTextureCoord + vec2( onePixel.x, 0.0)) + //middle pixel texture(uSampler, vTextureCoord + vec2(- onePixel.x, 0.0)) //right pixek ) / 3.0 // , 0.7 ) ; */ //Convolution Kernels: Now that we know how to reference other pixels let's use //===================: a convolution kernel to do a bunch of common image processing. // In this case we'll use a 3x3 kernel. // A convolution kernel is just a 3x3 matrix where each entry in // the matrix represents how much to multiply the 8 pixels around the // pixel we are rendering. We then divide the result by the weight of // the kernel the sum of all values in the kernel) or 1.0, // ( whichever is greater. vec2 onePixel = vec2(1) / vec2(textureSize(uSampler , 0)); vec4 colorSum = texture(uSampler , vTextureCoord + onePixel * vec2(-1, -1)) * u_kernel[0] + texture(uSampler , vTextureCoord + onePixel * vec2( 0, -1)) * u_kernel[1] + texture(uSampler , vTextureCoord + onePixel * vec2( 1, -1)) * u_kernel[2] + texture(uSampler , vTextureCoord + onePixel * vec2(-1, 0)) * u_kernel[3] + texture(uSampler , vTextureCoord + onePixel * vec2( 0, 0)) * u_kernel[4] + texture(uSampler , vTextureCoord + onePixel * vec2( 1, 0)) * u_kernel[5] + texture(uSampler , vTextureCoord + onePixel * vec2(-1, 1)) * u_kernel[6] + texture(uSampler , vTextureCoord + onePixel * vec2( 0, 1)) * u_kernel[7] + texture(uSampler , vTextureCoord + onePixel * vec2( 1, 1)) * u_kernel[8] ; outColor = vec4((colorSum / u_kernelWeight).rgb, 1); }`