ios 10.1 blurry in stereo/vr mode

[ngokevin]

Description:

Something to do with the webvr polyfill buffer scale again?

[bramdeba]

Experiencing similar problems on Android (HTC 10). Attached screenshots show Aframe (left) compared to a native android application (right)

.

[ngokevin]

Probably a result of the WebVR polyfill post-processing. Will check issues there and remove from the Milestone.

[jasmussen]

I'm experiencing what I think is the same issue on both Android (Moto X 2014) and iOS (iPhone 6). Cardboard view is very pixellated. Here's a screenshot from the Android:

As a hack, I tried to change the pixel density from renderer.setPixelRatio( 1 ); to renderer.setPixelRatio( 3 ); in https://github.com/aframevr/aframe/blob/master/vendor/VREffect.js#L128. This drastically improves the visuals:

however performance takes a huge hit, and cardboard view is very stuttery.

You'd presume this is natural since the first one has a canvas of 640x360 and the second one has a full HD 1920x1080 canvas. However this photosphere aframe example also runs at a buttery smooth full 1080p canvas, I remote debugged to verify and here's the markup output:

<canvas class="a-canvas a-grab-cursor fullscreen" data-aframe-canvas="true" width="1920" height="1080" style="position: absolute; top: 0; left: 0; width: 640px; height: 360px; border: 0; margin: 0; padding: 0 10px 10px 0;"></canvas>

I also compared with the latest 0.4.0 version running locally at http://192.168.1.35:9000/examples/boilerplate/panorama/ and there appears to be a noticable performance decrease compared to the https://aframe.io/examples/showcase/sky/ version.

Any tricks, workarounds, ideas as to what I might be doing wrong? Thanks aframe wizards!

[giordyb]

I'm having the same issue on an iPhone 7plus with iOS 10.2

[ryanbetts]

I'm pretty interested in helping with this. Would love iOS support to be fixed for all the projects I'm currently working on – nearly 50% of our customers' use cases require an iOS device + cardboard.

What can I do to help push this along? @ngokevin Is this confirmed to be a WebVR polyfill bug?

[machenmusik]

Sounds as though there are multiple popular models not accommodated;
perhaps we can accumulate affected models not present in
https://github.com/googlevr/webvr-polyfill/blob/master/src/dpdb/dpdb-cache.js
(and ideally correct values to be used as well)
?

[machenmusik]

e.g.
borismus/webvr-boilerplate#146

immersive-web/webvr-polyfill#164
Galaxy S7 family is missing too

immersive-web/webvr-polyfill#129

[ryanbetts]

Ah. I'm experiencing it on an iPhone 6. Didn't realize that it would be so device specific. I'll take a closer look. Thanks for pointing me in the right direction @machenmusik!

[machenmusik]

There appear to be two avenues to fix
(1) fork webvr-polyfill, modify cache values (or the generated js) and use them
(2) get them to update the DPDB values online and in cache

[ngokevin]

Can we do both at the same time?

[thoragio]

I created a PR with some device settings I found in various GH issue threads:
immersive-web/webvr-polyfill#183

@ngokevin shall we wait a couple of days to see if they implement this, or do you want me to create a new npm package? If the latter, what should I call it (aframe-webvr-polyfill)?

If I go the new package route, what should I do about the ONLINE_DPDB_URL URL?
https://github.com/googlevr/webvr-polyfill/search?utf8=%E2%9C%93&q=ONLINE_DPDB_URL
My preference would be to just disable it and then keep the package up-to-date with any new devices as they are reported.

[ngokevin]

Thanks! Yeah, we can give it a couple of days.

This issue is reported to also affect iPhone 6. Maybe because the VR effects (e.g., barrel) applied by the polyfill degrade the resolution?

[thoragio]

I am wondering if this issue and 2117 are related or not. I don't know the xdpi and ydpi values for the iPhone 6 or 7+, but the Android phone above (HTC 10) is not in the DPDB cache. So it is not clear if updating the DPDB cache will solve this issue as well, or only the stereo rendering issue in 2117.

[ryanbetts]

@ngokevin Yeah, iPhone 6 is affected. It's fine using Aframe v0.3.2 but not in 0.4.

[thoragio]

@ngokevin @ryanbetts See my recent post in issue 2117. It seems that issue and this one are not related.

v0.3.2 was using v0.9.15 of the webvr-polyfill, while 0.4.0 is using 0.9.23 or higher. I checked the repo and quite a few changes were made since 0.9.15. Unfortunately my knowledge of the WebVR internals is not good enough to try and figure out which of those changes started causing the issue. However, given that Kevin first posted this issue on 26 October, I presume the modification happened around or after v0.9.21 which was released on 8 October and before 0.9.22 on 31 October. Curiously there were versions 0.9.3 and 0.9.4 released in between those two, and then they picked up the old number sequence again.

