FabricJS Filter Exposure

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://i.imgur.com/IzBRPq3.jpg" id="my-image" crossorigin="anonymous">

<label for="exposure">Exposure <input type="range" id="exposure" min="-5" max="5" step="any"></label><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: "Exposure",
    mainParameter: "uAmount",
    uniforms:function(gl,program){
      return {uAmount:gl.getUniformLocation(program, 'uAmount') };
    },
    sendUniformData:function(gl,uniformLocations){
      gl.uniform1f(uniformLocations.uAmount, this.uAmount);
    },
    fragmentSource: `
    precision highp float;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform float uAmount;
const float epsilon = 0.000001;
const float mx = 1.0 - epsilon;
const float PI = 3.1415926535897932384626433832795;
const mat3 matRGBtoROMM = mat3(0.5293459296226501, 0.3300727903842926, 0.14058130979537964, 0.09837432950735092, 0.8734610080718994, 0.028164653107523918, 0.01688321679830551, 0.11767247319221497, 0.8654443025588989);
const mat3 matROMMtoRGB =...