[SOLVED] Outline Pass Individual Geometry rather than whole scene

Questions
1

I have been playing with the outline pass post processor, which is great.

I know there are several approaches but this seemed like an easy way add outlines to all the objects in my scene, and for the most part it does exactly what I want…

however is there anyway means of changing the outline behaviour to be on a per model basis (?maybe not the right term), if you look at the attached screenshot, you can see the blue cube doesn’t have an outline when on top of another object.which has the outlines.

image

so i would ideally like it like this…

image

that was achieved with 2 outline passes, which I don’t believe is feasible when I may have 100s of objects, also it isnt perfect (you will see overlapping artifacts

I appreciate i may be using this for unintended purposes (seems to be aimed for selection) and I have tried to look everywhere and only found other approaches however since this is so easy to use, thought it was worth an ask. Thanks in advance

2

Can you post a demo that shows how you’ve achieved the outcome of the first screenshot?

3

Excuse my ignoreance, but not sure how I would do a fiddle and link to the appropirate files? I know theres a CDN for the main three but cant find one for the other files (see below)

its a basic scene with two cubes with the following js files included

CopyShader.js
FXAAShader.js
EffectComposer.js
RenderPass.js
ShaderPass.js
OutlinePass.js

and then i have made a effect composer

composer = new THREE.EffectComposer( renderer );
var renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );

and then added the outline pass

outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );

outlinePass.edgeStrength = Number( 10 );
outlinePass.edgeGlow = Number( 0);
outlinePass.edgeThickness = Number( 1 );
outlinePass.pulsePeriod = Number( 0 );
outlinePass.visibleEdgeColor.set( "#ffffff" );
outlinePass.hiddenEdgeColor.set( "#000000" );
outlinePass.selectedObjects = selectedObject;
composer.addPass( outlinePass );

   effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
    effectFXAA.renderToScreen = true;
    composer.addPass(effectFXAA);
    composer.addPass(outlinePass);

Not sure if that helps at all! i would happily create a fiddle if i can figure out how to include the required js files?

1 Like
4

You can use the following base URL: https://threejs.org/examples/

For example:

https://threejs.org/examples/js/shaders/CopyShader.js
https://threejs.org/examples/js/postprocessing/ShaderPass.js

Have a look at this fiddle to see how the URL is included.

5

thanks for your guidance, heres a fiddle

6

I’ve checked your fiddle and i don’t think it’s possible to achieve your desired results in a single pass. The overlapping blue part (over the red box) is not detected as a part of the outline of both objects.

Since OutlinePass is computational expensive, I don’t recommend to run it twice.

7

Ok thanks, thats what I thought, its a shame, as the effect is really nice and much neater than other approaches

thanks for your time

8

Is it possible to achieve this by modifying OutlineEffect somehow?