Smoothing jagged lines in vr

[HoloLite]

I noticed that when viewed inside the vr headset it's easy to notice the jagged lines of meshes like boxes, rectangles, lines, etc.

The same scene looks perfectly fine (no jagged lines whatsoever) when viewed inside desktop browser.

After experimenting with several approached, I found the following codes which enable anti aliasing. With it I am seeing much smoother lines. Other anti aliasing enabling codes do not seem to work for vr. 

I wonder if perhaps there is a better approach to improve the smoothing further. How is this impacting the frame/sec rate ? Please advise. Thank you!

this._vrHelper.onEnteringVR.add((vrHelper: BABYLON.VRExperienceHelper, eventState: BABYLON.EventState) => {
    let defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true,
        this.scene, [vrHelper.vrDeviceOrientationCamera, vrHelper.webVRCamera,
        vrHelper.vrDeviceOrientationCamera]);
    defaultPipeline.fxaaEnabled = true;
});

 

[Wingnut]

Hiya HoloLite.

I did a forum search for jaggy + VR.  The 4th hit...

http://www.html5gamedevs.com/topic/31515-state-of-anti-aliasing-in-vr-rigs/

...looks interesting.  Particularly... Deltakosh's post with the playground demo:    

https://www.babylonjs-playground.com/#AWFJV8

Lines 30-32...

    // Set samples to distortion postprocesses:
    camera.leftCamera.rigPostProcess.samples = 4;
    camera.rightCamera.rigPostProcess.samples = 4;

Maybe helpful, maybe not.  The 2nd hit looks interesting, too.

Keep us posted, stay tuned... smarter people than I... are nearby. 

[HoloLite]

I did play with calling the Engine ctor with both true or false like the following:

    new BABYLON.Engine(canvas, true); // tried false too

But either case does not solve the jagged lines in vr, which btw are very noticeable.

I also tried deltakosh suggestion on some old thread to enable anti-aliasing using FXAA like:

    var fxaa = new BABYLON.FxaaPostProcess("fxaa", 2.0, camera)

This also did not help in vr mode.

It seems like the default settings for vr camera is not optimized at all.

So far enabling the anti-aliasing in the default pipeline when vr mode is being entered (codes showed previously) is the only effective way to do it. If other knows better techniques please let me know.

In general, I also want to hear other 'optimal settings for vr' in babylonjs that would give the best rendering and perf.

 

[Guest]

The fxaa of the default pipeline is the same as the fxaa you mentioned

Can you make sure that the fxaa is applied to the WebVRCamera?

[HoloLite]

@Deltakosh I tried your suggestion, here is the actual code I used (as compared to the previous one which is commented out here)

 this._vrHelper.onEnteringVR.add((vrHelper: BABYLON.VRExperienceHelper, eventState: BABYLON.EventState) => {
                /*
                let defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, this.scene, [vrHelper.vrDeviceOrientationCamera, vrHelper.webVRCamera, vrHelper.vrDeviceOrientationCamera]);
                defaultPipeline.fxaaEnabled = true;
                defaultPipeline.imageProcessing.contrast = 2.0;
                */
                new BABYLON.FxaaPostProcess("fxaa", 2.0, this.vrHelper.webVRCamera);
            });

Just to make sure I went back and forth between the 2 implementations and the results are consistent though, the FxaPostProcess approach does not solve the jagged lines for vr. If there are any steps I might've missed, let me know.

 

[Guest]

Could you try to repro the issue in the playground? 

If so, I'll make it work

[HoloLite]

@Deltakosh Ok I will try. I know only typescript, I am not a real web developer

But this is certainly doable. Will ping you when it's ready.

[Guest]

Thanks!

[HoloLite]

@Deltakosh

Here is the playground, I am able to repro it.

https://playground.babylonjs.com/#0IFDHU#16

Currently the approach A (lines 16-18) is being used and it does a bit of smoothing on the jagged lines.

If you try approach B, you will see that the jagged lines look worse.

The most interesting is that the whole jagged line issue actually starts to appear as soon as you enable teleportation. So please also try to disable the teleport (line 11) and you will see that you won't see jagged lines issues (well only a bit). Is this a potential issue with teleport ? I would rather have the issues fixed by teleportation.

Thank you!

[Guest]

Ok so it is definitely linked to teleportation (see your other post)

We will make sure to remove that issue