Jump to content

Displacement filter scale issue.


Recommended Posts


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)



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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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...