Displacement filter scale issue.

[TheAlmightyOne]

Hi,

I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter,

but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces
entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping

for either a fix or a reasonable explanation if anyone can help me with this please.

 

Everything in my code follows DisplacementMap example on pixijs.com (one with the grass and magnifying glass).

What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server.

 

const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes']));
const displacementSprite = new PIXI.Sprite(
      new PIXI.Texture(PIXI.utils.TextureCache['player.normal'])
);
let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);

playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs);
playerSprite.scale.set(globalScale, globalScale)
this.scene.addChild(playerSprite);

			

this.scene.addChild(displacementSprite);

displacementFilter.scale.x = 20;
displacementFilter.scale.y = 20;
displacementFilter.enabled = true;

displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs);
displacementSprite.scale.set(globalScale, globalScale)
		

return {
	scene: this.scene,
	filter: displacementFilter
};

the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers.

Should i perhaps look into filterArea?

Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.

[ivan.popelyshev]

This article might help you: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

There are many problems about filters that we cant fix automagically. However, if you make a fiddle with that problem, or put a minimal demo in zip file, we can help you

[TheAlmightyOne]

Thanks for your answer. Ok I have a hack/fix figured out. What I did was just set filterautoFit = false AND I moved every layer affected by that filter by half of the scale.

Which right now looks like this:

for(let container in this.scene) {
	const s = this.scene[container];
	let filterScaleX = 0;
	let filterScaleY = 0;

	if (s.filters && s.filters[0] && s.filters[0].scale) {
		filterScaleX = s.filters[0].scale.x / 2;
		filterScaleY = s.filters[0].scale.y / 2;
	}

	s.x = ((this.origin.x - (player.x + player.ax) + playerOffset.x) * fs) - filterScaleX;
	s.y = ((this.origin.y - (player.y + player.ay) + playerOffset.y) * fs) - filterScaleY;
}

In retrospect the autoFit property fixed the 'overflow' effect and moving layers fixed the obvious problem where they were in a wrong position (which was visible on the tree tops).

 

Thanks for your input man, it did indirectly lead me to a solution.

[ivan.popelyshev]

And now it can affect performance, seriously. I recommend to set the filterArea manually. If you want it on whole screen:

container.filterArea = renderer.screen;
//or this
container.filterArea = app.screen;

There's even better solution that I know of but didnt implement it. Render displacements into separate renderTexture without any blendmodes, then pass it to sprite of displacement filter. I saw how one of Rpgmaker MV fans did it.

"pixi-layers" might help you to find elements that belong to that other layer: https://github.com/pixijs/pixi-display/tree/layers . There's demo with simple  lights, but it can be made for displacements too, I'll make that experiment later.

[TheAlmightyOne]

I will take that into consideration. For now, there is no way I can benchmark the impact of this implementation but, should the optimization time come, this is the first thing I'll be looking into.