Display heavily pixelated image in VR Mode on Oculus Browser

[fanggu]

Description

Bug: Display heavily pixelated image in VR Mode on Oculus Browser with Samsung Galaxy S8 and Gear VR Headset

screenshots:

View in non VR mode

View in VR mode

Expected behavior

Should be display clear image as viewed in non VR mode.

Actual behavior

display heavily pixelated image only in VR mode, but working fine in non VR mode.

Reproduction

Happened after updating Oculus Browser to Version 4.5.1.108693309. Still working fine on other Samsung Galaxy S8 which haven't updated to latest version yet.

Devices:

• Samsung Galaxy S8 (Model number: SM-G950F)
• Gear VR Headset (Model: SM-R325)
• Android Version 8.0.0

Steps:

1. connect to Internet
2. update the Oculus App and Oculus Browser to latest version.
   • Oculus App Ver 3.42.0.3.3841(108521466)
   • Oculus Browser Ver 4.5.1.108693309
3. open Oculus Browser
4. go to the website
5. enable VR Mode by gaze View in VR button

An example of your code that reliably reproduces the issue is ideal. Can be viewed at Digitour website

Solution

At this stage, don't update Oculus Browser to latest version.

Additional Information

• 'react-360' package version: react-360@1.0.0
• 'react-360-web' package version: react-360-web@1.0.1
• Operating System: Android Version 8.0.0
• Browser: Oculus Browser (only occurs in VR Mode)
• VR Device: In VR, Samsung Gear VR headset (Model: SM-R325)

[andrewimm]

Wow, this is bad. I do all my testing on Oculus Browser, and it's always the highest-resolution WebVR experience out there. I will sync with the OC Browser team and try to figure out what's going on here

[fanggu]

Thanks for looking into it Andrew. Totally clueless what went wrong. Initially I through it might be caused by multi-roots or overlapping environment backgrounds, but it doesn't seem to be the case.

[fanggu]

Hi Team, any updates about the issue? Thanks.

[moroneyk]

I have been seeing a similar issue when running in Daydream. The same pixelation occurs when launching into VR from Chrome on a Google Pixel XL and a Daydream viewer.

Phone : Pixel XL Android : 8.1.0 Chrome: 66.0.3359.158

[andrewimm]

@fanggu I think it's specific to a single version of OC Browser, since I don't see it on latest. Still working with the team to confirm that this is absolutely true.

[moroneyk]

Here is a link to a video showing the pixelation through chrome on android with a PixelXL

https://drive.google.com/file/d/1uH5VvP3MGwAfc84csQYi64Q5J8B0YVuX/view

FYI: I have noticed that removing and re-installing Google VR Services, and then running in a standard cardboard headset through chrome no pixelation occurs. If I then run in a daydream headset the pixelation reoccurs.

[danjcooney]

Hi, just wondering if there has been a solution to this issue. Thanks

[mateidediu93]

Hello, any updates on this?

[andrewimm]

Dug around, the OC Browser issue was a bug that has since been fixed.

As for Daydream, this is a chrome bug. If you are in 2D mode and click "view in VR," you will get a really small render buffer. We can only allocate whatever size Chrome gives us, and in this case it's small for some reason. IF however, you put on the headset, enter Chrome from VR, and then click "view in VR," it will appear properly. Since it's a Chrome issue, I'm not sure what we can do to address this.

[klausw]

I strongly suspect that this is is due to the application misusing window.devicePixelRatio. The render buffer dimensions in WebVR are raw pixel counts, they aren't supposed to be scaled by a pixel ratio. They should be used as-is for sizing the render canvas. Other WebVR applications aren't affected by this scaling issue.

When starting in regular 2D Chrome, window.devicePixelRatio is 3.5. When starting in VR Browser, window.devicePixelRatio was 1.7 when I just tested. That's a 2x difference and could easily explain the quality difference.

[andrewimm]

@klausw feel free to take a look at the resize code when VR is entered: https://github.com/facebook/react-360/blob/master/React360/js/ReactInstance.js#L518-L522 We explicitly avoid using any device pixel ratio here.

Many webvr apps make the incorrect assumption that the right eye params are identical to the left, use it for both eyes. I will continue to fiddle with these numbers to see where it breaks down.

[klausw]

I poked around in Inspector a bit more. Turns out that it's resizing based on window dimensions in a way that overrides the provided recommended render resolution. This is indirectly based on devicePixelRatio since the reported window / element dimensions are based on that.

For http://vr.digitour.co.nz/, Inspector shows that it's using a canvas size of 576x385 pixels on a Pixel 2 XL. For comparison, https://webvr.info/samples/03-vr-presentation.html works normally on the same browser version, and uses a canvas size of 2288x1133 on the same device.

With some logging added in locations where it's calling this._renderer.setSize, you can see that it's frst using the recommended size, then overriding that:

resize 2288 1133 false setPixelRatio 2288 1133 false

resize 2288 1133 false resizeCanvas 576 385 true

The override happens here:

        key: "frame",
        value: function(e) {
            var t = e || 0;
            0 === this._lastFrameTime && (this._lastFrameTime = t);
            var i = Math.min(t - this._lastFrameTime, 100);
            if (this._lastFrameTime = t,
            this._needsResize) {
                var a = window.innerHeight
                  , r = this._parent.clientWidth;
                this._parent.style.height = a + "px",
                this.resize(r, a),
                this._needsResize = !1

Here, this._parent.clientWidth is 576 and window.innerHeight is 385 after entering VR, leading to very pixelated rendering.

There may also be a race condition, while testing I once ended up with the correct render resolution, possibly because events got handled in a different order.

[andrewimm]

@klausw thanks for tracking that down! That's actually actionable, and makes sense. I'm betting there was some change to calling resize in Chrome since we launched in May and ran our full gamut of device tests. This issue was complicated somewhat by the fact that there was a separate issue in OC Browser that was tracked down and addressed during this time.

Should have a fix landed later today. I've been planning a new patch release, I'll be sure this gets in there.

[ansible-comme]

Getting this same issue using Oculus Go browser:

before entering VR view:

In VR view:

[ansible-comme]

Hi team, any further notice on this issue on Oculus Go browser?

Running on latest update: version: 342.98.111179117 runtime: 2.15.2.112289701 headset version: 27130.12430.180

[jfcampos]

Same here! :( Any news?

[andrewimm]

We were hoping to get one last fix in before publishing another package version, but it's taking longer than expected, so we've just published version 1.0.2 of react-360-web with this fix. It also contains a number of other recent fixes from the last month. If you update your dependencies, everything will be fixed. Tested on Go, Pixel, and Mirage Solo.

[ansible-comme]

@andrewimm thanks very much for this.