pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor: add amount parameter to colorMatrix

Browse Source 
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
This commit is contained in:
Samuel Degueldre
2020-08-19 08:30:41 +00:00
committed by qsm-odoo
parent 2b1764d879
commit 4575c188c4
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/lib/webgl-image-filter/webgl-image-filter.js
+26 -17
View File
@@ -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);
};