CODEWITHSUNDEEP
three.js
velcrofinger
velcrofinger

Reputation: 21

Three.js FXAA background transparency

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

Upvotes: 2

Views: 2314

Answers (2)

Daniel Guerra
Daniel Guerra

Reputation: 221

Check my answer in https://stackoverflow.com/a/21056080/2482976

The FXAA needed to be updated to handle the transparent background

Upvotes: 0

user2529011
user2529011

Reputation: 733

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.

Upvotes: 1

Related Questions