【threejs】webgl使用effectComposer时的抗锯齿

MSAA

需要在创建通道时新建 renderTarget，修改采样数实现，不支持中途修改采样数，但可以使用**Composer.reset(renderTarget)**直接替换RenderTarget实现

import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { WebGLRenderTarget } from "three";```let w = renderer.domElement.offsetWidthlet h = renderer.domElement.offsetHeightconst renderTarget = new WebGLRenderTarget(w, h, { samples: this.cof.msaa })const composer = new EffectComposer(renderer, renderTarget);const renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);const outputPass = new OutputPass();composer.addPass(outputPass);

fxaa/ssaa/taa

直接导入对应的pass然后添加到composer中即可，以fxaa为例,其他参考官网案例

	setFXAAEnable(enable = false) {if (enable) {if (!this.fxaaPass) {this.fxaaPass = new FXAAPass(this.renderer, this.composer.renderTarget1);this.composer.addPass(this.fxaaPass);}} else {if (this.fxaaPass) {this.composer.removePass(this.fxaaPass);this.fxaaPass = null;}}}

注意事项

composer中的抗锯齿pass会覆盖掉msaa的抗锯齿效果，建有当 MSAA 的sample>2时关闭其他抗锯齿
taa及其消耗性能，不建议将其自身的 sample>2