Pixi.js: [v3] Displacement Filter throwing error

[SharpleafCC]

This may be due to a change in how I'm supposed to use filters, but just in case it's not, here's a report on what I'm experiencing.

Here's the code:

 var displacementTexture = PIXI.Texture.fromImage("../images/ui/displacement_map.jpg");
 displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
 displacementFilter.scale.x = 10;
 displacementFilter.scale.y = 10; 
 waterCreature.filters = [displacementFilter];

Where waterCreateure is a PIXI.Sprite.fromImage.
When the line waterCreature.filters = [displacementFilter]; is run, I get the following error.

Uncaught TypeError: Cannot read property 'copy' of undefinedFilterManager.js:288

In V2 this works as expected without errors.

[englercj]

Do you have a running example, like on jsfiddle that we can debug?

[SharpleafCC]

Unfortunately, I'm terribly unfamiliar with fiddlejs to even know how to translate the problem into a fiddle (like how to even include the V3 of pixi.js in the first place :/ )
However, I can point you to a hosted page. It's not editable code, but it's the best I can do at the moment.
http://monsterisland.chimeracompanygames.com/secure/landing/PIXITestForForums

it's very stripped down, so only the example and it's resulting problem are present in the code.

[GoodBoyDigital]

Hello! v3 uses a sprite instead of a Texture for the displacement map.

 var displacementSprite = PIXI.Sprite.fromImage("../images/ui/displacement_map.jpg");
// make sure to add this to the stage too.

 displacementFilter = new PIXI.DisplacementFilter(displacementSprite);
 waterCreature.filters = [displacementFilter];

[SharpleafCC]

Thanks! That was the issue.
However, it seems that filters and blendmodes still don't play well with each other. If a sprite has both a blend mode and a filter, it doesn't render.
In my above example, I have changed the filter from being on waterCreature to being on ripple.
ripple has a blend mode of 2 (Overlay I believe). and is has the displacement map.
Either one by itself works fine, but both together causes ripple to not render.

[SharpleafCC]

I have more information about blend modes and filters. I'm not sure if I should start a new issue as the original scope of this issue has been solved, but here it is:

I can get blend modes and the displacement filters to work together on the same sprite like this:

ripple = new PIXI.TilingSprite(PIXI.Texture.fromImage('../images/ui/waterripple.jpg'), window.innerWidth, window.innerHeight);
ripple.blendMode = 3;
container.addChild(ripple);
//ripple.alpha = .3;
displacementTexture = new PIXI.Sprite.fromImage("../images/ui/displacement_map.jpg");
stage.addChild(displacementTexture);
displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
displacementFilter.scale.x = 10;
displacementFilter.scale.y = 10;
ripple.filters = [displacementFilter];

If I uncomment //ripple.alpha = .3, then nothing renders.

Also, If I set the blendMode to ripple.blendMode = 2; (which is the blend mode I actually want), then nothing renders when a filter is also applied, regardless of the .alpha being set of not.

[GoodBoyDigital]

thanks for sharing @SharpleafCC :+1: I will make sure to take a look!

[GoodBoyDigital]

Hi there! The above should work now. There is an issue that exists with the fact that its a bit tricky to get a filter and a blend mode to work well on the same element.

This is due to the fact that filters require that content be rendered on another framebuffer so they do not have access to the pixel data to perform blending correctly. Will need to have a think about the best way of achieving this..

[SharpleafCC]

Hi @GoodBoyDigital
I still can't get it to work even though you said it was fixed.
I just installed v3.0.0-rc3 and gave it another go. All of the above examples still hold true.

[GoodBoyDigital]

thanks for letting me know. As the issue now around multiply and filters I will close this issue in favour of this guy #1598. Thanks @SharpleafCC :+1:

[dada78]

Hi, I am completely new to Pixi.js and wanted to play around with the displacement filter using images as a background and overlaying it with a texture for the displacement filter.

I found this: https://codepen.io/dada78/pen/c10dae3fc3c0449f77529a648512f662

But once I forked it: https://codepen.io/dada78/pen/a1a7cfeecfaed3199a62bb81ae364d37 the effect no longer works. I followed your instructions and switched out "Texture" for "Sprite", but unfortunately it is still not working. Am I missing something here?
Thanks so much!

[staff0rd]

@dada78 the api has changed quite a bit since v1. Here's my attempt at updating your code to latest; https://codepen.io/staff0rd/pen/LxZJVv?editors=0010

Note that the edges showing is a bug I think, for which I've raised #3582.

[dada78]

Thanks so much staff0rd! One other question: I would like to physically add the canvas element to the DOM or stage so it's easier for me to layer the divs on top or below where bg is being drawn. How would this be accomplished? Thanks so much for your help!

[staff0rd]

@dada78 checkout options.view here; http://pixijs.download/dev/docs/PIXI.Application.html

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.