FabricJS Minimum/Maximum 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=333.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">

Maximum: <input name="maximum" value="3" type="range" min="0" step="0.1" max="5"><br/>

JavaScript

/*FabricJS Plugin Template*/

fabric.textureSize = 4096;//for filters on large images
/*
  options:
    filterName - name of the filter
    mainParameter - main parameter name
    fragmentSource - code for the fragment shader
    uniforms
    sendUniformData(gl,uniformLocations)
*/
function setupFilter(options){
  fabric.Image.filters[options.filterName] = fabric.util.createClass(fabric.Image.filters.BaseFilter, Object.assign({

    type: options.filterName,

    applyTo2d: function(options) {
      alert("This filter only works on browsers that support webgl");
    },
    getUniformLocations: function(gl, program) {
        return options.uniforms(gl,program);
      },
    createTexture: function(backend, image) {
        return backend.getCachedTexture(image.cacheKey, image._element);
      },    
    sendUniformData: function(gl, uniformLocations) {
        options.sendUniformData(gl, uniformLocations);
    },
    isNeutralState:function(){
    	return false;//this.callSuper('isNeutralState');
    }
  },options));

  fabric.Image.filters[options.filterName].fromObject = fabric.Image.filters.BaseFilter.fromObject;
}

////////////Template end////////////////////



//init filter from template
var options={
    filterName: "MinimumMaximum",
    mainParameter: "maximum",
    uniforms:function(gl,program){
    	return {
      	uMaximum:gl.getUniformLocation(program, 'uMaximum')
        };
    },
    sendUniformData:function(gl,uniformLocations){
    	gl.uniform1f(uniformLocations.uMaximum, this.maximum);
    },
    fragmentSource: `
    precision highp float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    
    const float PI = 3.1415;
    
    uniform float uMaximum;
    uniform float uStepW,uStepH;
    
    vec3 dilation(in int N)
    {
    	
        int i = 0, j=0;
        vec3 maxValue = vec3(0.0);
        vec3 tmp = vec3(0.0);
        float step_w = uStepW;
        float step_h = uStepH;
        
        for (int i=1;i<20;i+=1){
        	for...