OutlinePass is not rendered to scene in THREE.js

Question

I followed these examples to make the outline for objects when they are selected: https://threejs.org/examples/?q=out#webgl_postprocessing_outline https://github.com/scqilin/three-OutlinePass

No error is found, yet outline does not appear when the object is selected. The highlightSelectedObject function is correcly triggered when an object is selected. selectedObjects is not null.

In my case, THREE.js is installed in the project file. Scene, camera and renderer are instantiated elsewhere.

import * as THREE from "../../build/three.module.js";
import {OutlinePass} from "../../examples/jsm/postprocessing/OutlinePass.js";
import {RenderPass} from "../../examples/jsm/postprocessing/RenderPass.js";
import {EffectComposer} from "../../examples/jsm/postprocessing/EffectComposer.js";

Function:

function highlightSelectedObject(selectedObjects) {
    if (selectedObjects != null) {

        const scene = project.currentScene.scene;
        const camera = project.currentScene.camera;
        const renderer = project.renderer;

        var composer = new EffectComposer(renderer);
        var renderPass = new RenderPass(scene, camera);
        var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, selectedObjects);
        outlinePass.renderToScreen = true;

        outlinePass.selectedObjects = selectedObjects;

        composer.addPass(renderPass);
        composer.addPass(outlinePass);

        const params = {
            edgeStrength: 2,
            edgeGlow: 1,
            edgeThickness: 1.0,
            pulsePeriod: 0,
            usePatternTexture: false
        };

        outlinePass.edgeStrength = params.edgeStrength;
        outlinePass.edgeGlow = params.edgeGlow;
        outlinePass.visibleEdgeColor.set(0xffffff);
        outlinePass.hiddenEdgeColor.set(0xffffff);

        composer.render(scene, camera);
    }
}

The path to THREE.js should be correct. Is it a problem with render?

Answer 1

I had a similar issue. Upon looking at another example, I found that setting outlinePass.renderToScreen = true allowed it to work. It might not be there depending what version of the the outlinePass.js you are using. I looked at the code on the deployed example and it is there.