Centering and displacement issues

[khandev]

I have a developed a simple Pixi scene where there are 4 Sprites vertically placed. All of them have a displacement map assigned. To begin the sketch, I have set the displacement filter to have a scale 0 so the Sprite doesn't appear distorted by default. But when the parent container is rotated, the Sprite gets minor displacement/cropping applied. How do I remove the displacement at default?

I have attached the screenshot and encircled the croppy parts.

And this is the code:

let width = window.innerWidth;
let height = window.innerHeight;

const app = new PIXI.Application({
    width: width,
    height: height,
    transparent: false,
    antialias: true
});

app.renderer.backgroundColor = 0x404040;

// making the canvas responsive
window.onresize = () => {
    let width = window.innerWidth;
    let height = window.innerHeight;
    app.renderer.resize(width, height);
}

app.renderer.view.style.position = 'absolute';
document.body.appendChild(app.view);

let pContainer= new PIXI.Container();
pContainer.pivot.set(-width/2, -350);
pContainer.rotation = -0.3; // This rotation shows the croppy Sprites

app.stage.addChild(pContainer);

for (let i = 0; i < 4; i++) {

    let container = new PIXI.Container();
    container.pivot.y = -i * 210;    
    
    let image = new PIXI.Sprite.from('image.jpg');
    image.width = 100;
    image.height = 200;
    image.anchor.set(0.5, 0.5);    

    let dispImage = new PIXI.Sprite.from('disp.jpg');
    let dispFilter = new PIXI.filters.DisplacementFilter(dispImage);
    dispImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
    container.filters = [dispFilter];     

    // Turn disp scale to zero so it doesnt show distorted image by default
    dispImage.scale.set(0);

    container.addChild(image);
    container.addChild(dispImage);
    
    pContainer.addChild(container);
}

Thank you.

[khandev]

@ivan.popelyshev could you please take a look?

[ivan.popelyshev]

Are you sure its webgl 2 ? otherwise wrapmode REPEAT wont work properly for 200 x 100, needs pow2 texture.

Otherwise, i need full demo

[khandev]

Just now, ivan.popelyshev said:

Are you sure its webgl 2 ? otherwise wrapmode REPEAT wont work properly for 200 x 100, needs pow2 texture.

Otherwise, i need full demo

Thank you very much for the quick response, Ivan. No wonder Yuri Artiukh too praised your PIXI skills on his youtube channel.

Well I do not know how do you check for webgl2 or what pow2 texture is so please excuse my inability. I come from p5.js background and looking to use PIXI effects for creating websites. I'll have a codepen ready for you and will get back with its link. Thanks again.

[rojldee89]

Hey, does anybody know why the ocean displacement looks different in the viewport as to the one in rendered view? It seems like the waves are much larger - Is there some tweaking I need to do within the material network for the oceansurface shader > displacement maybe?

 

[rojldee89]

On 8/31/2022 at 11:37 AM, rojldee89 said:

Hey, does anybody know why the ocean displacement looks different in the viewport as to the one in rendered view? It seems like the waves are much larger - Is there some tweaking I need to do within the material network for the oceansurface shader > displacement maybe?

 

https://www.routerlogin.net/

pikashow

Edited January 6, 2023 by rojldee89

[RobertGates]

To remove the displacement effect on your Sprites by default, you can set the scale property of the displacementFilter to zero. Here's an example code snippet:

// create the displacement filter
const displacementFilter = new PIXI.filters.DisplacementFilter();

// set the scale of the displacement filter to zero
displacementFilter.scale.x = 0;
displacementFilter.scale.y = 0;

// create the sprite
const sprite = new PIXI.Sprite(texture);

// apply the displacement filter to the sprite
sprite.filters = [displacementFilter];

// add the sprite to the stage
app.stage.addChild(sprite);
 

This code sets the scale of the displacement filter to zero before applying it to the sprite, so there will be no distortion or displacement effect by default. You can then change the scale of the displacement filter later on as needed.

Regarding the issue with the Sprite getting minor displacement/cropping applied when the parent container is rotated, it's possible that the rotation is causing the coordinates of the Sprite to be rounded or truncated, which can result in the displacement filter being applied incorrectly. To prevent this, you can try setting the roundPixels property of the renderer to true, which will ensure that the coordinates are rounded to integer values. Here's an example:

// create the renderer
const app = new PIXI.Application({
  antialias: true,
  roundPixels: true, // set roundPixels to true
});

// add the renderer view to the DOM
document.body.appendChild(app.view);

Pikashow Apk Download