Why does the edge line alias when I use effectcomposer

the edge lines break into aparts

Postprocessing disables the default antialiasing - you’ll need to add an antialiasing effect pass (there are usually several to choose from, depending on which postprocessing library you’re using.)

how to use the default antialiasing when use effectcompoer from threejs

It’s not possible, postprocessing would not work on a frame that’s rendered with antialiasing. As above - you’d need to apply AA pass in your postprocessing pipeline.

I figure it out,

const renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, { 
      samples: 4,  
      type: THREE.HalfFloatType } 

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

create a new renderTarget with samples and type option will solve the alias problem

1 Like

You can use composer with antialiased rendertargets just fine now. WebGL2.0 is pretty much universal at this point.