Why is a custom FBO not antialiased?

Questions
,
1

Why is a custom FBO not antialiased? Rendering to the default FBO works with MSAA.

2

This is a limitation of WebGL 1. MSAA does not work in context of off-screen rendering. You have to manually perform anti-aliasing. FXAA via post processing is one possible solution.

https://threejs.org/examples/webgl_postprocessing_fxaa.html

3 Likes
3

With the next release of three.js (R101), it’s possible to use a new type of render-target to solve this problem. WebGLMultisampleRenderTarget enables the support of multisampled renderbuffers. You can now perform “render-to-texture” and have an antialiasing render result. A post-process AA like FXAA is not necessary anymore.

Important: It’s required to use a WebGL 2 rendering context since multisampled renderbuffers is a WebGL 2 feature.

7 Likes