如何在使用EffectComposer时启用抗锯齿功能

Question

当使用three.js中的EffectComposer时，似乎本机抗锯齿丢失了。渲染器设置为抗锯齿：true;然而，结果充满了janky边缘。

我尝试使用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