Problems with Stereo effect on large mobile screens (Pixel)

[Ariel-zhangyue]

Description:
When I test VR mode at Android device(by google cardboard), It seems no stereo effect? things are shown seperately and my eyes can not identify they are stereo.

Code here(I uploaded codes' screen shot for easy reading):

Thanks in advance!

• A-Frame Version: 0.3.2
• Platform/Device: Android 6.0
• Reproducible Code Snippet or Demo URL [highly encouraged]:

[dmarcos]

The capture seems correct to me. The scene is rendered differently for each eye. Look at the image on the left side inside the white band. What do you mean by your eyes don't identify they're stereo?

[Ariel-zhangyue]

The picture in two eyes are different, however when I put my phone into cardboard, they did not match each other, which means the entities overlap, but not come to one integrated stereo things..
@dmarcos
Thanks!

[dirkk0]

Are you sure that the phone is centered in the cardboard?
The original cardboard is (in)famous for not holding the phone correctly. That's why I don't use a cardboard-cardboard anymore, rather this one:
http://www.homido.com/en/shop/products/homido-mini
especially when I show it to clients.

[Ariel-zhangyue]

@dirkk0 Thanks for recommending this convenient device~!
However I have tried other websites like the demo: https://shopifyvr.myshopify.com/pages/virtual-reality
It works fine on the cardboard....
I do not no what goes wrong then......

[ngokevin]

Which Android device are you using?

[Ariel-zhangyue]

@ngokevin I am using HUAWEI Mate 8, and here is my device information, thanks!

[ngokevin]

OK, this seems exclusive to large Android phones. I'm glad you found immersive-web/webvr-polyfill#176 , that's the appropriate area to fix. Will leave this open for now.

[Ariel-zhangyue]

@ngokevin
Thanks, looking forward to the fixed version! :)

[thoragio]

FWIW, I am experiencing a similar issue with a Samsung Galaxy S7 Edge. A-Frame scenes rendered in VR mode using the Chrome browser on the S7 have a "double vision" effect, but other cardboard apps work fine, and even the ShopifyVR link above is OK when using Chrome.

[garethwilliams]

I was having this issue on Pixel XL. The problem is that the dpdb within Googles webVR polyfill that a-frame uses doesn't have your devices settings. We have to wait till Google updates that database.

In the mean time I fixed the issue I was having by doing the following:

• use a local version of the a-frame js
• in that js file find DPDB cache
• copy and paste a device entry in the cache
• change the ua to the user agent string for your device
• change the mdmh to your phones maker and device name
• change dpi to that of your device (this is the Actual DPI X and Y which is at the bottom of your second screen of device information)
• bw is bezel width, change this to the width of your devices bezel. Most phones are 3mm I believe.
• search in the a-frame js file for xhr.open('GET', ONLINE_DPDB_URL, true); then change true to false. This will stop the polyfill from asking for the online dpdb and will instead use the cache that you've edited.

This is what I added for the Pixel XL and it fixed the double vision issue I was having:

{
"type": "android",
"rules": [{
"mdmh": "Google//Pixel XL/"
}, {
"ua": "Pixel XL"
}],
"dpi": [537.9, 533],
"bw": 3,
"ac": 1000
},

The entry for your device might be this, I would check the user agent is correct for your device:

{
"type": "android",
"rules": [{
"mdmh": "Huawei//NXT-AL10/"
}, {
"ua": "HUAWEINXT-AL10"
}],
"dpi": [365.76, 366.676],
"bw": 3,
"ac": 1000
},

[thoragio]

@garethwilliams Thank you for your suggestion, which worked perfectly for getting rid of double vision with my Galaxy S7.

[tam203]

Same problem on Moto G4, I followed the above but also had to add one other line change and I used ua (user agent) as my rule not mdmh which I'm not even sure what that is because I found this in the code:

Dpdb.prototype.matchRule_ = function(rule, ua, screenWidth, screenHeight) {
  // We can only match 'ua' and 'res' rules, not other types like 'mdmh'
  // (which are meant for native platforms).

I went for:

{
    "type": "android",
    "rules": [
      { "ua": "Moto G (4)" }
    ],
    "dpi": 401.0,
    "bw": 4,
    "ac": 1000
  }

I also found this line :

this.dpdb_ = new Dpdb(true, this.onDeviceParamsUpdated_.bind(this));

and changed true to false (preventing searching for the DPDB online.

[thoragio]

@ngokevin I'm trying to move this forward with the maintainers of the WebVR Polyfill repo:
immersive-web/webvr-polyfill#184

In the meantime, I took a snapshot of the 0.4.0.min release and changed the DPDB URL to mine, so you can test it out by loading A-Frame from here:
https://rawgit.com/thoragio/vr-aframe-dist/master/040/aframe-v0.4.0.min.js

Everyone else following this issue, please try it and see if it fixes your stereo-rendering problem (it did for me on my S7).

[giordyb]

@thoragio looks the same way as the official release on iPhone 7+

[thoragio]

@giordyb can you go to the link below and copy/paste the output from it on your 7+?
http://btco-code.appspot.com/debug/screen_test.html

[giordyb]

Here you go:

UA: Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1
computed resolution: 2208 x 1242
screen.width: 414
screen.height: 736
screen.availWidth: 414
screen.availHeight: 736
window.devicePixelRatio: 3

[thoragio]

@giordyb thanks. There is an entry for these screen dimension already in the DPDB cache:
{"type":"ios","rules":[{"res":[1242,2208]}],"dpi":[453.6,458.4],"bw":4,"ac":1000}

So it seems that the blur issue in 2008 is separate from the stereo-effect issue in this thread.

[thoragio]

@dmarcos As discussed in Slack, I've submitted the PR to update the DPDB URL to my cache: immersive-web/webvr-polyfill#190

[dmarcos]

@thoragio Thank you! 🏆

[ngokevin]

Can people confirm that #2345 fixes this issue?

[ngokevin]

#2345