Anti-aliasing, VR and MSAA?

Hello all,
I’m looking for ways to make VR content made in three.js look better.

I’ve experimented in Unity and MSAA helps a lot.
Searching for MSAA on this forum doesn’t return any results.

Is MSAA post-processing possible in three.js?
Any other hints about how to improve the look of VR content with the threejs webglrenderer?

Thank you,
Ali

You should always create your renderer like this if you want multisample anti-aliasing. This should also works for WebVR.

var renderer = new THREE.WebGLRenderer( { antialias: true } );

Read this for more information about anti-aliasing in WebGL: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing

Thanks @Mugen87.

I’m aware of the antialias flag and have been setting it to true.
Do you have experience enforcing MSAA with threejs and if so, how do you do it?

Multisample anti-aliasing does not work with all browser/devices. More information here:

If you want a more platform-independent effect, you can perform post-processing and apply a FXAA pass. Various post-processing examples use this technique e.g. https://threejs.org/examples/?q=post#webgl_postprocessing_unreal_bloom

However, we have no example that shows how to do post-processing with WebVR. This is still work in progress:

Those post-processing examples are very impressive!

I actually don’t need to support all platforms/browsers; I really only care about chrome. Is there a three.js example that demonstrates how to enable said “default” multisample anti-aliasing, and/or experiment with its parameters?

-ali

Did you look at this one yet?

https://threejs.org/examples/?q=fxaa#webgl_postprocessing_fxaa

@looeee This example is not in production yet :wink:

1 Like

I’ve already showed you this in a previous post.

var renderer = new THREE.WebGLRenderer( { antialias: true } );
2 Likes

Oops! :laughing:

ui… but it will come soon?
I am looking forward to including that!

What do you mean? The FXAA example? Or VR + Post-Processing?

I meant the FXAA example

Comes with the next release. But you can already see it here: http://rawgit.com/mrdoob/three.js/dev/examples/webgl_postprocessing_fxaa.html

I want to make clear that the shader itself is already in production and used in various post-processing examples. The upcoming release just updates the shader to version 3.11 and introduces the mentioned example that illustrates the effect of FXAA as clear as possible.

1 Like

ahh yes i just saw it! thanks for clarification