Texture.upload() extremely performance hungry in FireFox

Hi i’m getting huge performance drops on Firefox when playing a video on a material. I identified that the cause is texture.upload() which takes a big amount of time in Firefox. On Chrome and Edge it has no impact at all.

I set up a test project here:
https://playcanvas.com/editor/scene/1234275
https://launch.playcanvas.com/1234275?profile=true&debug=true

Reproduction steps:

  1. Click on canvas to initialize video
  2. Press the play button

When executing in Firefox it will add an additional ~17ms to the forward render time.

Also i noticed that the playcanvas server does not set the header accept-ranges: bytes for video files. This prevents scrubbing for HTML video elements in Chrome (azure - Seekbar not working in Chrome - Stack Overflow). It would be nice if this could be added to your server configuration.

I think this is only limited to the launch tab and in the publish link/server it’s configured correctly.

Added: https://github.com/playcanvas/editor/issues/553

@mvaligursky May have a better idea on the texture.upload issue on Firefox

There are some relevant discussions online on this that could be worth testing maybe. But I can confirm WebGL2RenderingContext.texImage2D is taking a lot of time during the frame in FF.

1 Like

Hi @LucaHeft !

I ran into this a few months ago. There was a weird update to Firefox a few months ago that limited CPU usage on R8B8G8 but not R8B8G8A8

Changing this part of your code, or it’s equivalent, should speed things up for you:

texture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: false
    });

to:

texture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: false
    });

Here is the thread where I made this discovery and a link to the bug filed with Mozilla.

4 Likes

WOW! You’re a saviour!

I just tested this and it indeed fixes the issue.

1 Like