FXAA and transparent clearColor of WebGLRenderer

Hi all,

I am using WebGLRenderer with an alpha buffer:

renderer = new THREE.WebGLRenderer( { alpha: true } );

As far as I understand that makes transparent renderer clear color “really transparent”, so that underlying web page background shows in the back of the rendered scene - the result I want to have.

Here is the jsfiddle with example:
https://jsfiddle.net/antonbagayev/95c0mopt/48/

Background color of the page behind the canvas is cyan, the scene by default gets rendered with renderer.clearColorAlpha of 1, and controls allow to change that value between 0 and 1.

The example is using FXAA which works well as long as clearColorAlpha is 1. Notice that when you set clearColorAlpha to 0 FXAA goes out of the window and edges of tetrahedrons become really jagged.

Is this scenario a perfect storm for FXAA and it has to have a non-transparent renderer clear color, or am I missing something?

Thanks for your advice and help as always!

I guess it’s more correct to say that the drawing buffer has an alpha channel when you set the flag to true. But yes, eventually this enables a real composition of the canvas with its background defined by the web page.

It seems this is an issue of how FXAA works. I suggest you study the semantic of the define FXAA_GREEN_AS_LUMA:

It seems there is no AA on transparent pixels with no color. Whatever setting you choose.

BTW: What is your reason for setting preserveDrawingBuffer to true?

Thank you for the explanation.

This is not applicable to the current example, but I wanted the fiddle to represent our code one-to-one. In our application we are using preserveDrawingBuffer: true to be able to take screenshots of the canvas at a given point in time by doing:
canvas.toDataURL('image/png').

Setting preserveDrawingBuffer: false didn’t allow us to capture the screenshot of the canvas using toDataURL. Is having this set to true a performance concern?

Yes. The reason for this is explained here:

As I understand it, this is not something that can be done with FXAA since it works by blending colors together. When you have transparent pixels there’s no way for the shader to know what the color behind the image is, so it cannot perform blending.