【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.offsetWidth
let h = renderer.domElement.offsetHeight
const 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
更多推荐
所有评论(0)