pixijs icon indicating copy to clipboard operation
pixijs copied to clipboard

Bug: Textures from a video that may resize causes rendering issues

Open rory-pickering opened this issue 4 months ago • 0 comments

Current Behavior

I'm trying to render a video in pixi from a HTMLVideoElement, but it is a stream, and so the quality/size might change, also it could be from a windowed screen share, so the size may just change anyway from the resize of the window being shared.

PIXI.Texture.from(trackEl as HTMLVideoElement, true);

https://github.com/user-attachments/assets/f1ab1af7-387a-4be6-bd74-13c167cd9273

the texture has .dynamic = true

but if i add this to a ticker updated

    const width = this.sprite.texture.width;
    const height = this.sprite.texture.height;

    if (width === this.textureBounds.width && height === this.textureBounds.height) return;

    this.textureBounds.width = width;
    this.textureBounds.height = height;

    this.sprite.texture.update();
    this.sprite.texture.updateUvs();

it is better but still gets some glitching in the texture happening along with this error in the console.

1 [.WebGL-0x13816308100] GL_INVALID_VALUE: Offset overflows texture dimensions.

My current work around is whenever the texture resizes from the video and destroy the old one, i create a new texture and use that instead. it works great but i still get the webgl error above

Expected Behavior

The texture should update correctly without tearing or throwing webGL offset errors.

Steps to Reproduce

I created an basic example here.

https://codepen.io/rorypicko1992/pen/qBemeXJ

Make sure when you start the screen share you start it from a window that you can resize.

you should see the texture being squashed/ some times it tears or doesn't update according to the video and also [.WebGL-0x110005baf00] GL_INVALID_VALUE: Offset overflows texture dimensions. in the console.

Environment

  • pixi.js version: 8.5.0
  • Browser & Version: Chrome latest
  • OS & Version: Mac Sonoma 14.5
  • Running Example: e.g. https://pixiplayground.com/

Possible Solution

No response

Additional Information

No response

rory-pickering avatar Oct 17 '24 13:10 rory-pickering