VR on mobile more blurry than outside VR?

While I do understand, that the resolution in VR will be lower than outside VR, it seems that the image is more blurry than it should be. Here are two example screenshots:

Comparison


(Screenshots are not resized)

If you look at this jagged edge of the diagonal line and compare it with inside VR (see arrow), you can see the difference.

The browser is Chrome 70 on a OnePlus 6T with a screen resolution of 412 x 892px and a dpr of 2.

Is this the expected behavior? Is there something I can do to make the VR image clearer?

Pinging @trevordev

@jhadenfeldt what post process are you using if any? Do you have a playground that I can use to repro? If you are applying certain post processes that may be resolution dependent I would expect this eg. a 5x5 blur will make a low res image look more blurry.

@trevordev Sure! Here’s an example of the custom post process I’m using and how I have it hooked up to the render pipeline: Babylon.js Playground

Not doing any blurring though.

Thanks, it looks to be that aliasing is not happening, by default msaa 4x is enabled. When using postProcesses msaa should be turned on for the first post process by setting .samples = 4, see here https://www.babylonjs-playground.com/#XK2D14#1

I don’t think that is the underlying issue. While it helps to make the scene look better inside and outside VR, there is still a big difference between VR and non-VR.

Here is a comparison of the Playground in VR and outside VR:

While the camera is further away in VR, the curvature of the sphere should still be visually similar, yet it isn’t.

It kinda looks like the DPR is being ignored in VR, but not outside VR.

Do you repro with, say, VRDeviceOrientationCamera and no postprocess? I try to understand if it is related to the WebVRCamera or to a specific postprocess

I can reproduce the issue with just a bare bone VR setup too: https://www.babylonjs-playground.com/#XK2D14#2 Looks like it doesnt have anything to do with the postprocess.

I didn’t take any new screenshots, but it looks identical to my latest screenshots.

Ok I let @trevordev chime in then:)

1 Like

Did you try forcing the pixel ratio ? https://www.babylonjs-playground.com/#XK2D14#3

Might be related. This might need to be dynamic to have 1 outside VR and 0.5 (means twice as much pixels on width and height) once in VR.

2 Likes

Awesome, thank you so much, that solves it for me!