Jump to content

Centering and displacement issues


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';

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


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


Thank you.


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

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