can't set blendmode with filters..?

[GBear]

Hi.. 

 

there seems like dark blue water,

 

it set with displacement filter on tilingsprite

 

tilingsprite set blendmode with PIXI.BLEND_MODES.SCREEN;

this image is it..

 

and i set filter with displacement and then blendmode is gone...

(ignore clipping water. it's because of masking problem.  that is all clear on other post.
 this result is image'sreusing ^^)

 

it seems blendmode is gone when filters use..

 

could you tell me, what's wrong with me?

thx ..

  var texture = PIXI.Texture.fromImage(properties.properties.wave);                            var texture = PIXI.Texture.fromImage('./data/image/displacement_map.jpg');                            var texture = PIXI.Texture.fromImage('./data/image/00.png');                            //set tiling                            var wave = new PIXI.extras.TilingSprite(texture, poly_rect.width, poly_rect.height);                            wave.blendMode = PIXI.BLEND_MODES.SCREEN;                            wave.added_valueX = parseFloat(properties.properties.x) || 1;                            wave.added_valueY = parseFloat(properties.properties.y) || 1;                            wave.alpha = 1.0;                            this.waves.push(wave);                            //mask                            var masking = new PIXI.Graphics();                            masking.position.set(-poly_range.min.x, -poly_range.min.y);                            masking.beginFill(0xff0000, 1);                            masking.drawShape(polygon);                            this.wave_container = new PIXI.Container();                            //기준 좌표 재설정정                            this.wave_container.position.set(properties.x + poly_range.min.x, properties.y + poly_range.min.y);                            this.wave_container.addChild(wave);                            this.wave_container.addChild(masking);                            this.wave_container.mask = masking;                            this.bgContainer.addChild(this.wave_container);                            if(1){                                if(1){                                    var displacementSprite = PIXI.Sprite.fromImage('./data/image/displacement_map.jpg');                                    var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);                                    displacementSprite.alpha = 0.0;                                    wave.addChild(displacementSprite);                                    displacementFilter.scale.x = 20;                                    displacementFilter.scale.y = 20;                                }                                wave.filters = [displacementFilter];                            }                        }

[xerver]

Likely related: https://github.com/pixijs/pixi.js/issues/1598

[GBear]

Thx.. 

that means not working now?

 

 

[ivan.popelyshev]

Thx.. 

that means not working now?

 

 

Im trying to patch pixi and add special parameter "filterBlendMode" but so far Im stuck, multiply is not working

 

UPD. BlurFilter behaviour doesnt make that easier

[ivan.popelyshev]

Try this one: https://dl.dropboxusercontent.com/u/46636530/pixijs/blendMode/pixi.js

 

Wow, pull request № 2222 ! https://github.com/pixijs/pixi.js/pull/2222

[GBear]

hi i checked this issue..

and i couldn't find different thing..

i could look same situation with 'https://dl.dropboxus...endMode/pixi.js' version.

 

this image use TilingSprite with displacementFilter

 

Thx...

 

[ivan.popelyshev]

Sorry, I forgot to notify you about changes in blendMode. It applies to filter, not to container. Its completely different behaviour.

 

You need to set "filterBlendMode" for container that have that filter.

//wave.blendMode = PIXI.BLEND_MODES.SCREEN;wave.filters = [displacementFilter];wave.filterBlendMode = PIXI.BLEND_MODES.SCREEN;

[GBear]

oh.. i tested again with "filterBlendMode" and then i can looked good image like this

 

it looks good.. 

 

thx..

 

i have one question about displacementFilter..

 

i set like this code 

wave.displacementFilter.scale.x = 50; wave.displacementFilter.scale.y = 50; 

i can look displacement effect.  if change size  to small or big..

 

displacementFilter effect to strong or week..

 

so i change my code like this

wave.displacementFilter.scale.x = 50 * (Def.Camera.Zoom);wave.displacementFilter.scale.y = 50 * (Def.Camera.Zoom);

and then  i can look more great  .. but not same effect

 

i want to look same displacementFilter effect always..

how can i control scale value?
 

thx..

[ivan.popelyshev]

Actually, displacement filter uses two scale components : 

 

1) displacementFilter.scale

 

