如何在Three.js描边示例中移除FXAA？

Great question! To cut to the chase: OutlinePass does not depend on FXAA at all — you can absolutely use it without any anti-aliasing pass. The blank screen issue you're seeing after removing FXAA is caused by a quirk in how the example's post-processing pipeline is set up, not a hard dependency between the two passes.

Why removing FXAA breaks rendering #

In the official outline example, the FXAA pass is configured as the final pass in the EffectComposer chain, with its renderToScreen property set to true. This tells the composer to output the processed frame to the browser window. When you remove this pass, there's no longer any pass in the chain that sends the final result to the screen — so you get a blank canvas, even though the OutlinePass is still running in the background.

How to fix it (step-by-step) #

1. Remove all FXAA-related code
   Delete lines that import FXAAPass (or FXAASizeSelectorPass), instantiate it, and add it to the composer. For example, get rid of code like:

   import { FXAAPass } from 'three/addons/postprocessing/FXAAPass.js';
   // ...
   const fxaaPass = new FXAAPass( window.innerWidth, window.innerHeight );
   fxaaPass.renderToScreen = true;
   composer.addPass( fxaaPass );
   

2. Set renderToScreen on the final pass in your chain
   Find your OutlinePass instance (or whatever pass comes last in your post-processing pipeline) and set its renderToScreen property to true. This ensures the composer outputs the final processed frame to the screen. Here's how that might look:

   const outlinePass = new OutlinePass(
     new THREE.Vector2( window.innerWidth, window.innerHeight ),
     scene,
     camera
   );
   // Add this line to make the outline pass output to screen
   outlinePass.renderToScreen = true;
   composer.addPass( outlinePass );
   

   If you have other post-processing passes after OutlinePass (like a bloom pass or color correction), apply renderToScreen = true to the last one in the chain instead.

3. Double-check your RenderPass
   Make sure you haven't accidentally removed the initial RenderPass, which is required to render the base scene to a texture for post-processing passes to manipulate. Your composer setup should still start with something like:

   const renderPass = new RenderPass( scene, camera );
   composer.addPass( renderPass );
   

Final notes #

Once you make these changes, your outline effect should work perfectly without FXAA, and you'll retain full resolution. The OutlinePass only cares about depth and normal buffers to detect edges — it has no ties to anti-aliasing passes like FXAA.

内容的提问来源于stack exchange，提问作者Hermann Cain