Jump to content

[solved]Transparent PIXI renderer on top of html image causing white border


ZYandu
 Share

Recommended Posts

I'm getting a side effect from having PIXI sprites over the top of an html image background. It seems like a white border or artifacts are created when transitioning between displaying the sprite and the image background. 

The z-index layout in html for the image and pixi: 

<!-- Background Html image -->
  <div
    className={css`
      position: absolute;
      z-index: 0;
      width: ${window.innerWidth}px;
      height: ${window.innerHeight}px;
      overflow: hidden;
    `}
  >
    <img src={backgroundImg} />
  </div>
<!-- PIXI Stage -->
  <div
    className={css`
      position: absolute;
      z-index: 2;
      transform: scale(${Math.min(window.innerWidth / 1920, window.innerHeight / 400)});
      transform-origin: top left;
      overflow: hidden;
      width: ${window.innerWidth}px;
      height: 600px;
    `}
    ref={element => {
      props.updatePixi(element);
    }}
  />

Renderer settings:

const renderer = useRef(
   new PIXI.autoDetectRenderer({
        width: highwayWidth.current,
        height: highwayHeight.current,
        preserveDrawingBuffer: true,
        transparent: true,
        backgroundColor: 0xffffff,
        antialias: false,
   })
);

Removing sprites from the stage reveals more of the background, but adds white border artifacts to the other sprites now too.

https://imgur.com/a/wCuLlbr

Removing the background added white artifacts to the next sprites transitioning to the html image:

https://imgur.com/a/1xOiAyc

Any advice on getting rid of this? Thanks for any help! ?

 

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