Porting gskinner color matrix to Pixi.js

[cypher]

Hi everyone, I'm trying to port an avatar editor made with AS3. The original app makes use of the gskinner Color Matrix class for adjusting brightness, contrast, saturation and hue of each part and stores those values in a DB. So imo I have two options here:

1. Port the class to js and try to use the stored values as they are.

2. Find an algorithm to transform those values to use them with PixiJS Color Matrix Filter directly.

As I'm not very good at maths I've tried the 1st option so I ported the class to JS and tried to use it as the matrix for the color matrix filter. Saturation and hue seem ok but I cannot make brightness and contrast adjustments to look similar in as3 and pixi. I've been digging a bit and I've found that in the gskinner class, brightness and contrast are tweaked through the offset column while the color matrix filter in Pixi aren't. I've noticed as well the use of 'colorMatrix.frag' which is a WebGL shader impl but I don't know anything about them so I'm stuck. Do I need to implement a new custom matrix color filter or even a custom colorMatrix.frag (although I don't know anything about shaders as I said)? Any clues on option 2? Is there any other option I haven't take into account may be?

Any help or directions would be very much appreciated. Thanks so much!

 

You can see the ported matrix color code here (and I've attached the as3 code just in case):

https://www.pixiplayground.com/#/edit/DIPYaphRukZ6rBqIRupVv

as3-color-matrix-example.zip

[ivan.popelyshev]

PixiJS ColorMatrixFilter is the same as in flash. I have set of tests that run same code in AS3 on AIR and generates images, and translated in pixi, and I achieved almost-perfect look for all Flash filters, and ColorMatrixFilter was the easiest.

However those tests checked only things with same matrices that were loaded from SWF files. I didnt check methods like "adjustSaturation"

Here they are: https://github.com/pixijs/pixi.js/blob/dev/packages/filters/filter-color-matrix/src/ColorMatrixFilter.js#L127

 

[ivan.popelyshev]

Can you give me the case with offset column  that is different in AS3 in pixi please? I'll add it to my set.

Maybe there's something about premultiply alpha magic.

[cypher]

Thank you for the lighting fast response. I think I wasn't normalizing the values properly. If I use the ported class to generate the matrix and I do

matrix[4] /= 255;
matrix[9] /= 255;
matrix[14] /= 255;
matrix[19] /= 255;

it yields the almost exact same results.  E.g. 

Flash

[ 0.6427246333893186 , -0.36302809886595877 , 0.14030346547664027 , 0 , 43.129999999999995 , -0.09345282791671743 , 0.5974019887504155 , -0.08394916083369791 , 0 , 43.129999999999995 , -0.26566995629707624 , -0.09822111651766524 , 0.7838910728147416 , 0 , 43.129999999999995 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 0 , 1 ]

JS

[ 0.6427246333893186 , -0.36302809886595877 , 0.14030346547664027 , 0 , 0.16913725490196077 , -0.09345282791671743 , 0.5974019887504155 , -0.08394916083369791 , 0 , 0.16913725490196077 , -0.26566995629707624 , -0.09822111651766524 , 0.7838910728147416 , 0 , 0.16913725490196077 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 0 , 1 ] 

 

Next week I'll test it with real data at the office (I'm at home right now) but It seems promising.

[ivan.popelyshev]

Confirmed, I have that /255.0 part , because flash works with 0-255 and pixi works with normalized values. Sorry I forgot about that small detail

[cypher]

No problem, my mistake.. everything is working now. Thanks for your time and effort Ivan!