[IMP] web_editor: add amount parameter to colorMatrix

When compositing filters, it is often the case that you only want to
partially apply a filter. This commit adds an optional "amount"
parameter to the colorMatrix filter, and computes a weighted average
between the identity matrix and the passed in colorMatrix. This
parameter defaults to 1, meaning the effect is applied in full if no
amount is specified.

This is a change in the webgl-image-filter library, currently awaiting
merge into upstream at https://github.com/phoboslab/WebGLImageFilter/pull/25

Part of https://github.com/odoo/odoo/pull/53114
task-2279190

1 files changed, 26 insertions, 17 deletions

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);
 	};