When I used effectcomposer, I found that the edges of my model were blurred

Questions
1

hi,
I found that the edges of my gltf model were jagged and blurred.

Then I looked up a lot of code.

Finally, when I remove the code of effectcomposer, the model is normal.
my code:

 this.composer = new EffectComposer(this.renderer);

        const renderPass = new RenderPass(this.scene, this.camera);
        this.composer.addPass(renderPass);

        this.outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),
            this.scene, this.camera);
        this.composer.addPass(this.outlinePass);
        this.outlinePass.pulsePeriod = 1.5;
        this.outlinePass.edgeThickness = 2.5;
        this.outlinePass.edgeGlow = 1;
        this.outlinePass.edgeStrength = 3;
        this.outlinePass.visibleEdgeColor.set('#f6c204');

        this.effectFXAA = new ShaderPass(FXAAShader);
        this.effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
        this.composer.addPass(this.effectFXAA);

What should I do? I don’t want to lose this post-processing effect
help me, thank you !

2

I don’t know, but from EffectComposer.js was deleted code for good color gradient

const parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType
 };

image
image1190Ă—540 87.4 KB

3

this shouldn’t be needed any longer, you can use MSAA.

const target = new WebGLRenderTarget(size.width, size.height, {
  type: HalfFloatType,
  format: RGBAFormat,
  encoding: gl.outputEncoding,
})
target.samples = 8 // <---- 🙏

new EffectComposer(gl, target)

or is this only about OutlinePass? that one will blur selected edges.

4

yes.
Fxaashader’s anti aliasing treatment causes some blurring in the model.
and
const target = new WebGLRenderTarget… …

this code is very good!
thank you!

5

Try set FXAA pass before outline pass

1 Like
6

I think the better choice is:

from webgl2

1 Like