Pixi.js: WebGL VideoTexture renders upside down / y flipped in Firefox 50

Created on 12 Jan 2017 · 9Comments · Source: pixijs/pixi.js

Hey people,
I''m on Fedora 24, Firefox 50
and every WebGL VideoTexture renders upside down since I upgraded to the newest Firefox version
Replicable even on the PIXI Demo page:

https://pixijs.github.io/examples/#/basics/video.js

screenshot from 2017-01-12 16-53-32

💾 v4.x (Legacy)

Source

FabianElsmer

Most helpful comment

I found out that this only happens if gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true) is called. Also, I was able to reproduce this problem without using pixi.js, so I'm sure this is an browser issue.

To work around this, you can change this line to glTexture.premultiplyAlpha = false. I'm not sure how this will affect transparent images, but since almost all videos don't have alpha channel, it could check whether if the source type is video or not.

So this would work as a complete workaround:

glTexture.premultiplyAlpha = !(texture.source instanceof HTMLVideoElement);

UPDATE: Chrome supports VP8 video alpha channel, while Firefox doesn't.

yoo2001818 on 18 Jan 2017

👍2 🎉1

All 9 comments

It's the correct way on my PC and on my laptop. Both on Windows.

themoonrat on 12 Jan 2017

@themoonrat I can reproduce this on three different computers.

Make sure you have Firefox 50. It might be a Firefox bug as it only happens after newest changes in firefox but http://krpano.com/ios/bugs/ios8-webgl-video/ is not affected. So what is pixi doing differently?

Systems tested:

Desktop, Windows 10, NVIDIA GTX 650
Laptop, Windows 10, NVIDIA Quadro K1100M
Laptop, Fedora 25, Intel integated GPU (of an i7-7500U)
https://bugzilla.mozilla.org/show_bug.cgi?id=1330672#c1 can reproduce it with an AMD card

FlorianLudwig on 13 Jan 2017

I tried on Firefox 50 and Firefox Developer Edition 52 on both. PC using Geforce 770 Ti, the laptop... not sure off hand, i believe it's a low end mobile Geforce

themoonrat on 13 Jan 2017

@themoonrat are you sure pixi is using the webgl renderer?

FlorianLudwig on 13 Jan 2017

So this would work as a complete workaround:

glTexture.premultiplyAlpha = !(texture.source instanceof HTMLVideoElement);

UPDATE: Chrome supports VP8 video alpha channel, while Firefox doesn't.

yoo2001818 on 18 Jan 2017

👍2 🎉1

@yoo2001818 Thank you so very much!

FabianElsmer on 18 Jan 2017

Could you help me to solve this problem? I couldn't reproduce your solution this in pixi.min.js

function PlayGameVideo(lastVideo) {
        var texture = PIXI.Texture.fromVideo(lastVideo);
        videoSprite = new PIXI.Sprite(texture);
        texture.baseTexture.source.loop = true;
        videoSprite.width = 720;
        videoSprite.height = 480;
        videoSprite.anchor.set(0.5); 

        stage.addChild(videoSprite);
            video.currentTime = 0;
        video.play();
}