Jump to content

Centering and displacement issues


khandev
 Share

Recommended Posts

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.

Untitled.jpg

Link to comment
Share on other sites

  • 2 weeks later...
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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

  • 4 months later...
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 by rojldee89
Link to comment
Share on other sites

  • 2 months later...

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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...