effectComposer causes problems with line rendering

Questions
1

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

image
image1492×1084 32 KB

This is an example of the official website, the bottom is replaced by a cube, and the edge is added
image
image1902×1482 94.9 KB

Is there any way to avoid this problem？

2

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.

3

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);

image
image2054×476 8.25 KB

4

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
5

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

1 Like