Strange looking effect when using OutlinePass

Questions
,
1

In my scene, I am using an OutlinePass to indicate selected objects.
Selected objects should be visualized with a red border.

outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera)
outlinePass.visibleEdgeColor = new THREE.Color(0xff0000)
outlinePass.hiddenEdgeColor = new THREE.Color(0xff0000)
outlinePass.edgeStrength = 10
outlinePass.edgeThickness = 1
outlinePass.edgeGlow = 0

However, this outline is only really as I intend it to look in front of the scene background. In front of other objects, a faded color is used which I don’t want:

See the edge, the red arrow is pointing to in below screenshot. I want the whole white plane to be outlined with a red line. However, in front of the green plane, it gets this faded color.

image
image803×428 45.9 KB

In my understanding, the OutlinePass is setup correctly, however it might be interfering with anything else. Any idea, where this could be coming from?

I’m using Three r157

2

I’m not sure, but possibly from here: https://github.com/mrdoob/three.js/blob/5642032303ada3bb3578c029cc6d602fe63733c3/examples/jsm/postprocessing/OutlinePass.js#L641

1 Like
3

Ok, thanks a lot! This was indeed a good hint.
Setting outlinePass.overlayMaterial.blending = THREE.CustomBlending did the trick! :+1: