Samsung S8 device: double / blurry vision in VR (Cardboard)

[Aadjou]

Description:

• A-Frame Version: 0.7.0
• Platform / Device: Samsung S8 with Cardboard
• Reproducible Code Snippet or URL: https://glimmer-house.glitch.me/

When I try to open any aframe scene with an S8 device, I get double vision and blurry effects. If the lenses are moved far apart, the stereo view gets a little better, but you see everything blurry because the images do not align with the focus centre of the eyes.

So my assumption is that te weird aspect ratio of the S8 (18.5:9 instead of 16:9) is causing problems with the two vr cameras and the 3d stereo view. The eye centers are not correct because the whole screen is being used for VR.

[meatwallace]

Are you receiving the "No DPDB device match" warning in the console? Which browser are you using? More importantly, are you using the WebVR polyfill? (can test quickly by checking the output of navigator.getVRDisplays().then(console.log))

We've experienced similar issues when no or incorrect device data was found while using the WebVR Polyfill. It has fallback dimensions which vary in inaccuracy, and it can also calculate the wrong dimensions even on a successful device match if your device uses non-default resolution and the match's data doesn't include resolution specific PPI.

Sorry if this is off base; I don't have an S8 at the moment but we're currently testing across a broad range of devices prior to a product launch and I'm curious if this is related to what we've experienced.

[machenmusik]

My recollection is that S8 forces full resolution for GearVR mode (actually never checked Daydream) but if you are invoking as Cardboard and not Daydream, the phone may use current resolution, which differs if in power saving mode for example (which I personally use whenever out of VR), and that may cause polyfill mismatch. @mkeblx thoughts?

[Aadjou]

• WebVR Polyfill Version: ^0.9.36

• [CardboardVRDisplay]

  

• i don't get a "no DPDB" device match warning

• @mkeblx phone is not in power saving mode

• here are the console errors when entering VR mode

Thanks for leading me trough this, for some reason I did not think about debugging the phone remotely. First time, yeey. Please let me know if you need more information

[dmarcos]

@Aadjou Does the webvr-polyfill examples work for you? http://googlevr.github.io/webvr-polyfill/examples/basic/

[Aadjou]

The same problem occurs with these samples

[urish]

Seems like WebVRRocks/webvr-polyfill-dpdb#25 is related

[perturbator8]

Currently, I have the same problem with Samsung S7 Edge

[dmarcos]

This has to be fixed on the webvr polyfill side https://github.com/googlevr/webvr-polyfill It is not an A-Frame specific bug. I leave the issue opened as a reference until the polyfill gets a fixed and we can update the dependency

[perturbator8]

Thank you!

[dmarcos]

As a temporary workaround try to set the display of your Galaxy S8 / S7 to the maximum resolution. As far as I know those devices come configured by default at a lower resolution they are capable of confusing the polyfill. Instructions on how to do it:

https://www.tomsguide.com/us/samsung-galaxy-s8-guide,review-4330-8.html

[perturbator8]

Thank you very much.

[dmarcos]

@nicolomessina does the workaround above help?

[perturbator8]

Yes! With the workaround it works perfectly. So, isn't there a possibility to solve this issue without setting maximum resolution?

[Aadjou]

Thanks a lot everyone. I am in brussels now at the w3c webvr authoring workshop and will try to have a talk with someone that works on the polyfill

[mikebolt]

This was an issue with webvr-polyfil, so it should be fixed with this PR: https://github.com/aframevr/aframe/pull/3492

I think it's safe to close this issue.

[leoncvlt]

I'm afraid this seems to still be a problem - I'm using the master version of aframe with the latest polyfill and I am still having this issue on a Galaxy S8 when the display resolution is not set to maximum.

