Pixi JS Renderer Drawingbuffer issues on iOS

[bhaux]

Hi there!
Pixie code which runs well on desktop seems to behave strangely on mobile.
I am a noob to pixie.js so I may with a very high likeliness be doing something wrong here.

When I use my drawing code on mobile, it appears that the canvas refreshes strangely.
I am not redrawing the entire stroke but maintaining the DrawingBuffer and just adding new sprites to it.

No matter if I set 'legacy:' to false or true (as below) - it will give me the same result.

Thanks for taking a look!

initializePixieCanvas() {
    console.log("init canvas")
    const cArea = this.canvasContainer;
    const width  = 1000;
    const height = 1000;
    this.stage = new PIXI.Container();
    this.renderer = new PIXI.WebGLRenderer(
      width,
      height,
      {
          antialias: false,
          transparent: true,
          resolution: 2,
          clearBeforeRender: false,
          preserveDrawingBuffer: true,
          premultipliedAlpha: false,
          forceFXAA: true,
          legacy: true
      }
    );

    cArea.appendChild(this.renderer.view);

    this.renderer.view.style.position = "absolute";
    this.renderer.view.style.top = "0";
    this.renderer.view.style.left = "0";
    this.renderer.view.style.pointerEvents = "none";
    this.renderer.view.style.zIndex = "99";

    const cnvs = this.renderer.view;
    const scaleForHighResDisplay = true;
    if (scaleForHighResDisplay) {
        cnvs.width = width * 2;
        cnvs.height = height * 2;
        cnvs.style.width = width + 'px';
        cnvs.style.height = height + 'px';
    }

    this.pointer = new PIXI.Sprite(PIXI.Texture.fromCanvas(this.brushElement));
    this.pointer.texture.destroy();
    this.pointer.texture = PIXI.Texture.fromCanvas(this.brushElement);
    this.pointer.anchor.x = 0.5;
    this.pointer.anchor.y = 0.5;

    this.renderer.clear();

    this.stage.addChild(this.pointer);
}

[ghost]

You should be writing native apps for stuff this advanced.

[bhaux]

The web app is surprisingly fast and it seems so close - other than that the drawingbuffer likes to regurgitate old data of course...

[bhaux]

So the good news is, turning on antialiasing fixes this artifact. But clearly turning on antialiasing still has a significant hit on the performance. Any help on bypassing/fixing this is bug is hugely appreciated. thx!

[GoodBoyDigital]

hello! This looks like it may be a precision issue, have you tried setting the precision of the shaders to highP?

[floepi]

I can confirm that it works with antialiasing enabled.

@GoodBoyDigital : Tried setting "highP" which did not have an effect unfortunately

Any other idea how this could be fixed without the performance hit of antialiasing?

[ivanpopelyshev]

@floepi

You can try change transparency, if you dont need that background.

{ transparent: 'notMultiplied'}

or

{ transparent: false}

[bhaux]

unfortunately we will need both as this is a transparent paint layer...
We should see if we can debug why this is not happening with antialiasing enabled...

[ivanpopelyshev]

Do you want to debug mobile browser?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.