The largest chunk of changes (486 additions) was this commit that lead to the 0.9.3 release on 11 October.

[giordyb]

I can confirm that on iOS 10.2 with iPhone 7+ reverting back to aframe 0.3.2 fixes the issue.

[thoragio]

@ngokevin wrote on 4 Jan:

Thanks! Yeah, we can give it a couple of days.

Well, they merged my PR, but it has not been released into a new distribution (remaining at 0.9.25 in NPM). Also, still no reply from the WebVR guys to my offer maintain the DPDB list: immersive-web/webvr-polyfill#184

Does it make sense to take the drastic step to fork the WebVR polyfill repo and revert back to version 0.9.15 (same version 0.3.2 uses) to fix the issue here, and also deal with the Stereo effect issue (2117) at the same time? Forking like this kind of sucks, but less-than-ideal A-Frame experiences in cardboard on the latest and greatest mobile phones is starting to get old.

[nullcode]

@thoragio
I've tried to use a custom aframe v0.4.0 with webvr-polyfill v0.9.15, but unfortunately all I get is a white screen when entering VR. The same app works with 0.3.2 though.

[thoragio]

@nullcode I ran into the exact same problem. I'm glad to hear the problem is reproducible; I thought I was going crazy.

My assumption is that there is an issue with the dependencies. I think when the 0.3.2 distribution was compiled, the dependency versions for webvr-polyfill were different than what are currently being pulled through now when we compile our custom 0.4.0 builds.

[nullcode]

@thoragio have you found any working combination? I tried webvr-polyfill 0.9.16, master, v1.0.0 (from github tag). The last two does not split the screen in VR mode, very weird.

[thoragio]

@nullcode no, not yet. I haven't had much time to work on it. What I was planning to try next was to build 0.9.15 with the older versions of its dependencies. IIRC, there were only 2 or 3 and they had not seen too many changes since the release of 0.9.15 so mix-and-matching them to get the original combination will probably not take too many iterations.

I don't want to try building anything after 0.9.15 because I have no idea where the blurry-vision bug was introduced.

[renhyl]

I am experiencing same blurry/low res textures when browsing page on my Samsung Gear VR in Samsung Browser (webvr-enabled). Did try multiple aframe versions without any luck.
Desktop/Cardboard look nice and sharp. I am using draw component with text-wrap for displaying text. The text is so blurry its unreadable.

[ngokevin]

I believe the step is to target when in the WebVR Polyfill the blur was introduced. This is made difficult due to WebVR API migrations. My guess is it was when the barrel distortion and VR effects were added to the polyfill. The solution may be to introduce a way to toggle off those effects to preserve resolution.

https://github.com/googlevr/webvr-polyfill

[renhyl]

I noticed that aframe 2.0.0 displays my images sharp on iphone/android while 3.2.0/4.0.0 display fine on android but very blurry on iphone (safari/chrome).

[nullcode]

I figured this out guys, it was actually a bug in aframe, not webvr-polyfill, check #2352

[ngokevin]

The PR is up. Need help testing, use this link: https://rawgit.com/ngokevin/aframe/polyfilldist/dist/aframe-master.min.js

[ngokevin]

"It does the trick for me on an iphone 7 Plus" - dmarcos

Before

After

[bramdeba]

Link above doesn't do the job for me in Chrome on HTC 10 with Android 7.

Aframe in Chrome:

Native Android cardboard viewer:

Comparison (cropped):

Maybe I'm just expecting too much though :)

[ngokevin]

Try with anti-aliasing enabled?

[bramdeba]

I was hopeful for a moment (to see some kind of improvement), but adding the antialias-attribute like <a-scene antialias="true"> didn't change a thing actually.

[ngokevin]

Oh, I never noticed you were comparing to a native app. I thought the side-by-side were with an older version of A-Frame the whole time. I'm not surprised by that given the rendering runs through WebVR polyfill post processing effects (distortion, sampling).

[bramdeba]

Oh okay, that makes sense! No problem, thanks for the effort!

[sirwan]

Same on Samsung S8 on Gear VR using Samsung Internet browser inside the headset.. Very blurry images and text its unusable.. BUT using the cardboard or without a headset in VR mode is crystal clear. ....

[ngokevin]

@mkeblx Any ideas on why A-Frame scenes might be blurry in Samsung Internet + WebVR + GearVR?

[arturfie]

I've just noticed the same issue on S8 + GearVR especially when importing models. Adding antialiasing to the scene <a-scene antialias="true"> actually helped quite a lot.