• A-Frame Version: 0.8.2 (Date 2018-06-12, Commit #01f2a5d)
• Platform / Device: Samsung S8 with Cardboard
• WebVR Polyfill Version: ^0.10.5
• Reproducible Code Snippet or URL: https://surf-jumper.glitch.me/ (it's just the basic aframe demo)

[wrjanan]

This worked for me, coupled with aframe-stereo-component, making use of stereo sky-box entity.

HTML File

<script> var jandevice = 0;</script>
<!-- edited aframe json file check below recalculateDeviceParams_ ()--> 
<script src="/third-party/7e5b5c5/aframe-master.js"></script>

      <!-- HTML A-frame entities -->
      <a-entity camera look-controls position="0 0 0" stereocam="eye:left;"></a-entity>

      <!-- aframe-stereo-component enabled a-sky -->
      <a-sky id="sky1" src="#left" stereo="eye:left" phi-start="0"></a-sky>
      <a-sky id="sky2" src="#right" stereo="eye:right" phi-start="0"></a-sky>

<script defer>
  // calling this function when device is not found in DPDB 
  // currently I achieved this by a hackish way, saving an attribute to the main index file.
  // then editing the a-frame-master.js to send the variable over.

  var jandevicemsg = "";
  if(jandevice == 200) {
       jandevicemsg = ("Online device database has current device's global settings."); 
  }
  else if(jandevice == 404) {
       jandevicemsg = ("Online device database does not have current device's global settings."); 
       // where dpdb values not available, call offset function.
       offsetCameraJan();
  } else {
       jandevicemsg = ("VR SDK uninitialized : DPDB not searching for online device database."); 
  }
   alert(jandevicemsg);

  function offsetCameraJan() {

    var screenwidth = window.screen.width;
    var screenheight = window.screen.height;

    // screen height with 16/9 ratio
    var screenheightratiovalue = screenwidth * 16 / 9; 
    var screenoffsetheight = screenheight - screenheightratiovalue;

   // radian offset for screen's actual ratio difference from screen's 16/9 ratio
   // this part still a little iffy, the *2 might be because of the split screen, though it worked on my test phone for this value so hope to get some feedback
   // maybe there is a much more accurate formula
    var radiansoffset = (screenoffsetheight / screenheight) * 180 / Math.PI * 2;
    if(radiansoffset < 0) { radiansoffset = 0; } 
    var sky1 = document.querySelector('#sky1');
    sky1.setAttribute("phi-start", radiansoffset);
  }
</script>

Aframe-master.js

Dpdb.prototype.recalculateDeviceParams_ = function () {
  var newDeviceParams = this.calcDeviceParams_();
  if (newDeviceParams) {

    // added the check jan device.
    jandevice = 200;
    this.deviceParams = newDeviceParams;
    if (this.onDeviceParamsUpdated) {
      this.onDeviceParamsUpdated(this.deviceParams);
    }
  } else {
    //jandevice
    jandevice = 404;
    console.error('Failed to recalculate device parameters.');
  }
};

[naftalibeder]

I'm also getting the double-vision problem on a Samsung S8, with a Cardboard viewer and a standard WebVR sample (https://webvr.info/samples/03-vr-presentation.html?polyfill=1), with the resolution turned all the way up to 2960x1440. (I've tried all 3 available resolutions.)

By comparison, the same headset and scene align perfectly on an iPhone 6s.

Is there any other workaround besides changing the screen resolution?

EDIT: Here's the console output from the WebVR polyfill sample. This displays regardless of the resolution the Samsung phone is set to.

[wrjanan]

@naftalibeder I had success setting the camera offset value for S8.

Can try looking at the phi-start attribute for the stereo cam component.

      <!-- aframe-stereo-component enabled a-sky -->
      <a-sky id="sky1" src="#left" stereo="eye:left" phi-start="0"></a-sky>
      <a-sky id="sky2" src="#right" stereo="eye:right" phi-start="0"></a-sky>

javascript method to find the value to offset. to find the height value from a 16:9 ratio of the screen width and calculating the radian value from the height difference and setting the camera offset based on the radian value.

    var screenwidth = window.screen.width;
    var screenheight = window.screen.height;

    // screen height with 16/9 ratio
    var screenheightratiovalue = screenwidth * 16 / 9; 
    var screenoffsetheight = screenheight - screenheightratiovalue;

   // radian offset for screen's actual ratio difference from screen's 16/9 ratio
   // this part still a little iffy, the *2 might be because of the split screen, though it worked on my test phone for this value so hope to get some feedback
   // maybe there is a much more accurate formula
    var radiansoffset = (screenoffsetheight / screenheight) * 180 / Math.PI * 2;
    if(radiansoffset < 0) { radiansoffset = 0; } 
    var sky1 = document.querySelector('#sky1');
    sky1.setAttribute("phi-start", radiansoffset);

Actually am quite looking forward to see if such a fix will solve yours as well or it has only fixed my specific device.

[JacobHegwood]

I am having serious issues with this! What is the clear fix for it?

[vin-ni]

I'm using this as an interim, device specific fix after aframe in the head.

Change the distance until it fits your device. I found for the galaxy s8 to use something like 0.045. Standard value for iPhone 7 is 0.060.

<script>
    window.webvrpolyfill.polyfillDisplays[0].deviceInfo_.viewer.interLensDistance = 0.050;
</script>

[jumpjack]

This is a recurrent issue also in cardboard+unity apps on Samsung S7. Solution in 99% of cases is manually changing phone resolution, but solution works randomly:

• sometimes you have to switch to FHD (1080x720)
• sometimes you have to switch to WQHD (2560x1440)
• sometimes you have to switch from whatever-resolution-you-set to another-resolution and then back to previous one
• sometimes you have to lock screen, unlock and restart app, without switching resolution

In the reamining 1% of cases, apps keep doing what they want, regardless of the screen resolution you set,