how to use color matrix (pixi filter) in phaser

[ForgeableSum]

I'm trying to use this filter in phaser:

http://pixijs.download/release/docs/PIXI.filters.ColorMatrixFilter.html

I understand that I need the filter code from the phaser repo (found in filters/pixi/ColorMatrix) but I don't quite understand how to implement it in a game. 

Suppose I want to add the filter in my game, give a sprite the filter and then call one of the methods on the filter, like brightness or hue... I don't see those methods on the object constructor in the phaser version:

https://github.com/photonstorm/phaser/blob/master/v2/filters/pixi/ColorMatrixFilter.js

I'm very confused. Any help would be appreciated! 

 

 

 

 

[ForgeableSum]

Okay i think i understand how to add the filter from this example:

http://phaser.io/examples/v2/filters/pixi-filter

The problem is that I don't have access to all of the same methods in pixi. The phaser code only has get/set matrix. But none of the brightness, hue, blackAndWhite, etc. filter methods available in Pixi:

http://pixijs.download/release/docs/PIXI.filters.ColorMatrixFilter.html

Is it because those methods weren't ported over to the phaser version? Why?

Is there any way I can access those methods in Phaser?

[ForgeableSum]

bump. Anyone have any ideas for applying a hue rotation on a sprite via a filter? 

I know there is a hue rotation filter in the phaser repo. Unfortunately, it doesn't suite my purposes as it automatically changes the hue over time. I need to be able to change the hue on demand on a sprite by sprite basis. Or perhaps create several variations of the same filter with different hues. 

[ForgeableSum]

bump

[samid737]

Here is an example of something you could use:

The source code is from here , its probably the one you are referring to:

https://searchcode.com/codesearch/view/89062497/

basically I "hacked" my way into the fragment shader by eliminating the time dependency of the cosine and sine functions that are used to "rotate" the hue. I replaced them by a parameter/constant angle (in degrees) that you can pass to hueRotate.init. The angle you provide determines the new color, so you could for example define some angles/colors you like and update things when necessary? (I want blue --> pass 30 degrees , red --> 180 degrees etc.for .). The sprite was originally blue by the way (at 0 degrees).

You also have to assign the right sprite properties in the init function, but you can probably organize the structure of the code better to make it fit for use in your own game?

I am not sure what performance implications are when adding you own custom filter within Phaser. Here I added 1 additional uniform float and even removed the dynamic coloring within the fragment shader....  My reasoning is also that this way you don't have to let the CPU do any matrix computations via the colorMatrices you mentioned, just let the fragment shader (probably the GPU then??) do the calculation by multiplying matrices by the two constants (the sin and cos), so I would say that it should be less expensive than the original shader.

 

[ForgeableSum]

Quote

 "hacked" my way into the fragment shader by eliminating the time dependency of the cosine and sine functions and replaced them by a parameter/constant angle (in degrees) that you can pass via hueRotate.init.

That was my first inclination but I didn't know enough about fragment shaders to figure it out. Looks like you did though. 

This works perfectly!

The only thing I am afraid is that adding a custom filter for each sprite would have big performance implications... I'm thinking I will just create 1 filter (with a hue shift) and make it the size of the largest sprite. No harm in giving smaller sprites a filter that is much bigger than they are, right? It might be more performant than creating a new filter for each different size. 

[ForgeableSum]

When I add the filter to a sprite, it disappears. I think it has something to do with the fact that the sprite texture is a texture atlas so the sprite is only using a small portion of that texture (its frame). 

[samid737]

 

5 minutes ago, feudalwars said:

That was my first inclination but I didn't know enough about fragment shaders to figure it out. Looks like you did though. 

This works perfectly!

The only thing I am afraid is that adding a custom filter for each sprite would have big performance implications... I'm thinking I will just create 1 filter (with a hue shift) and make it the size of the largest sprite. No harm in giving smaller sprites a filter that is much bigger than they are, right? It might be more performant than creating a new filter for each different size. 

It could be Im not sure about what happens internally when you add a filter in Phaser. But if you stick to one sprite that would be ideal and you can always test it if you do use it for multiple sprites that is the good part. Its like when you add a sprite to the world it probably has a default filter applied to it, so you are doing the same thing, just with another filter I would say?

[ForgeableSum]

On 4/15/2017 at 5:53 PM, samid737 said:

 

It could be Im not sure about what happens internally when you add a filter in Phaser. But if you stick to one sprite that would be ideal and you can always test it if you do use it for multiple sprites that is the good part. Its like when you add a sprite to the world it probably has a default filter applied to it, so you are doing the same thing, just with another filter I would say?

Hmm, whenever I apply the filter, the sprite becomes invisible. Any idea what might be causing that? The only thing different from your example is the fact that my sprites are loaded from a texture atlas... my sprites also have animations so are set to a particular frame (portion of the texture) at any given time. 

[ForgeableSum]

If I set "frag" to a global variable instead of re-declaring it each time i create a new sprite, i get slightly different results. the units are still invisible but when my game code tried to draw them to a render texture, I get a webgl error:

INVALID_OPERATION: uniform2f: location not for current program

The callstack for that begins when Phaser attempts to render the sprite (with the filter) to a render texture. 

[ForgeableSum]

I take that back, it has nothing to do with rendering to a render texture. It's PIXI.WebGLRenderer.renderDisplayObject that is causing the error: 

256phaser-2.6.2.js:16593 WebGL: INVALID_OPERATION: uniform2f: location not for current program
PIXI.PixiShader.syncUniforms @ phaser-2.6.2.js:16593
PIXI.WebGLFilterManager.applyFilterPass @ phaser-2.6.2.js:19745
PIXI.WebGLFilterManager.popFilter @ phaser-2.6.2.js:19690
PIXI.Sprite._renderWebGL @ phaser-2.6.2.js:15604
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.WebGLRenderer.renderDisplayObject @ phaser-2.6.2.js:17500
PIXI.WebGLRenderer.render @ phaser-2.6.2.js:17466
updateRender @ phaser-2.6.2.js:36387
update @ phaser-2.6.2.js:36308
updateRAF @ phaser-2.6.2.js:61979
_onLoop @ phaser-2.6.2.js:61962
phaser-2.6.2.js:16593 WebGL: too many errors, no more errors will be reported to the console for this context.
PIXI.PixiShader.syncUniforms @ phaser-2.6.2.js:16593
PIXI.WebGLFilterManager.applyFilterPass @ phaser-2.6.2.js:19745
PIXI.WebGLFilterManager.popFilter @ phaser-2.6.2.js:19690
PIXI.Sprite._renderWebGL @ phaser-2.6.2.js:15604
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.DisplayObjectContainer._renderWebGL @ phaser-2.6.2.js:15104
PIXI.WebGLRenderer.renderDisplayObject @ phaser-2.6.2.js:17500
PIXI.WebGLRenderer.render @ phaser-2.6.2.js:17466
updateRender @ phaser-2.6.2.js:36387
update @ phaser-2.6.2.js:36308
updateRAF @ phaser-2.6.2.js:61979
_onLoop @ phaser-2.6.2.js:61962

P.S. I did try your example on Phaser 2.6.2 and it worked so the phaser version isn't the problem. 

[ForgeableSum]

P.S. It has nothing to do with the fact i am using a texture atlas instead of a standard image as I just tested and am getting the same problems with the standard image. i can't figure out for the life of me what might be different from your example and my implementation!