ZYandu

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

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! 😁

 

Share this post


Link to post
Share on other sites

I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?

Share this post


Link to post
Share on other sites

I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?

That's true, because alpha is premultiplied and background (R,G,B,0) actually is ADDED to it.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.