Video-Texture does not work under FF for Android

Help & Support
1

I’ve recently noticed that my 360 videos no longer work under FF for Android,
I checked and noticed that the problem lies in the video textures not working properly,
also noticeable in the video texture demo.

See official demos, currently not working on my S8, Android 9, FF 99.2.0

https://developer.playcanvas.com/en/tutorials/video-textures/
https://developer.playcanvas.com/en/tutorials/webxr-360-video/

I’ve also noticed that the video itself is running (in my demo I hear the sound of the video), so the problem is probably not a stopping of the video, rather a shader issue.

As always, thanks for your support.

2

That’s really interesting! I had noticed this on my project awhile ago, but it seemed to be fixed when I started making additional changes to make it more compatible with iOS. I’ll take a look at the tutorial and my project and see if I can spot what differences causes it to work.

1 Like
3

Thanks @eproasim that would be great. In iOS some issues where caused with the video not starting properly (or being removed if outside of the viewport).

4

Looks like it could be an issue with FF :thinking:

The errors I get on console are:

WebGL warning: tex(Sub)Image[23]D: Failed to retrieve source bytes for CPU upload. [playcanvas-stable.min.js:6:323810](https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/Z0FlzPma/playcanvas-stable.min.js)

WebGL warning: generateMipmap: The texture's base level must be complete. [playcanvas-stable.min.js:6:324479](https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/Z0FlzPma/playcanvas-stable.min.js)
1 Like
5

Created a ticket for this: Video textures don't render on Firefox Android 99 · Issue #4204 · playcanvas/engine · GitHub

Not sure if this can be worked around with a different texture format or setup

2 Likes
6

Thank you @yaustar !
@eproasim could you maybe check if your examples are still working with FF 99 and if so maybe provide a working boilerplate demo?

7

Hi @Rechi,

I confirmed that my projects are still working on Firefox Mobile 99.2.0. After a bit of testing with the tutorial projects, it seems like it’s a problem with my old Firefox nemesis RGB textures. I was consistently able to break and fix the textures on the tutorial project (On FF Mobile) by changing the generated texture to use RGBA instead of RGB like this:

    this.videoTexture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
        mipmaps: true
    });

You will want to make this change anyway because there is a known performance issue with Firefox Desktop surrounding video textures using RGB textures instead of RGBA:

Let me know if this works for you. If not I can keep looking around, especially if you’re able to share your project.

1 Like
8

I’m looking at a fork of the project and even moving to RGBA is not enough. FF99 Android doesn’t seem to handle uploading the video texture more than 15 times per sec.

At 30, it is back to rendering black/blank again

1 Like
9

Strange that I got it to work on my LG G8 with what appeared to be a normal framerate. But using Browserstack for a Samsung Galaxy S9, I can definitely see what you’re experiencing. My projects also fail on that device. I’ll keep digging to see what the difference there is.

2 Likes
10

Alright, so I am a bit baffled on this one. I just realized that Browserstack is only running FF 96.1.1, so testing there really isn’t very useful. I’m mostly thrown off by my phone (LG G8 - Android 11) working with the video projects without issue running FF 99.2.0 regardless of the speed of the texture upload. Here’s what I get:

I promise it looks better in person, but still even uploading every frame instead of every other frame like I normally do shows the video without issue. I’ve looked through my settings to see if I could find anything funny, and I know I haven’t messed with the flags on mobile.

Over the next few days, I’ll see if I can find a bit more time to take another look.

1 Like
11

Figured I would bump this for anyone out there with an Android device using Firefox. My phone is currently using 100.1.2, and the tutorial as well as my projects still work.
Unfortunately, Browserstack has still not updated to the latest release, so I’m not sure if it’s my somehow magical phone, or if there were any updated to texture writing on their end. Can anyone take a look?

Here is a link to a fork of the tutorial project updated to use RGBA textures for convenience:
https://launch.playcanvas.com/1417102

2 Likes
12

Seems fine on my Google Pixel 2 with Firefox 100.1.2

2 Likes