Jump to content

Problem with hue color shift


Recommended Posts

I am working on a project within PIXI that requires me to shift the hue of a saturated rainbow gradient in a loop so it looks like its moving. I figured this would be cut and dry, since changing the hue of said image in Photoshop make it appear as if its moving.

When starting out and getting the filter in place and animating, I was perplexed by the results. The colors looked nothing like I expected nor could have predicted. You can see a little demo of what I'm talking about and seeing on codepen here.

I started digging to see what could be the problem, trying different image formats and color depths to no avail.

I gave a shot at another canvas solution, GLFX, and can get the proper results I expected, as also seen on codepen here.


My question to you guys is whats going on here? I am suspecting either an error in PIXI or my understanding of how hue rotation should work. I tried a few different PIXI revisions and didn't spot a difference. I dug a little further and came across an article explaining the difference between HSL and CSS hue rotations and its inaccuracies here. Though, that doesn't help me fix the issue with PIXI. Anyway to fix this on my end while staying within PIXI?

Thank you.

Link to comment
Share on other sites

Yes! I think this is plain wrong. You should definitely create an issue on github for this http://github.com/pixijs/pixi.js

This is the currently wrong version in pixi:

This is the sane version from glfx:

On the first sight they are both doing the same, which is rotating an imaginary rgb cube. But the lum* weights in the expanded rotation matrix look wrong.

Here is a nice answer on hue rotation.


Link to comment
Share on other sites

  • 2 weeks later...

Hello again, here we go. 

First of all the demo: 

Test Cases:

  1.  `old` is the current wrong version
  2. `better` is a fixed matrix
  3. "new shader" is the shader from the glfx integrated as a new filter for comparison and as our reference.

Number 2 looks pretty good in comparison to 3.

You can see the error in the current implementation pretty well when you exaggerate the saturation.  To do so activate the checkbox 'overdrive'. It looks like the image attached.


Here is my current branch for the changes:
Here the adjusted matrix:


And the new saturation filter and shader:

I see no better quality and no other advantages in using a separate hue saturation filter so I would prepare a PR for the updated matrix (Nr. 2)



Link to comment
Share on other sites


I have no clue, I mean it's a single commit on a single file which haven't been changed for weeks plus I based it on the most recent state of the dev branch. But this can be merged manually with little effort. So it's fine for the maintainers I guess.


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...