animations

13.glsl

@@ -1,4 +1,4 @@
-vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   vec4 color = vec4(0.0);
   vec2 off1 = vec2(1.411764705882353) * direction;
   vec2 off2 = vec2(3.2941176470588234) * direction;
@@ -13,4 +13,4 @@ vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   return color;
 }
 
-#pragma glslify: export(blur)
+#pragma glslify: export(blur13)

5.glsl

@@ -0,0 +1,10 @@
+vec4 blur5(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.3333333333333333) * direction;
+  color += texture2D(image, uv) * 0.29411764705882354;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.35294117647058826;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.35294117647058826;
+  return color; 
+}
+
+#pragma glslify: export(blur5)

9.glsl

@@ -1,4 +1,4 @@
-vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   vec4 color = vec4(0.0);
   vec2 off1 = vec2(1.3846153846) * direction;
   vec2 off2 = vec2(3.2307692308) * direction;
@@ -10,4 +10,4 @@ vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
   return color;
 }
 
-#pragma glslify: export(blur)
+#pragma glslify: export(blur9)

demo/frag.glsl

@@ -13,6 +13,5 @@ void main() {
     uv.y = 1.0 - uv.y;
   }
 
-  vec4 blurred = blur(iChannel0, uv, iResolution.xy, direction);
-  gl_FragColor = blurred;
+  gl_FragColor = blur(iChannel0, uv, iResolution.xy, direction);
 }

demo/index.js

@@ -32,6 +32,7 @@ function start(err, image) {
   var fboA = createFBO(gl, [width, height])
   var fboB = createFBO(gl, [width, height])
 
+  // apply linear filtering to get a smooth interpolation
   var textures = [ texture, fboA.color[0], fboB.color[0] ]
   textures.forEach(setParameters)
 
@@ -44,7 +45,7 @@ function start(err, image) {
     gl.viewport(0, 0, width, height)
 
     var anim = (Math.sin(time) * 0.5 + 0.5)
-    var iterations = 9
+    var iterations = 8
     var writeBuffer = fboA
     var readBuffer = fboB
 

tools/coefficients.js

@@ -39,9 +39,10 @@ function coefficients(weights) {
   console.log('weights', linearWeights)
 }
 
-
-// var weights = '66    220    495    792    924    792    495    220    66'
-var weights = '120    560    1820    4368    8008    11440    12870    11440    8008    4368    1820    560    120'
+var weights = '28    56    70    56    28' // 5 taps
+// var weights = '45    120   210   252   210   120   45' // 7 taps
+// var weights = '66    220    495    792    924    792    495    220    66' // 9 taps
+// var weights = '120    560    1820    4368    8008    11440    12870    11440    8008    4368    1820    560    120'
   .split(/\s+/)
   .map(function(a) {
     return parseInt(a, 10)