that's scale of the effect, how far your displacement applies.

 

2) displacementSprite.worldMatrix 

 

that's texture position: when you change your camera scale or position, it automatically changes displacementSprite.worldMatrix (because sprite belongs to your map)  and that's how displacementFilter knows how to apply the displacement. MAKE SURE YOU DONT REMOVE THAT SPRITE FROM WAVE!!! 

 

I had the same problem, and your solution looks correct, BUT I dont know what is Def.Camera.Zoom in your case. How do you calculate your root element scale based on that Def.Camera.Zoom?

 

Are you sure you are changing displacementFilter scale and not displacementSprite scale?

[GBear]

hi.

 

i'm changing displacementFilter scale

 

my displacementSprite is added on  wave.

 

and def.Camera Zoom is value of Map.scale.

 

it control world scale value..

 

 

 

 

[ivan.popelyshev]

Your code looks ok. Can you post a demo?

 

btw, you dont have to set alpha to 0 , displacementFilter makes displacementSprite.renderable=false without your help.

[GBear]

i see.. thx..

i made demo on jspiddle

 

http://jsfiddle.net/gbear/gu1g39fw/

but this looks ok.. ..


so i'll test with on my code again

 

and i'll tell you

thx..

[ivan.popelyshev]

I dont see displacementFilter there, and there is no way to scale. Wrong demo?

[GBear]

ah.. first press 'run' button on left-up
 

and then you can see it.

mouseover has displcementFilter..
mousedown add scale value 

[ivan.popelyshev]

IT doesnt change scale value at all. I dont see it in the code

[GBear]

do you have a plan to update into stable version about filterBlendMode?

[GBear]

and i have one more question..
 

 

when i use filters, they need heavy cost with performance?

[ivan.popelyshev]

I made PR and im waiting for approve. I'll add some other features in filterBlendMode, so you'll be able to use opengl standart blendModes (lighten darken and others)

[ivan.popelyshev]

and i have one more question..

 

 

when i use filters, they need heavy cost with performance?

 

Imagine it as every filter redraws a rectangle it affects. Dont forget to cull (make renderable=false) objects which bounds are offscreen.

[GBear]

you mean when i use filter....

 

making renderable to false is good for performance .. 

becuase redraw affected part 

 

is it right?

[ivan.popelyshev]

Yes, because filter will be applied and calculated even if your object is offscreen. Culling algorithm is not a part of pixi, it depends on the game. You have to check every object getBounds() or whatever variables you have for it (Camera.Zoom and stuff), and calculate whether the object is seen or not. "renderable" field is just for that cause.

 

Notice: dont apply that to "displacementSprite", it must be always not renderable.

[GBear]

I see..

i'll test about this issue with other filters.. 

 

and i'll tell you agine..

 

thx a lot..

[GBear]

hi.. d

 

you said  if i set filters.. i have to make renderable to false to optimize.

 

i'm wondering why make renderable to false  automatically..?

 

is there reason?

 

thx..

[ivan.popelyshev]

Culling is not part of pixi.js. Yet. Imagine how many bugs will be there if we implement it and switch it on by default

For example, things in ParticleContainer cant be culled at all.

However, we can make plugin for it. If you make an algorithm for your game, it can be the part of new "pixi-culling" library

 

Another example - If map is big, only some part of it must appear in the scene, and for exterior I wont even load textures and spine objects (I have about ~2000 of those). Most of that part will be culled so only those objects which intersects with the screen will be rendered.

[GBear]

i'm using own culling

 

when i use filter i can look frame drop when filter set..

 

for example. 

 

   mouseover : set outline filter

   mouseout   : delete outline filter

 

in this case when i set filter with mouseover i can look frame drop about 5-10 frame

 

is this normal?

 

 

second question.!

I understoodd texture is redrawn when filter set! so i  rewrite code like this

if(filters.length === 0) {        this.aniContainer.filters = null;        this.aniContainer.renderable = true;    }    else {        this.aniContainer.filters = filters;        this.aniContainer.renderable = false;    }

and then character was disappeared.... 

 

Am I misunderstanding about 'renderable parameter' with filter?

 

thx^^