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

Question

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

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

有人可以建议一个解决方案吗？

Answer 1

使用时THREE.FXAAShader，需要配置resolution各个着色器的uniform。这在官方示例中进行了演示，如下所示：

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