Fabricjs WebGL mask filter

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>


<canvas width="600" height="400" id="c"></canvas>
<img style="display:none" src="https://images.unsplash.com/photo-1534809027769-b00d750a6bac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjU1MjA5fQ&w=2333.3333333333&name=unsplash-Model - Kenagonio https://www.instagram.com/kenagonio/
Photographer - Judeus Samson https://www.instagram.com/judeus.samson.jpg" id="my-image" crossorigin="anonymous">
<img style="display:none" src="http://www.textures4photoshop.com/tex/thumbs/gray-wood-box-stock-image-PNG-thumb29.png" crossorigin="anonymous" id="mask">

<br/>

JavaScript

fabric.textureSize = 4096;//for filters on large images


var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 50,
  angle: 0,
  opacity: 1,
  scaleX:0.1,
  scaleY:0.1
});
canvas.add(imgInstance);






fabric.Image.filters.Mask = fabric.util.createClass(fabric.Image.filters.BaseFilter, {

  type: 'Mask',
	radius:0.1,
  smoothness:0.5,
  mainParameter:"mask",
  /**
   * Fragment source for the redify program
   */
  fragmentSource: //window.document.getElementById("thresholdShader").textContent,
  `precision highp float;
uniform sampler2D uTexture;
uniform sampler2D uMask;

varying vec2 vTexCoord;



void main() {
    vec4 color = texture2D( uTexture, vTexCoord);
    vec4 mask = texture2D( uMask, vTexCoord);
    
    
  	gl_FragColor = vec4(color.rgb,mask.a * color.a);
}`,

  applyTo2d: function(options) {
    var imageData = options.imageData,
        data = imageData.data, i, len = data.length;

    for (i = 0; i < len; i += 4) {
      data[i + 1] = 0;
      data[i + 2] = 0;
    }

  },
	applyToWebGL: function(options) {
      // load texture to blend.
      var gl = options.context,
          texture = this.createTexture(options.filterBackend, this.mask);
      this.bindAdditionalTexture(gl, texture, gl.TEXTURE1);
      this.callSuper('applyToWebGL', options);
      this.unbindAdditionalTexture(gl, gl.TEXTURE1);
    },  
  getUniformLocations: function(gl, program) {
      return {
        uMask: gl.getUniformLocation(program, 'uMask')
      };
    },
  createTexture: function(backend, image) {
      return backend.getCachedTexture(image.cacheKey, image._element);
    },    
  sendUniformData: function(gl, uniformLocations) {
      //gl.uniform1i(uniformLocations.uMask, this.mask);
      gl.uniform1i(uniformLocations.uMask, 1);
    }
});

fabric.Image.filters.Mask.fromObject = fabric.Image.filters.BaseFilter.fromObject;


var imgMask =...