📦 Bundle size

Full ESM build, minified and gzipped.

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

#28780 It seems to work :)

I've noticed an issue when experimenting with FXAANode.

Unlike Lut3DNode, some passes like FXAA require the result of RenderOutputNode as a texture. But if you call toTexture() on RenderOutputNode, the result is getting too dark. Check out the following fiddle to see the effect:

https://jsfiddle.net/3vgz4sxw/

If you remove the toTexture() call, colors are as expected. Ideally, toTexture() does not alter the final result.

FWIW, maybe

postProcessing.outputColorTransform = true;

I'm afraid that is not right. The idea is to set outputColorTransform to false if you use RenderOutputNode.

The texture node returned by toTexture() should hold sRGB values but it looks like it doesn't.

I don't think I quite understand this code:

  // post processing

  postProcessing = new THREE.PostProcessing( renderer );
  postProcessing.outputColorTransform = false;

  // scene pass

  const scenePass = pass( scene, camera );
  const outputPass = renderOutput( scenePass );


  postProcessing.outputNode = outputPass.toTexture();

Correct me if I get this wrong, but it looks like scenePass is the initial render pass, renderOutput tone maps and converts to the display color space, and then the result is assigned to postProcessing.outputNode ... so postProcessing.outputNode is the input to the post-processing stack?

so postProcessing.outputNode is the input to the post-processing stack?

It is the last node in the stack that produces the final values for display. It's like when you assign node compositions to *Node material properties (like colorNode).

With FXAANode a typical setup could look like this:

postProcessing = new THREE.PostProcessing( renderer );
postProcessing.outputColorTransform = false;

  // scene pass (ideally produced via MRT)

const scenePass = pass( scene, camera );
const scenePassColor = scenePass.getTextureNode();
const scenePassViewZ = scenePass.getViewZNode();
const scenePassNormal = scenePass.getNormalNode();

// Bloom -> Output (tone-mapping+sRGB) -> FXAA

const bloomPass = scenePassColor.bloom( scenePassViewZ, scenePassNormal );
const outputPass = bloomPass.renderOutput();
const fxaaPass = outputPass.fxaa();

postProcessing.outputNode = fxaaPass;

FXAA requires sRGB input and since it is not a per-pixel operation, the result of previous pass as a texture. The toTexture() call is done internally in FXAANode. The code in the fiddle is just a simplified setup.

You can actually chain all commands or write them more explicitly:

const bloomPass = bloom( scenePassColor, scenePassViewZ, scenePassNormal );
const outputPass = renderOutput( bloomPass );
const fxaaPass = fxaa( outputPass );
postProcessing.outputNode = fxaaPass;

Or everything in one row:

postProcessing.outputNode = scenePassColor.bloom( scenePassViewZ, scenePassNormal ).renderOutput().fxaa();

@Mugen87 Try add this for now:

const outputPass = renderOutput( scenePass, renderer.toneMapping, renderer.outputColorSpace )

.toTexture() It is not transferring the context of rendering, but this can be fixed.