Fabricjs HueRotation filter with glsl

by codingdude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.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">


<br/>
Rotation:
<input type="range" min="0" max="2" step="0.01" id="rotation"/>

JavaScript

fabric.textureSize = 4096;//for filters on large images
var hueRotationFilter = new fabric.Image.filters.HueRotation({rotation:0.5});
var brightnessFilter = new fabric.Image.filters.Brightness({brightness:0.5});
var saturationFilter = new fabric.Image.filters.Saturation({saturation:0.5});


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);
var resizeImage = function(sourceImg, width){
		var resize_canvas = document.createElement("canvas");
    resize_canvas.width = width;
    resize_canvas.height = sourceImg.height * width / sourceImg.width;
    resize_canvas.getContext('2d').drawImage(sourceImg, 0, 0, resize_canvas.width, resize_canvas.height);   
    return resize_canvas.toDataURL("image/png");  
};

var resizedImage = new Image();
resizedImage.onload = function(){
	imgInstance = new fabric.Image(resizedImage, {
    left: 100,
    top: 50,
    angle: 0,
    opacity: 1,
    scaleX:1,
    scaleY:1
  });
  
  canvas.add(imgInstance);
  
  imgInstance.filters.push(hueRotationFilter);
  imgInstance.filters.push(brightnessFilter);
  imgInstance.filters.push(saturationFilter);

  imgInstance.applyFilters();
}

resizedImage.src = resizeImage(imgElement,300,100);




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

  type: 'HueRotation',
	radius:0.1,
  smoothness:0.5,
  mainParameter:"rotation",
  /**
   * Fragment source for the redify program
   */
  fragmentSource: //window.document.getElementById("thresholdShader").textContent,
  `precision highp float;
uniform sampler2D uTexture;
uniform float uRotation;
uniform float uStepW,uStepH;
varying vec2 vTexCoord;

#define M_PI 3.1415926535897932384626433832795

vec2 rotate(vec2 v, float a) {
	float s = sin(a);
	float c = cos(a);
	mat2 m = mat2(c, -s, s, c);
	return m * v;
}

void...