gl blur

by Bartosz Zieliński

JavaScript

var canvas5 = document.createElement('canvas');
var context5 = canvas5.getContext('2d');
canvas5.width = 256;
canvas5.height = 256;
context5.fillStyle="#f00";
context5.fillRect(50,50,156,156);

// settimeout works
var canvas4 = document.createElement('canvas');
var context4 = canvas4.getContext('webgl');
canvas4.width=256;
canvas4.height=256;
context4.getExtension('OES_texture_float');
context4.getExtension('OES_texture_float_linear');

var pattern4_0 = context4.createShader(35633);
var PRECISION = "highp";
context4.shaderSource(pattern4_0,
`attribute vec2 vertex;
attribute vec2 _texCoord;
varying ${PRECISION} vec2 texCoord;
void main() {
	texCoord = _texCoord;
  gl_Position = vec4(vertex * 2.0 - 1.0, 0.0, 1.0);
}`);
context4.compileShader(pattern4_0);
context4.getShaderParameter(pattern4_0,context4.COMPILE_STATUS);

var pattern4_3 = context4.createProgram();
context4.attachShader(pattern4_3,pattern4_0);
var pattern4_4 = context4.createShader(35632);
context4.shaderSource(pattern4_4,
`precision ${PRECISION} float;
varying ${PRECISION} vec2 texCoord;
uniform float sigma;
uniform vec2  blurMultiplyVec;
uniform ${PRECISION} sampler2D texture;
const float blurPixels = 64.0;
const float pi = 3.14159265;
void main() {
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;
  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;
  vec4 sample = texture2D(texture, texCoord.xy);
  sample.rgb *= sample.a;
  avgValue += sample * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;
  for (float i = 1.0; i <= blurPixels; i++) {
    sample = texture2D(texture, texCoord.xy - i * blurMultiplyVec);
    sample.rgb *= sample.a;
    avgValue += sample * incrementalGaussian.x;
    sample = texture2D(texture, texCoord.xy + i * blurMultiplyVec);
   ...