Applying displacement filter on Pixi.text element shifts the text outside bounding box and crops it

[khandev]

const app = new PIXI.Application({
    resizeTo: window
});

document.body.appendChild(app.view);

let text = new PIXI.Text('SwiftLearn IT Solutions',{
    fontFamily : 'Arial',
    fontSize: 40,
    fontWeight: 800,
    fill : 0xffffff,
    align : 'center'
});
text.anchor.set(0.5);

let container = new PIXI.Container();
container.pivot.set(-window.innerWidth/2, -window.innerHeight/2);

let dispImg = new PIXI.Sprite.from('disp.png');
let disp = new PIXI.filters.DisplacementFilter(dispImg);

dispImg.anchor.set(0.5);

app.stage.interactive = true;
container.interactive = true;

app.stage.addChild(dispImg);
app.stage.addChild(container);
container.addChild(text);

text.filters = [disp];

The text gets shifted to the bottom right a tad which makes it overflow its bounding box. Can be seen from the attached image. What am I doing wrong?

 

Edited September 10, 2022 by khandev

[ivan.popelyshev]

add padding to displacement filter

also, that doesnt look like displacement texture )

[khandev]

11 hours ago, ivan.popelyshev said:

add padding to displacement filter

also, that doesnt look like displacement texture )

Thank you very much, Ivan. Padding worked perfectly.

I am just curious about why you said it doesn't look like a displacement texture? I was using it to distort the text by attaching its position with the mouse coords.

Another observation:
The displacement texture is a simple 200x200 black bg with a white blurred circle in between (attached in my original post). But even when the mouse cursor is very far at the top, there is still some displacement applied to the text. Image attached. How to make it so that the displacement occurs only then the 200x200 disp.jpg displacement texture is over the text as it is mapped to the cursor coordinates? As you yourself doubted the displacement texture, could you please share some good practices about how a displacement texture in PIXI.js should actually be?

Thanks,

Regards

Edited September 10, 2022 by khandev
Additional info

[mesedi]

add padding to displacement filter

also, that doesnt look like displacement texture

[ivan.popelyshev]

color 0x808080 = no displacement. Well, a little. its not 0.5 and our shader is amateur, need to switch `map-=0.5` to 128/255  to make it correct.

Anyway, gray color is the default, not black.