Sprite Whitening

[pongstylin]

In pixi.js, we have a ColorMatrixFilter that allows us to manipulate the colors using a 4x4 matrix.  But what I'm trying to do is to increase the overall "white" of a sprite.  Normally, you might say to increase the "bright".  The following illustrations doubles each of RGB.  The caveat is that black (zero) will not get brighter.

 

filter.matrix =

[

  2,0,0,0

  0,2,0,0

  0,0,2,0

  0,0,0,1

];

 

On the other hand, if it were possible to use a 4x5 matrix (like flash ColorMatrixFilter), we can use offsets to achieve true "whitening".  The following illustration uses flash's approach where the 5th column uses non-normalized values to increase each of RGB by 128 (or 0.5 when normalized).

 

filter.matrix =

[

  1,0,0,0,128

  0,1,0,0,128

  0,0,1,0,128

  0,0,0,1,0

];

 

Visually, brightening and whitening can look very different, and I want the latter in my case.  As far as I can tell, WebGL does not support 4x5 matrices (please tell me I'm wrong).  So, how can I achieve it efficiently in Pixi or WebGL?

[pongstylin]

I'm impatient and I figured out a new way to google for the information.  And I found some amazing code:

https://github.com/phoboslab/WebGLImageFilter/blob/master/webgl-image-filter.js

 

If you look on line 282, you can see a "colorMatrix" implementation identical to flash ColorMatrixFilter.

If you look on lines 301 and 315, you can see C code that implements the pixel color calculations based on the matrix.  Apparently, this C code is compiled with WebGL and is very fast.

If you look on lines 330, 340, 351, 355, 367, 371, 387, and on and on and on... you can see how the matrix can be used to produce many different effects.  This is crazy educational.

 

So it appears that this IS supported by WebGL in a roll-your-own kind of way.  I'm seriously excited.  So my last question is, does pixi.js already support this in part or whole?  Cause I'm thinking about opening an issue ticket... and since I'm impatient, possibly hacking this in myself while I wait for them to get it implemented in a well designed manner.

[JDW]

Hello,

 

What you are calling "C code" is an openGL shader. You need at least one to be able to display something with OpenGL/WebGL.

 

I do not think (Im unsure) that PIXI offer a way to directly manipulate its own shaders, but you can create yours and extend a bit your PIXI library for your needs.

[pongstylin]

Thanks!  You've opened my eyes.  Now I know what a shader is.  And with a little research these vertex and fragment shaders make a bit more sense in the pixi code.  So it seems like what I want to do is modify the ColorMatrixFilter class to automatically select the appropriate fragment shader based on the length of the matrix assigned.  Still trying to figure out what's going on here in the pixi code (they seem to have a fairly magical shader that supports any of 2x2, 3x3, or 4x4 matrices).  But I think I'm armed with enough information to be dangerous.  Any tips are welcome, though.

[msha]

"The following illustration uses flash's approach where the 5th column uses non-normalized values to increase each of RGB by 128 (or 0.5 when normalized)."

 

Try using the alpha value as an offset. 

 

like this:

 

[

    1,0,0,0.5,

    0,1,0,0.5,

    0,0,1,0.5,

    0,0,0,1

  ]

 

It may introduce some artifacts at semi-transparent pixels though.

[xerver]

Here is a comment where I try to explain how the color matrix works, and how to use it:

 

https://github.com/GoodBoyDigital/pixi.js/issues/1235#issuecomment-65159715

 

Hopefully that will help you out a bit.

[pongstylin]

Fortunately, I already knew how to use it. But, msha pointed out an interesting fact. Usually, the alpha column can be used as an offset, since the pixel is usually fully opaque (1) or fully transparent (and irrelevant). So, unlike brightening, it can be used for whitening. Only semi-transparent pixels will (albeit uniformly) not whiten as much as they should. But it's close. Very close. I love the cleverness. Maybe this is why the 5th column was skipped in PIXI's implementation (the current ColorMatrixFilter shader should be faster than mine).