effectComposer causes problems with line rendering

composer.render() will cause problems with line rendering. For example: AxesHelper, EdgesGeometry

This is an example of the official website, the bottom is replaced by a cube, and the edge is added

Is there any way to avoid this problem?

When using post-processing in WebGL 1, anti-aliasing (MSAA) does not work. Besides, you might have not configured the pixel ratio in your app.

renderer.setPixelRatio( window.devicePixelRatio );

Depending on your device, this will however have an impact on the performance.

I set the pixel ratio and webgl2, there are some effects, but there are still some problems。

      const canvas = document.createElement("canvas");
      const context = canvas.getContext("webgl2", {
        alpha: false,
        antialias: true
      this.renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        context: context

Using WebGL 2 does not automatically multisample render targets. You have to use a special class for this. Check out the official example for more information.


1 Like

Thank you very much, I solved my problem.The performance is not very good, 60FPS => 25FPS :sob: