Rendering issue with OutlinePass and WebGLMultisampleRenderTarget

Questions
,
1

Hello there!

I’m quite new to threejs and I’m preparing a sample project to figure out some workflows and ideas. I’m focusing on creating smooth, high-end looking visuals and therefore tried almost every form of AA in threejs. Since I’m planning to make use of post processing I had the best results with a WebGLMultisampleRenderTarget and some fxaa as a fallback.

Now I tried implementing the OutlinePass post effect and ran into a problem. It seems the outline post effect and the WebGLMultisampleRenderTarget don’t work together nicely, here ist what it looks like:

WebGLMultisampleRenderTarget active:

const renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, THREE.RGBFormat );
				
				composer = new EffectComposer( renderer, renderTarget );

MultisampleRenderTarget
MultisampleRenderTarget1831×1897 392 KB

WebGLMultisampleRenderTarget inactive:

const renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, THREE.RGBFormat );
				
				composer = new EffectComposer( renderer );

No Multisample Rendertarget
No Multisample Rendertarget1828×1891 257 KB

Is there a way to make the Outlinepass work properly with WebGLMultisampleRenderTarget active?

3

There is an issue for this at GitHub:

4

Thanks for the information. As suggested in the thread I tried commenting the line

_gl.invalidateFramebuffer( _gl.READ_FRAMEBUFFER, invalidationArray );

in three.js/src/renderers/webgl/WebGLTextures.js but it did not fix the issue for me.

So there is currently no other option than to avoid WebGLMultisampleRenderTargets and wait for a fix in three.js or the browser, right?

5

Correct. Consider to use FXAA if you need anti-aliasing.

1 Like