effectComposer causes problems with line rendering

hello:
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
      });
      this.renderer.setPixelRatio(window.devicePixelRatio);

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.

https://threejs.org/examples/webgl2_multisampled_renderbuffers

1 Like

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