在没有使用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