Hi there after some extensive testing I have confirmed that in Safari 10 it has broken WebGL video textures for HLS streams. It is an issue on IOS 9 Safari as well as Webkit nightly.
It is regarding this FlipY flag
_gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, true );
If this is disabled the video texture is rendering but it is upside down.Although I believe this flag is needed for hardware acceleration correct ?
Reference to three.js ticket.
Reference to possibly related webkit ticket #162491
I have found some raw webgl examples that I have modified for the test. The HLS streams use a CORS proxy because of the known severe limitation there.
With FlipY disabled and "working"
With FlipY enabled
Just to do heads in further. This FlipY "fix" doesn't help on IOS 9. Something else is a problem there now. It took days just to track this down.
I don't know how to replicate this with raw webgl but flipping the "uv" Y around works around this possible bug. So it shows the right way up.
It still won't render on IOS 9 although I can see it trying to. The frame rate with webgl is appalling on the Ipad 3 so usually sits around 5 frames. It is showing 10 frames per second.
According to this comment. the flipy work around seems to work on IOS 10 but not IOS 9.
I need to confirm this.
Still it would be of use to fix this FlipY flag bug also than constant work arounds just because of Webkit.
I am hoping the WebView in IOS10 is the same as Safari then and doesn't have the bug still.
(In reply to comment #5)
> I am hoping the WebView in IOS10 is the same as Safari then and doesn't have
> the bug still.
Daniel, I tried to run this example on iOS 10.1.1 Safari, but seems not working, as long as webgl start to render texture from video, safari crashed. So maybe still not be possible to run on iOS
That was the same for me.
And you say this is working on IOS 10 , just ignoring the texture upside down ?
This is working on OSX Safari so there is clear differences for no reason with IOS
According to Edwin the raw webgl is working in IOS 10 where the fix for the FLIPY flag in three.js is not. The comment about the colourspace is of interest. Perhaps the RGB flag is causing the issue when rendering the texture ?
"http://dev.electroteque.org/threejs/webglworking.html this one.
I tried on my iPhone 7 iOS 10.1.1 Safari, and it can successfuly render the image from video through webgl, however the color is incorrect and the image is upside down.
Also the image seems pretty laggey, I’m now trying to make this example better and try to play the whole m3u8 video with correct color."
After some very heavy and painful testing I have fined tuned the demos and the issue.
The FlipY work around is required for HLS across both OSX 10.11 and macOS , IOS 9 and 10. The raw webgl example doesn't use FlipY because its doing in in the shader program. With three.js the geometry has to be flipped around.
HLS rendering on IOS 10 is displaying but has severe colour artifact issues. The frames stop working but I believe its an issue with the emulator and frames dropping. I now have no device that can be updated to IOS 10. It doesn't show up at all on IOS 9. Both require the CORS proxy for mp4 and HLS.
I may have to now provide another ticket in regards to the colour rendering problem with HLS on IOS 10 once I confirm it's not the emulator.
This is absolutely painful no wonder nobody wants to support Safari but people need it working.
I've had to provide here different rgb format settings. The default one produces vertical coiourbars , the rgba one the colours are incorrect. But in the emulator. I am now unable to properly test IOS 10 because my Ipad device has become unsupported. I'll try and get a hold of an Iphone with IOS 10 to confirm.
Please concentrate on these two examples. the RGB flags make no difference on an actual device, the simulator produces faulty output but similar output when using the RGBA format.
The FlipY work around is required for IOS 9 / 10/ OSX Safari with HLS.
I have been able to replicate a colour issue with HLS webGL rendering which now needs a second ticket.
So many massive flaws and bugs causing this to be a show stopper.
So such HLS webgl output is only partially working on IOS 10 not IOS 9. Many devices are stuck on 9 now. I need to find a work around for 9.
please see fix here. Close this if you wish. This works around this particular bug.
I'm taking a look at fixing this in iOS now. But I'm a bit confused by the comments.
For HLS videos:
- iOS is providing color channels in the wrong order (bgra instead of rgba). The values are otherwise correct though.
- macOS is producing a texture that requires flipping in the X axis. This can be worked around by using setPixelStorei(UNPACK_FLIP_Y_WEBGL, true)
- iOS is producing a texture that requires flipping in the X axis, but the above workaround does not work.
Is this correct?