OutlineEffect: outline is missing on parts of object.

[Joe Pea]

Is your feature request related to a problem?

Screenshot:

Describe the solution you'd like

We need an option to not combine outlines of multiple objects into one.

Three's OutlineEffect works as desired:

https://threejs.org/examples/?q=toon#webgl_materials_toon

Describe alternatives you've considered

Additional context

Can we use both Three's EffectComposer and postprocessing's EffectComposer at the same time? If so, then we can use OutlineEffect from Three's examples and use the rest from postprocessing.

[Raoul v. R.]

Hi, three's OutlineEffect can be used together with postprocessing since it's not actually a fullscreen pass.

[Jonathan Chemla]

Hi there! Is there a general rule of thumb for which threejs original postprocessing effects do work with your EffectComposer implementation?

I've tried to use the original OutlineEffect with your EffectComposer with no luck. The following code block sums-up the main points, but this lead to a silent fail - no errors printed in console, but canvas just stays with the DOM color and is not even cleared with the renderer clear color. Is this the way to import the original OutlineEffect?

import { EffectComposer, EffectPass, RenderPass, BlendFunction } from 'postprocessing';
import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect';

composer = new EffectComposer( renderer, { frameBufferType: HalfFloatType, stencilBuffer: true } );
composer.addPass( new RenderPass( scene, camera ));

// OutlineEffect works when outlineEffect.selection.add( c );
outlineEffect = new OutlineEffect( scene, camera, { edgeStrength: 3.0, visibleEdgeColor: 0x53fbff, hiddenEdgeColor: 0x53fbff, blur: true, xRay: false, blendFunction: BlendFunction.SCREEN } ); // SRC SCREEN
const outlinePass = new EffectPass( camera, outlineEffect );
composer.addPass( outlinePass );

// The below function is hooked to onModelLoad
scene.traverse( ( c ) => {
	if ( c.isMesh ) 
		if ( outlineEffect?.selection )
			outlineEffect.selection.add( c );
})

Note: here are my packages versions:

C:\Dev\project>npm list three
3d-tiles-renderer@0.3.23 C:\Dev\project
| `-- three@0.154.0 deduped
+-- postprocessing@6.34.2
| `-- three@0.154.0 deduped

+-- realism-effects@1.1.2 & n8ao@1.8.0 also here
| `-- three@0.154.0 deduped


C:\Dev\Iconem\3DTilesRendererJS>npm list postprocessing
3d-tiles-renderer@0.3.23 C:\Dev\project
+-- postprocessing@6.34.2
`-- realism-effects@1.1.2
  `-- postprocessing@6.34.2 deduped

[Raoul v. R.]

Despite its name, OutlineEffect is not an Effect. I can see how this can be confusing, but it's a completely different thing.

Passes from three are incompatible with postprocessing due to API differences.

[Jonathan Chemla]

Ok thanks for getting back so fast as always. I think I was mislead by your previous comment which should probably be three's OutlineEffect can't be used [...]

[Raoul v. R.]

No, that comment was correct. Here's how you'd use OutlineEffect from three:

const outlineEffect = new OutlineEffect(renderer);
let renderingOutline = false;

scene.onAfterRender = function() {

	if(renderingOutline) {

		return;

	}

	renderingOutline = true;

	outlineEffect.renderOutline(scene, camera);

	renderingOutline = false;

};

Note: that's the scene, you'd render using a RenderPass via postprocessing. Further passes have nothing to do with outlineEffect.

[Raoul v. R.]

Closing this as it seems to be resolved.