threejs消除锯齿

Three.js锯齿(使用EffectComposer后处理)

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

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

…

通过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