Anti-aliasing, VR and MSAA?

Questions
, , ,
1

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

2

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

3

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?

4

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:

5

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

6

Did you look at this one yet?

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

7

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

1 Like
8

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

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

Oops! :laughing:

10

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

11

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

12

I meant the FXAA example

13

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
14

ahh yes i just saw it! thanks for clarification