Crisp lines on rendered view

Questions
,
1

I am rendering a model i imported from blender on my game made with threejs.
Bellow is the resulting model rendered:

image
image1920×983 138 KB

here is how i configure the renderer:
this._threeRenderer = new THREE.WebGLRenderer({antialias: true});
this._threeRenderer.setSize(window.innerWidth, window.innerHeight);
this._threeRenderer.autoClear = false;
this._threeRenderer.shadowMap.enabled = true;
this._threeRenderer.toneMapping = THREE.ReinhardToneMapping;
this._threeRenderer.toneMappingExposure = Math.pow( 0.42, 5.0 );

My problem:
I can see some dark lines on transitions between meshes that i thought should be smoother.

image

Is there a way to solve it?

2

Does the issue disappear when you remove the shadows? One of potential reasons could be the shadow map having too low resolution.

3

I made a test of removing the shadowMap
this._threeRenderer.shadowMap.enabled = false;

and it had no effect on this

4

renderer.setPixelRatio(window.devicePixelRatio);

5

Looks like an antialiasing issues, you can give WebGL2 multisampled renderbuffers a try, and set the samples count up to 8.

Or with post processing FXAA/SMAA.

And if you’re feeling adventurous, you can also try realism-effects.