Postprocessing: Can't get background and SelectiveBloom to work

[leefsmp]

Hi, it looks like a great library with a very nice surface API, unfortunately I can't get a basic example to work properly. I would like to have a background pass combined with main scene render pass and outline + bloom upon selecting a mesh.

Below is my test code, I can see the mesh and the outline is working upon selecting the sphere, however I can get the bloom effect to work and the background is plain black. Is there anything obviously stupid I am ding there?

    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
    import Background from './Background'

    import { 
      PerspectiveCamera, 
      MeshPhongMaterial,
      DirectionalLight,
      SphereGeometry,
      WebGLRenderer,
      AmbientLight,
      Clock, 
      Scene,
      Mesh
    } from "three"

    import { 
      SelectiveBloomEffect, 
      EffectComposer, 
      OutlineEffect, 
      EffectPass, 
      RenderPass 
    } from "postprocessing"

    export default class TestViewer {

      constructor (container) {   
        super()
        this.container = container
      }

      start () {

        this.container.addEventListener(
          'click', this.onClick)

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

        const height = this.container.offsetHeight
        const width = this.container.offsetWidth

        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(width, height)
        renderer.autoClear = false

        this.container.appendChild(
          renderer.domElement)

        this.composer = new EffectComposer(renderer)
        this.camera = new PerspectiveCamera(
          40, width / height, 1, 10000)
        this.camera.position.set(20, 20, 20)

        this.controls = new OrbitControls(
          this.camera, renderer.domElement)

        this.scene = new Scene()
        this.clock = new Clock()

        const ambientLight = new AmbientLight(0x212121)
        const mainLight = new DirectionalLight(0xff7e66, 1.0)
        const backLight = new DirectionalLight(0xff7e66, 0.1)

        mainLight.position.set(14.4, 2, 20)
        backLight.position.copy(mainLight.position).negate()

        this.scene.add(ambientLight, mainLight, backLight)

        const geometry = new SphereGeometry(5, 24, 24)

        const material = new MeshPhongMaterial( {
          flatShading: true,
          transparent: true,
          color: 0x00ffff,
          opacity: 0.7
        })

        const mesh = new Mesh(geometry, material)
        this.scene.add(mesh)

        this.background = new Background(renderer)

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

        backgroundPass.clear = true

        this.composer.addPass(backgroundPass)

        const scenePass = new RenderPass(
          this.scene, this.camera)

        scenePass.clear = false  

        this.composer.addPass(scenePass)

        this.selectiveBloom = new SelectiveBloomEffect(
          this.scene, this.camera)

        this.composer.addPass(new EffectPass(
          this.camera, this.selectiveBloom))

        this.outline = new OutlineEffect(
          this.scene, this.camera)

        this.composer.addPass(new EffectPass(
          this.camera, this.outline))

        this.render()
      }

      render = () => {
        requestAnimationFrame(this.render)
        this.composer.render(
          this.clock.getDelta())
      }

      getIntersects (event, selectables) {

        const pointer = event.changedTouches 
          ? event.changedTouches[0]
          : event

        const rect = this.container.getBoundingClientRect()

        const pos = new THREE.Vector3(
          (pointer.clientX - rect.left) / rect.width  * 2 - 1,
          -(pointer.clientY - rect.top)  / rect.height * 2 + 1,
          0.5)

        const raycaster = new THREE.Raycaster()  

        raycaster.setFromCamera(
          pos, this.camera)

        return raycaster.intersectObjects(
          selectables, 
          true)
      }

      onClick = (event) => {
        const intersects = this.getIntersects(
          event, this.scene.children)
        const nodes = intersects.length
          ? [intersects[0].object]
          : [] 
        console.log(nodes)
        this.selectiveBloom.selection.set(nodes)
        this.outline.selection.set(nodes)
      }
    }

Thanks for any insights!

[vanruesc]

Hi,

I didn't see any obvious issues at first glance. Will look a bit deeper in a bit.

[vanruesc]

Alright, so I don't know what this.background = new Background(renderer) does, but if you use a normal background via scene.background the effects work as expected. Here's a complete example to play around with: https://codesandbox.io/s/selective-bloom-outline-dez2r

[leefsmp]

Thanks, there was something missing from my code which is quite relevant to make the selective bloom to work:

      // Enable lights for selective bloom.
      lights.forEach((l) => l.layers.enable(selection.layer));

However I'm not able to get background yet. Ideally I would like to be able to render a custom scene and use that as background inside a RenderPass as it will contain a custom shader that needs updating at each render pass. I know it's doable in plain three.js. Here is a demo.

[vanruesc]

So like this https://codesandbox.io/s/selective-bloom-outline-7rubg?

I'll add a note to the docs regarding layers and lights for selective bloom.

[leefsmp]

Some mistake in my shader, got it working fine now. So I have two RenderPass (background, main scene, with clear=false). Then the effects, all good. Thanks a lot for quick response!

[vanruesc]

Cool, glad I could help!