three.js - 如何在使用 EffectComposer 时启用抗锯齿

Question

当使用来自three.js 的EffectComposer 时，原生抗锯齿功能似乎丢失了。渲染器设置为 antialiasing: true;然而，结果充满了笨拙的边缘。

我尝试使用 FXAA 着色器减少锯齿，但它只是没有原生抗锯齿提供的质量。

有人可以提出解决方案吗？

Answer 1

使用时 THREE.FXAAShader ，需要配置resolution各个着色器的统一。这在 official example 中得到了证明。并这样做:

var fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );

var pixelRatio = renderer.getPixelRatio();
var uniforms = fxaaPass.material.uniforms;

uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );

您必须在设置后处理和 resize 中执行此代码事件监听器。否则，如果用户调整浏览器窗口的大小，FXAA 将中断。
three.js R102