Three.js FXAA background transparency

Question

Created a simple scene with a cube in it. Able to see the color of the containing element, (body), in the background.

Added an FXAA shader and the antialiasing works well. However the background is now black, so can no longer see the color of the background container.

Added the following code:

var target = new THREE.WebGLRenderTarget(512, 512);

var composer = new THREE.EffectComposer( renderer, target );

in order to set the effect composer render target format to THREE.RGBAFormat, rather than the default THREE.RGBFormat.

This makes the background work properly, but then there are black and white edges around the cube and the antialiasing does not look very good.

Repeated the above but used the Sepia shader instead of the FXAA shader. This works correctly. The cube looks sepia and the background containing element color is correct.

Are there any workarounds to allow antialiasing and transparent background?

Thanks for any help

Answer 1

I read your issue and there seems to be a good source that can solve or at least lead you down the right path. Go check out: https://github.com/mrdoob/three.js/issues/2125

Hope this helps.