Postprocessing: OulineEffect doesn't work on A-Frame

[huhsame]

Hello,
I gave it a try to apply outline effect using your A-Frame example.

const outlineEffect = new PP.OutlineEffect(scene, camera, {
    blendFunction: 16,
    edgeStrength: 5,
    pulseSpeed: 0.0,
    resolution: 0.05,
    visibleEdgeColor: 0xffffff,
    hiddenEdgeColor: 0x22090a,
    blur: false,
    xRay: true,
    opacity: 1
});

smaaEffect.colorEdgesMaterial.setEdgeDetectionThreshold(0.05);
noiseEffect.blendMode.opacity.value = 0.6;
sepiaEffect.blendMode.opacity.value = 0.3;

let here = document.querySelector('#here').object3D
outlineEffect.setSelection(here.children);

const renderPass = new PP.RenderPass(scene, camera);
const effectPass = new PP.EffectPass(camera, outlineEffect,
    smaaEffect,noiseEffect, sepiaEffect, vignetteEffect);

effectPass.renderToScreen = true;
composer.addPass(renderPass);
composer.addPass(effectPass);

The changed part is only this code.
After adding outlineEffect, it doesn't appear.
Other effects still work.

In console, outlineEffect is registered.

How could I make it work?

Thank you.

[vanruesc]

Hi,

the effect is working as expected, it's just that the blend function you're using (screen) doesn't work well in bright scenes. You can achieve better results with the _alpha_ blend function: https://jsfiddle.net/9cntay46/

Also notice that I've moved the OutlineEffect into a seperate EffectPass so that the antialiasing can affect the generated outlines. The other effects (noise, sepia and vignette) have been moved together with the SMAAEffect. That way the EffectPass can make sure that those effects don't interfere with the antialiasing.

You can keep all effects in one EffectPass if you like, but then you'll see more jagged lines.

[huhsame]

Thank you for your kind reply :)