Using EffectComposer with multiple passes causes saw tooth near geometry intersections

Questions
, ,
1

I found out the artifacts disappear in Chrome when I turn off hardware acceleration. I’m using Ubuntu Linux + RTX2080 Super (nvidia-driver-450 https://launchpad.net/~graphics-drivers/+archive/ubuntu/ppa)

I’m not sure how to explain this situation. It seems the “quality” is really low. It seems to me there are sort of layers along the camera’s z axis, deciding whether a horizontal plane should render the object above or below the intersection.

I am not able to find anything similar online. Perhaps I don’t know the keywords I need to look up the problem.

I only followed the source code of: https://threejs.org/examples/#webgl_postprocessing_outline to try to add an outline effect to my project. Has anyone encountered this problem before? How can I fix this?

All the models are loaded from GLTF files exported from Blender. The rock in the middle of the river is about 20 units in length. I hope these don’t matter.

Videos:

With just one pass: render pass. i.e. what it looked like before I use EffectComposer

image
image1202×710 81.2 KB

With more than one pass: (RenderPass, then OutlinePass, then ShaderPass). Anything more than just the RenderPass results in the following.

image
image992×774 90.6 KB

With more than one pass but camera is normal to my object’s surface. Looks absolutely fine.

image
image996×1124 94.9 KB

Tilting the camera a bit results in really thick bands of saw tooth/artifact. The bands increases, but bunches up tighter the more I tilt the camera. Until parallel to the object’s surface, the banding got bunched up so much they disappear/appear unnoticeable.

image
image1060×1174 96.8 KB

Tilting a bit but zoomed out. This worsens the banding effect. Zooming closer to the surface reduces the artifact.

image
image604×644 64.1 KB

2

Hi, welcome to the forum! :wave:

Unfortunately at the moment I don’t know what’s the cause, however you did say the effect changes depending on camera position/orientation. I think it would be helpful if you could provide a video of the problem, moving the camera around (using any screen capturing software of your liking) OR, even better - share your project files as a codepen or a github repository.

3

@DolphinIQ Thanks for replying. I’ve just uploaded 2 short videos of the effect. Links in original post. I’m working on a minimal reproducible example.

1 Like
4

Hello,

is there any solution about it? I have the same problem.
I saw that turning off Chrom’s hardware acceleration fixes it (as @danvim said at the edition of his post), but is there an alternative?

5

Hi.

I just encountered this error. For me this was because my Perspective camera had no near and far parameters in constructor:

this.camera = new PerspectiveCamera();

in example there is

camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );

0.1 is still problem for me. It works fine with

near >= 10

Hope this helps to someone.

6

In three.js 1 unit = 1 meter