Three.js 使用FXAAShader消除混叠不'；线框看起来不好看

我基本上遵循示例，在

fxashader

的帮助下设置抗锯齿，如下所示：

this.composer=新的EffectComposer（this.renderer）；
const renderPass=新的renderPass（this.scene，this.camera）；
this.fxapass=新着色器类（fxashader）；
const pixelRatio=this.renderer.getPixelRatio（）；
const uniforms=this.fxapass.material.uniforms；
一致性['resolution'].value.x=1/（this.canvas.offsetWidth*pixelRatio）；
一致性['resolution'].value.y=1/（this.canvas.offsetHeight*pixelRatio）；
this.composer.addPass（renderPass）；
this.composer.addPass（this.fxapass）；

这就是我渲染线框的方式

const mat=新的三线基本材质({
颜色：0x000000，
线宽：2，
});
const geo=新的三线框几何体（this.geometry）；
this.wireframeGroup=新的三个.Group（）；
常量线框=新的三条线段（geo、mat）；
this.wireframeGroup.add（线框）；
const solid=new THREE.MeshBasicMaterial（{color:0xffffff}）；
const base=new THREE.Mesh（this.geometry，solid）；
this.wireframeGroup.add（基本）；
this.scene.add（this.wireframeGroup）；

但结果看起来有点“生气”

但是，当使用普通的

渲染器

（而不是

编写器

）时，抗锯齿似乎可以正常工作：

我做错了什么

---

这是你没有做错任何事的关键。FXAA在抗锯齿方面不如默认的

renderer.antialas=true

方法（通常默认为MSAA，但可能因GPU而异）好。threejs.org中的例子有点误导人，因为红色金字塔一直在运动，这不会让你的眼睛有机会看到锯齿。你可以读更多关于它的内容。好吧，这很有趣。那么，我是否有机会在使用composer时获得更好的抗锯齿效果呢？：）我发现使用作为一种快速、简单的supsersampling方法，像素数没有增加到原来的四倍，尽管它仍然需要更高的性能成本。如果您使用的是Webgl2，您也可以使用，它提供了与直接渲染到画布时相同的AA质量。MSAA是我所需要的，非常感谢！很高兴我能帮忙。只需确保你的受众拥有WebGL2支持，因为所有苹果产品和IE11仍然不支持WebGL2：你没有做错任何事。FXAA在抗锯齿方面不如默认的

renderer.antialas=true

方法（通常默认为MSAA，但可能因GPU而异）好。threejs.org中的例子有点误导人，因为红色金字塔一直在运动，这不会让你的眼睛有机会看到锯齿。你可以读更多关于它的内容。好吧，这很有趣。那么，我是否有机会在使用composer时获得更好的抗锯齿效果呢？：）我发现使用作为一种快速、简单的supsersampling方法，像素数没有增加到原来的四倍，尽管它仍然需要更高的性能成本。如果您使用的是Webgl2，您也可以使用，它提供了与直接渲染到画布时相同的AA质量。MSAA是我所需要的，非常感谢！很高兴我能帮忙。只需确保您的观众拥有WebGL2支持，因为所有苹果产品和IE11仍然不支持它：