ColorMatrixFilter

[Retri]

Would it be possible to make a ColorMatrixFilter (or something else for that matter) to change the hue of colors within a specific part of the spectrum?

 

I'm looking to mimic this (attached image) from photoshop -- here I'm changing the reds and moving them to green. Notice how the other colors are untouched.

The top of the rainbow is affected, the bottom is the source image.

 

[Retri]

I implemented this for now http://stackoverflow.com/questions/23830471/html5-convert-image-color-without-changing-its-transparent-background

 

It's not super elegant. It draws the sprite to another canvas, then changes the colors using getImageData and finally returns the canvas as a texture.

[clement_cvL]

You can use the ColorMatrix.hue() function: 

var rotation = Math.floor(Math.random()*360);var colorMatrixFilter = new PIXI.filters.ColorMatrixFilter();colorMatrixFilter.hue( rotation );

http://www.goodboydigital.com/pixijs/colorMatrix/

[xerver]

I would be suprised if you couldn't get this to work with the built-in ColorMatrixFilter like clement_cvL mentions.

 

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/filters/color/ColorMatrixFilter.js

 

Did you try it out? Did it not work for you?

[Retri]

Hey.

Thanks for the input, but I don't see a way to only affect a specific colored pixel -- I'm not trying to change the hue of the entire image, but only a specific part of the color spectrum. Ie. turn blue (true blue, like hue 220 to 260, not the entire blue spectrum) pixels into red ones. This is a bit like chroma keying. Which I guess this could actually also be used for.

 

And as far as I can tell, you can't get pixel values in webgl, so I had to use canvas.

 

What I have now works, even if it's a bit clunky.

[xerver]

> And as far as I can tell, you can't get pixel values in webgl, so I had to use canvas.

 

You can in a shader, that is what the fragment shader does is determine the color of a pixel. Something like "if (gl_FragColor == colorToReplace) { gl_FragColor = replacementColor; }"