graphicsDevice.resizeCanvas causing black flashes

Help & Support
1

Anyone else come across the issue with graphicsDevice.resizeCanvas causing the canvas to flash black? Any way to mitigate? Even with autoRender off and not pushing any frames, I still seem to get it.

2

Update
It looks like graphicsDevice.resizeCanvas() fires the resizecanvas event which calls a bunch of hooks, which result in a new frame getting pushed before the graphics device is ready (causes black screen).

I was able to circumvent this issue by replacing the resizeCanvas() function call with the code from that function without the this.fire() call. I then delayed pc.app.renderNextFrame by ~100ms to avoid that rendering a black screen.

End result looks like this:

      // Tell PlayCanvas new dimensions
      // window.pc.app.graphicsDevice.resizeCanvas(w, h);
      let gd = window.pc.app.graphicsDevice;
      let ratio = Math.min(gd.maxPixelRatio, window.devicePixelRatio);
      w *= ratio;
      h *= ratio;
      if (gd.canvas.width === w && gd.canvas.height === w)
        return;
      gd.canvas.width = w;
      gd.canvas.height = h;
      // Push new frame (after delay or you get a black screen flash)
      setTimeout(() => {
        this.fire('resizecanvas', w, h);
        window.pc.app.renderNextFrame = true;
      }, 150)

Engine function: https://github.com/playcanvas/engine/blob/d3040d14ddd0eab10cb097d7b235e44ff0950689/src/graphics/device.js#L3410

1 Like
3

Hi @Chris,

It’s good that you found a work around, and thanks for sharing it.

I’ve seen this issue sometimes when post process effects are enabled, usually some ordering issue on how they push their passes.

1 Like