MetaCDN / videojs-vr_OLD

A video.js plugin that turns a video element into a HTML5 Panoramic 360 video player.
MIT License
24 stars 16 forks source link

IOs 10.2 Iphone 6 - Glitching #12

Closed yarandoo closed 7 years ago

yarandoo commented 7 years ago

Hi,

Running the hosted examples in Iphone6 IOs 10.2 I can experience a black glitch while moving the phone. (Fullscreen mode, cardboard mode, and normal mode). Also the movement doesnt feel smooth. If phone is left static video will play fine.

Testing in Android and Iphone 7, the experience is much better. No glitches and a very smooth transition.

Are you also experiencing such glitches in Iphone 6? I have tried changing the WEBVRConfig parameters, (BUFFER_SCALE) with no luck.

Example used: https://videojs-vr.s3.amazonaws.com/0.2.2/example-local.html

Thanks!

jbroberg commented 7 years ago

Hi @yarandoo

Frankly it's a minor miracle it works at all on iOS right now - it's a total hack. I've had good success with iPhone 7 and above however in terms of performance. My colleague has a 6s and has a pretty smooth experience.

We also went down the path of making a native app for iOS as well.

Is this the new release any better for you? https://videojs-vr.s3.amazonaws.com/0.3.0/example-local.html

BTW just testing the fix for your other issue, thanks for the suggestion. It's looking good.

yarandoo commented 7 years ago

Hi @jbroberg,

thanks for the quick reply.

I have tried the latest release and I can see the same glitches. Can this be an issue with WEBGL? Or is it purely a performance problem?

See: https://github.com/pixijs/pixi.js/issues/3432

I ll keep trying to improve the experience with Iphone 6. As for our use case going native is not an option.

Thanks for having a look at the other issue, too

yarandoo commented 7 years ago

I found that the video plays without glitches in cardboard mode.

kfarr commented 7 years ago

@yarandoo does your latest comment mean the issue is resolved or is there still an error?

yarandoo commented 7 years ago

@kfarr unfortunately this is still an issue. Iphone 6 will produce the mentioned glitch. Although it will not produce if it is switched to cardboard mode. For our use case forcing the user to always use cardboard mode is not an option and we would like to have a fix for the glitch in normal mode.

jbroberg commented 7 years ago

Hi @yarandoo at this point the iPhone 6 is a 2.5+ year old handset on a platform that doesn't really have any native VR support. I'd suggest it doesn't have the horsepower to deliver a good enough experience via Safari. We have observed good performance on iPhone 6s and greater.

If you can get it improved (e.g. by patching flush into the underlying libs we use - likely webvr-boilerplate and/or three.js) we'd welcome any pull reqs.

yarandoo commented 7 years ago

Are you sure this is a performance issue?

1) Why when switching to cardboard mode there are no glitches?

2) The following project also uses the same underlying technology and the 360 experience works fi e without any glitches: https://github.com/thiagopnts/kaleidoscope

On Thu, 9 Mar 2017 at 8:28 am, jbroberg notifications@github.com wrote:

Closed #12 https://github.com/MetaCDN/videojs-vr/issues/12.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MetaCDN/videojs-vr/issues/12#event-992113592, or mute the thread https://github.com/notifications/unsubscribe-auth/ABeCBxhzC6kOSd64fMWvo15EPNlBAIX7ks5rjx2LgaJpZM4L7ue- .

jbroberg commented 7 years ago

Hi @yarandoo - I believe so. We don't have an iPhone 6 on hand to test with right now but we had a similar experience with our native app.

In answer to your questions: 1) It uses a different render and effects path for the cardboard view versus pan and scan (magic window)

2) Not exactly. We use webvr-boilerplate + webvr-polyfill + three.js You would need to get stuck into the render path (likely in webvr-boilerplate and three.js) to troubleshoot further.

You might get some immediate success setting the BUFFER_SCALE to a smaller value (i.e. < 0.5): https://github.com/googlevr/webvr-polyfill https://github.com/MetaCDN/videojs-vr/blob/master/src/js/webvr.config.js

Patches are always welcome if you have some success.

cheers

James

jaryno commented 7 years ago

Hi, I am having same issue with my game built on Phaser framework. Have you solved this problem? Did adding renderer.gl.flush() after render() call help you?

Thank you for your reply

jaryno commented 7 years ago

IOS v 10.3 solved this problem :)