cypher

Porting gskinner color matrix to Pixi.js

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.