Add shaders for filter() constants, and use them by default in P2D

src/image/filters.js

@@ -308,7 +308,7 @@ const Filters = {
   },
 
   /**
- * reduces the bright areas in an image
+ * increases the bright areas in an image
  * @private
  * @param  {Canvas} canvas
  */
@@ -395,7 +395,7 @@ const Filters = {
   },
 
   /**
- * increases the bright areas in an image
+ * reduces the bright areas in an image
  * @private
  * @param  {Canvas} canvas
  */

src/image/pixels.js

@@ -355,8 +355,11 @@ p5.prototype._copyHelper = (
  *                                POSTERIZE, BLUR, ERODE, DILATE or BLUR.
  *                                See Filters.js for docs on
  *                                each available filter
- * @param  {Number} [filterParam] an optional parameter unique
+ * @param  {Number} filterParam   an optional parameter unique
  *                                to each filter, see above
+ * @param  {Boolean} [useWebGL]   a flag to control whether to use fast
+ *                                WebGL filters (GPU) or original image
+ *                                filters (CPU); defaults to true
  *
  * @example
  * <div>
@@ -514,27 +517,80 @@ p5.prototype._copyHelper = (
  * gray square
  */
 
+/**
+ * @method filter
+ * @param  {Constant} filterType
+ * @param  {Boolean} [useWebGL]
+ */
 /**
  * @method filter
  * @param {p5.Shader}  shaderFilter  A shader that's been loaded, with the
  *                                   frag shader using a `tex0` uniform
  */
-p5.prototype.filter = function(operation, value) {
+p5.prototype.filter = function(...args) {
   p5._validateParameters('filter', arguments);
 
-  // TODO: use shader filters always, and provide an opt out
-  if (this._renderer.isP3D) {
-    p5.RendererGL.prototype.filter.call(this._renderer, arguments);
+  let { shader, operation, value, useWebGL } = parseFilterArgs(...args);
+
+  // when passed a shader, use it directly
+  if (shader) {
+    p5.RendererGL.prototype.filter.call(this._renderer, shader);
     return;
   }
 
-  if (this.canvas !== undefined) {
-    Filters.apply(this.canvas, Filters[operation], value);
-  } else {
-    Filters.apply(this.elt, Filters[operation], value);
+  // when opting out of webgl, use old pixels method
+  if (!useWebGL) {
+    if (this.canvas !== undefined) {
+      Filters.apply(this.canvas, Filters[operation], value);
+    } else {
+      Filters.apply(this.elt, Filters[operation], value);
+    }
+    return;
+  }
+
+  // when this is a webgl renderer, apply constant shader filter
+  if (this._renderer.isP3D) {
+    p5.RendererGL.prototype.filter.call(this._renderer, operation, value);
+  }
+
+  // when this is P2D renderer, create/use hidden webgl renderer
+  else {
+    // TODO: create/use hidden webgl renderer and transfer contents to this p2d
+    p5._friendlyError('webgl filter implementation in progress');
   }
 };
 
+function parseFilterArgs(...args) {
+  // args could be:
+  // - operation, value, [useWebGL]
+  // - operation, [useWebGL]
+  // - shader
+
+  let result = {
+    shader: undefined,
+    operation: undefined,
+    value: undefined,
+    useWebGL: true
+  };
+
+  if (args[0] instanceof p5.Shader) {
+    result.shader = args[0];
+    return result;
+  }
+  else {
+    result.operation = args[0];
+  }
+
+  if (args.length > 1 && typeof args[1] === 'number') {
+    result.value = args[1];
+  }
+
+  if (args[args.length-1] === false) {
+    result.useWebGL = false;
+  }
+  return result;
+}
+
 /**
  * Get a region of pixels, or a single pixel, from the canvas.
  *

src/webgl/material.js

@@ -268,16 +268,16 @@ p5.prototype.createFilterShader = function(fragSrc) {
     // so pass texcoords on to the fragment shader in a varying variable
     attribute vec2 aTexCoord;
     varying vec2 vTexCoord;
-    
+
     void main() {
       // transferring texcoords for the frag shader
       vTexCoord = aTexCoord;
-    
+
       // copy position with a fourth coordinate for projection (1.0 is normal)
       vec4 positionVec4 = vec4(aPosition, 1.0);
       // scale by two and center to achieve correct positioning
       positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
-    
+
       gl_Position = positionVec4;
     }
   `;

src/webgl/p5.RendererGL.js

@@ -79,6 +79,21 @@ const defaultShaders = {
   pointFrag: readFileSync(join(__dirname, '/shaders/point.frag'), 'utf-8')
 };
 
+// TODO: add remaining filter shaders
+const filterShaderFrags = {
+  [constants.GRAY]:
+    readFileSync(join(__dirname, '/shaders/filters/gray.frag'), 'utf-8'),
+  [constants.ERODE]:
+    readFileSync(join(__dirname, '/shaders/filters/erode.frag'), 'utf-8'),
+  [constants.DILATE]:
+    readFileSync(join(__dirname, '/shaders/filters/dilate.frag'), 'utf-8'),
+  [constants.BLUR]:
+    readFileSync(join(__dirname, '/shaders/filters/blur.frag'), 'utf-8'),
+  [constants.POSTERIZE]:
+    readFileSync(join(__dirname, '/shaders/filters/posterize.frag'), 'utf-8')
+};
+const filterShaderVert = readFileSync(join(__dirname, '/shaders/filters/default.vert'), 'utf-8');
+
 /**
  * @module Rendering
  * @submodule Rendering
@@ -951,7 +966,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this.curStrokeJoin = join;
   }
 
-  filter(args) {
+  filter(...args) {
     // Couldn't create graphics in RendererGL constructor
     // (led to infinite loop)
     // so it's just created here once on the initial filter call.
@@ -970,31 +985,39 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     }
     let pg = this.filterGraphicsLayer;
 
+    // use internal shader for filter constants BLUR, INVERT, etc
     if (typeof args[0] === 'string') {
-      // TODO, handle filter constants:
-      //   this.filterShader = map(args[0], {GRAYSCALE: grayscaleShader, ...})
-      //   filterOperationParameter = undefined or args[1]
-      p5._friendlyError('webgl filter implementation in progress');
-      return;
+      let operation = args[0];
+      let value = args[1];
+      this.filterShader = new p5.Shader(
+        pg._renderer,
+        filterShaderVert,
+        filterShaderFrags[operation]
+      );
+      this.filterShader.setUniform('filterParameter', value);
     }
-    let userShader = args[0];
-
-    // Copy the user shader once on the initial filter call,
-    // since it has to be bound to pg and not main
-    let isSameUserShader = (
-      this.filterShader !== undefined &&
-      userShader._vertSrc === this.filterShader._vertSrc &&
-      userShader._fragSrc === this.filterShader._fragSrc
-    );
-    if (!isSameUserShader) {
-      this.filterShader =
-        new p5.Shader(pg._renderer, userShader._vertSrc, userShader._fragSrc);
-      this.filterShader.parentShader = userShader;
+    // use custom user-supplied shader
+    else {
+      let userShader = args[0];
+
+      // Copy the user shader once on the initial filter call,
+      // since it has to be bound to pg and not main
+      let isSameUserShader = (
+        this.filterShader !== undefined &&
+        userShader._vertSrc === this.filterShader._vertSrc &&
+        userShader._fragSrc === this.filterShader._fragSrc
+      );
+      if (!isSameUserShader) {
+        this.filterShader =
+          new p5.Shader(pg._renderer, userShader._vertSrc, userShader._fragSrc);
+        this.filterShader.parentShader = userShader;
+      }
     }
 
     // apply shader to pg
     pg.shader(this.filterShader);
     this.filterShader.setUniform('tex0', this);
+    this.filterShader.setUniform('texelSize', [1.0/this.width, 1.0/this.height]);
     pg.rect(0,0,this.width,this.height);
 
     // draw pg contents onto main renderer

src/webgl/shaders/filters/blur.frag

@@ -0,0 +1,50 @@
+// Single-pass blur filter, taken from Adam Ferriss' repo of shader examples:
+// https://github.com/aferriss/p5jsShaderExamples/blob/gh-pages/4_image-effects/4-9_single-pass-blur/effect.frag
+
+precision highp float;
+
+// lets grab texcoords just for fun
+varying vec2 vTexCoord;
+
+// our texture coming from p5
+uniform sampler2D tex0;
+uniform vec2 texelSize;
+uniform float filterParameter;
+
+void main() {
+
+  vec2 uv = vTexCoord;
+
+  // a single pass blur works by sampling all the neighbor pixels and averaging them up
+  // this is somewhat inefficient because we have to sample the texture 9 times -- texture2D calls are slow :( 
+  // check out the two-pass-blur example for a better blur approach
+  // get the webcam as a vec4 using texture2D
+
+  // spread controls how far away from the center we should pull a sample from
+  // you will start to see artifacts if you crank this up too high
+  float spread = 4.0;
+  if (filterParameter > 0.0) {
+    spread = filterParameter;
+  }
+
+  // create our offset variable by multiplying the size of a texel with spread
+  vec2 offset = texelSize * spread;
+
+  // get all the neighbor pixels!
+  vec4 tex = texture2D(tex0, uv); // middle middle -- the actual texel / pixel
+  tex += texture2D(tex0, uv + vec2(-offset.x, -offset.y)); // top left
+  tex += texture2D(tex0, uv + vec2(0.0, -offset.y)); // top middle
+  tex += texture2D(tex0, uv + vec2(offset.x, -offset.y)); // top right
+
+  tex += texture2D(tex0, uv + vec2(-offset.x, 0.0)); //middle left
+  tex += texture2D(tex0, uv + vec2(offset.x, 0.0)); //middle right
+
+  tex += texture2D(tex0, uv + vec2(-offset.x, offset.y)); // bottom left
+  tex += texture2D(tex0, uv + vec2(0.0, offset.y)); // bottom middle
+  tex += texture2D(tex0, uv + vec2(offset.x, offset.y)); // bottom right
+
+  // we added 9 textures together, so we will divide by 9 to average them out and move the values back into a 0 - 1 range
+  tex /= 9.0;
+
+  gl_FragColor = tex;
+}

src/webgl/shaders/filters/default.vert

@@ -0,0 +1,17 @@
+attribute vec3 aPosition;
+// texcoords only come from p5 to vertex shader
+// so pass texcoords on to the fragment shader in a varying variable
+attribute vec2 aTexCoord;
+varying vec2 vTexCoord;
+
+void main() {
+  // transferring texcoords for the frag shader
+  vTexCoord = aTexCoord;
+
+  // copy position with a fourth coordinate for projection (1.0 is normal)
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  // scale by two and center to achieve correct positioning
+  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+
+  gl_Position = positionVec4;
+}

src/webgl/shaders/filters/dilate.frag

@@ -0,0 +1,38 @@
+// Increase the bright areas in an image
+
+precision highp float;
+
+varying vec2 vTexCoord;
+
+uniform sampler2D tex0;
+uniform vec2 texelSize;
+
+float luma(vec3 color) {
+  // based on constants 77, 151, 28 from DILATE in filters.js,
+  // even though that's different than the luminance constants used in GRAY
+  return dot(color, vec3(0.3008, 0.5898, 0.1094));
+}
+
+void main() {
+  vec4 curColor = texture2D(tex0, vTexCoord);
+  float curLuminance = luma(curColor.rgb);
+
+  // set current color as the neighbor color with highest luminance
+
+  vec4 neighbors[4];
+  neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));
+  neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));
+  neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0,  texelSize.y));
+  neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));
+
+  for (int i = 0; i < 4; i++) {
+    vec4 color = neighbors[i];
+    float lum = luma(color.rgb);
+    if (lum > curLuminance) {
+      curColor = color;
+      curLuminance = lum;
+    }
+  }
+
+  gl_FragColor = curColor;
+}

src/webgl/shaders/filters/erode.frag

@@ -0,0 +1,38 @@
+// Reduces the bright areas in an image
+
+precision highp float;
+
+varying vec2 vTexCoord;
+
+uniform sampler2D tex0;
+uniform vec2 texelSize;
+
+float luma(vec3 color) {
+  // based on constants 77, 151, 28 from ERODE in filters.js,
+  // even though that's different than the luminance constants used in GRAY
+  return dot(color, vec3(0.3008, 0.5898, 0.1094));
+}
+
+void main() {
+  vec4 curColor = texture2D(tex0, vTexCoord);
+  float curLuminance = luma(curColor.rgb);
+
+  // set current color as the neighbor color with lowest luminance
+
+  vec4 neighbors[4];
+  neighbors[0] = texture2D(tex0, vTexCoord + vec2( texelSize.x, 0.0));
+  neighbors[1] = texture2D(tex0, vTexCoord + vec2(-texelSize.x, 0.0));
+  neighbors[2] = texture2D(tex0, vTexCoord + vec2(0.0,  texelSize.y));
+  neighbors[3] = texture2D(tex0, vTexCoord + vec2(0.0, -texelSize.y));
+
+  for (int i = 0; i < 4; i++) {
+    vec4 color = neighbors[i];
+    float lum = luma(color.rgb);
+    if (lum < curLuminance) {
+      curColor = color;
+      curLuminance = lum;
+    }
+  }
+
+  gl_FragColor = curColor;
+}

src/webgl/shaders/filters/gray.frag

@@ -0,0 +1,16 @@
+precision highp float;
+
+varying vec2 vTexCoord;
+
+uniform sampler2D tex0;
+
+float luma(vec3 color) {
+  // weighted grayscale with luminance values
+  return dot(color, vec3(0.2126, 0.7152, 0.0722));
+}
+
+void main() {
+  vec4 tex = texture2D(tex0, vTexCoord);
+  float gray = luma(tex.rgb);
+  gl_FragColor = vec4(gray, gray, gray, tex.a);
+}