Three.js 锯齿 使用 EffectComposer 后处理

Question

在没有使用 EffectComposer 后处理的时候关于渲染器的锯齿问题，可以参考本站文章 Three.js 锯齿

FXAAShader 着色器通道设置

引入着色器文件 FXAAShader.js，目录位置 /examples/js/shaders/FXAAShader.js，该着色器主要功能是解决锯齿问题。

<script src="./examples/js/postprocessing/EffectComposer.js"></script>
<!-- EffectComposer依赖RenderPass.js、ShaderPass.js、CopyShader.js库 -->
...
<script src="/examples/js/shaders/FXAAShader.js"></script>

通过 ShaderPass 构造函数把 FXAAShader 着色器和 uniforms 构成的对象作为参数，创建一个锯齿通道 FXAAShaderPass，然后把锯齿通道插入到 composer 中。

// 渲染区域Canvas画布宽高度  不一定是全屏，也可以是区域值
var width = window.innerWidth; //全屏状态对应窗口宽度
var height = window.innerHeight; //全屏状态对应窗口高度
...
var composer = new THREE.EffectComposer(renderer);
...
// 去掉锯齿
var FXAAShaderPass = new THREE.ShaderPass(THREE.FXAAShader);
FXAAShaderPass.uniforms['resolution'].value.set(1 / width, 1 / height);
FXAAShaderPass.renderToScreen = true;
composer.addPass(FXAAShaderPass);
...
function render() {
  composer.render();
  requestAnimationFrame(render);
}

如果渲染区域不是全屏，canvas 画布有具体的尺寸

// 渲染区域Canvas画布宽高度  不一定是全屏，也可以是区域值
var width = 800; //非全屏状态对应窗口宽度
var height = 600; //非全屏状态对应窗口高度
...
FXAAShaderPass.uniforms['resolution'].value.set(1 / width, 1 / height);
F