Combining background render pass with outline pass

Questions
1

Greeting Folks,

I want to use a planar mesh with a custom shader in order to customize the background of my scene with a gradient. So far I could get that working as I wanted but I’m having trouble combining that with the OutlinePass.

here is some code fragment of my app:

createRenderer ({height, width}) {
    
    const renderer = new THREE.WebGLRenderer({
      powerPreference: 'high-performance',
      logarithmicDepthBuffer: false,
      physicallyCorrectLights: true,
      preserveDrawingBuffer: false,
      premultipliedAlpha: true,
      precision: "highp",
      gammaOutput: true,
      gammaFactor: 2.2,
      antialias: false,
      alpha: true
    })

    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setClearColor(0x4a484e, 1)
    renderer.setSize(width, height)
    renderer.gammaOutput = true
    renderer.gammaInput = true
    renderer.autoClear = false

    return renderer
  }

initializeComposer (width, height) {

    const composer = new EffectComposer(
      this.renderer)

    this.backgroundPass = new RenderPass(
        this.background.scene, 
        this.background.camera)

    composer.addPass(this.backgroundPass)

    this.renderPass = new RenderPass(
      this.scene, this.camera)

    composer.addPass(this.renderPass)
 
    this.outlinePass = new OutlinePass(
      new THREE.Vector2(width, height), 
        this.scene, this.camera)

    this.outlinePass.enabled = true
    this.outlinePass.clear = false

    composer.addPass(this.outlinePass)

    return composer
}

render () {
    this.renderer.clear(true, true, true)
    this.composer.render()
  }

When disabling the outlinePass it looks as expected, but when adding that pass all I get is a black scene. Is there a way to combine both background & outline or I need to create a custom outline as well? Maybe some tweaking in how buffers are cleared?

Screen Shot 2020-03-24 at 10.46.57

Screen Shot 2020-03-24 at 10.48.03
Screen Shot 2020-03-24 at 10.48.03962×912 164 KB

2

Any chances to demonstrate this with an editable live example?

4

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

5

here is a modified sample derived from the original outline pass sample.

So my goal there would be to make the background pass visible, currently I get a black background. Is there a way to make that pass show up and combine it with existing outline pass?

Thanks

6

Here is another version of the same sample, I now get the desired effect with the background but things go south when outline pass is activated…

I just don’t know when I should clear or not the renderer and how to combine those 3 passes to get correct result: background / main scene / outline

7

The sample is there now, any insights appreciated thanks.