Combining background render pass with outline pass

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.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.backgroundPass = new RenderPass(


    this.renderPass = new RenderPass(

    this.outlinePass = new OutlinePass(
      new THREE.Vector2(width, height), 

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


    return composer

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

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

Any chances to demonstrate this with an editable live example?

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

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?


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

The sample is there now, any insights appreciated thanks.