Why is a custom FBO not antialiased?

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

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.



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.