diff --git a/addons/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js b/addons/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js index 682bf76742f..40ffe4dd769 100644 --- a/addons/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js +++ b/addons/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js @@ -60,6 +60,14 @@ var WebGLProgram = function( gl, vertexSource, fragmentSource ) { } }; +const identityMatrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0, +]; + +const weightedAvg = (a, b, w) => a * w + b * (1 - w); var WebGLImageFilter = window.WebGLImageFilter = function (params) { if (!params) @@ -287,7 +295,8 @@ var WebGLImageFilter = window.WebGLImageFilter = function (params) { // ------------------------------------------------------------------------- // Color Matrix Filter - _filter.colorMatrix = function( matrix ) { + _filter.colorMatrix = function( matrix , amount = 1 ) { + matrix = matrix.map((coef, index) => weightedAvg(coef, identityMatrix[index], amount)); // Create a Float32 Array and normalize the offset component to 0-1 var m = new Float32Array(matrix); m[4] /= 255; @@ -392,76 +401,76 @@ var WebGLImageFilter = window.WebGLImageFilter = function (params) { ]); }; - _filter.desaturateLuminance = function() { + _filter.desaturateLuminance = function( amount ) { _filter.colorMatrix([ 0.2764723, 0.9297080, 0.0938197, 0, -37.1, 0.2764723, 0.9297080, 0.0938197, 0, -37.1, 0.2764723, 0.9297080, 0.0938197, 0, -37.1, 0, 0, 0, 1, 0 - ]); + ], amount); }; - _filter.sepia = function() { + _filter.sepia = function( amount ) { _filter.colorMatrix([ 0.393, 0.7689999, 0.18899999, 0, 0, 0.349, 0.6859999, 0.16799999, 0, 0, 0.272, 0.5339999, 0.13099999, 0, 0, 0,0,0,1,0 - ]); + ], amount); }; - _filter.brownie = function() { + _filter.brownie = function( amount ) { _filter.colorMatrix([ 0.5997023498159715,0.34553243048391263,-0.2708298674538042,0,47.43192855600873, -0.037703249837783157,0.8609577587992641,0.15059552388459913,0,-36.96841498319127, 0.24113635128153335,-0.07441037908422492,0.44972182064877153,0,-7.562075277591283, 0,0,0,1,0 - ]); + ], amount); }; - _filter.vintagePinhole = function() { + _filter.vintagePinhole = function( amount ) { _filter.colorMatrix([ 0.6279345635605994,0.3202183420819367,-0.03965408211312453,0,9.651285835294123, 0.02578397704808868,0.6441188644374771,0.03259127616149294,0,7.462829176470591, 0.0466055556782719,-0.0851232987247891,0.5241648018700465,0,5.159190588235296, 0,0,0,1,0 - ]); + ], amount); }; - _filter.kodachrome = function() { + _filter.kodachrome = function( amount ) { _filter.colorMatrix([ 1.1285582396593525,-0.3967382283601348,-0.03992559172921793,0,63.72958762196502, -0.16404339962244616,1.0835251566291304,-0.05498805115633132,0,24.732407896706203, -0.16786010706155763,-0.5603416277695248,1.6014850761964943,0,35.62982807460946, 0,0,0,1,0 - ]); + ], amount); }; - _filter.technicolor = function() { + _filter.technicolor = function( amount ) { _filter.colorMatrix([ 1.9125277891456083,-0.8545344976951645,-0.09155508482755585,0,11.793603434377337, -0.3087833385928097,1.7658908555458428,-0.10601743074722245,0,-70.35205161461398, -0.231103377548616,-0.7501899197440212,1.847597816108189,0,30.950940869491138, 0,0,0,1,0 - ]); + ], amount); }; - _filter.polaroid = function() { + _filter.polaroid = function( amount ) { _filter.colorMatrix([ 1.438,-0.062,-0.062,0,0, -0.122,1.378,-0.122,0,0, -0.016,-0.016,1.483,0,0, 0,0,0,1,0 - ]); + ], amount); }; - _filter.shiftToBGR = function() { + _filter.shiftToBGR = function(amount) { _filter.colorMatrix([ 0,0,1,0,0, 0,1,0,0,0, 1,0,0,0,0, 0,0,0,1,0 - ]); + ], amount); };