Combining different objects with different effectComposers

Questions
,
1

Hello!

I’m really new at three.js and I’m playing around with it trying to create a vaporwave scene.

I’m want to have bloom and glitch pass on the sun and just bloom on the grid but I’m a bit lost at how I could do that since it seems the effectComposer (or is it the renderPass?) overwrites the transparency of the background. The way I tried to achieve this effect is to have each object on a separate layer and switching the camera before rendering the next effectComposer.

It works well when i use the sun layer and basic renderer :

Screen Shot 2022-04-19 at 20.16.08
Screen Shot 2022-04-19 at 20.16.081427×709 301 KB

but not when i try to render the plane with the bloom composer as well :

Screen Shot 2022-04-19 at 20.58.17
Screen Shot 2022-04-19 at 20.58.171423×698 201 KB

Here is the code corresponding to the effecComposers for the first screenShot.

//BLOOM
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.8, 0, 0)
bloomPass.renderToScreen = true

const bloomComposer = new EffectComposer(renderer)
bloomComposer.setSize(window.innerWidth, window.innerHeight)

bloomComposer.addPass(renderScene)
bloomComposer.addPass(bloomPass)
//GLITCH
const glitchPass = new GlitchPass()
glitchPass.renderToScreen = true

const glitchComposer = new EffectComposer(renderer)
glitchComposer.setSize(window.innerWidth, window.innerHeight)

glitchComposer.addPass(renderScene)
glitchComposer.addPass(bloomPass)
glitchComposer.addPass(glitchPass)

const tick = () => {
	controls.update()
	requestAnimationFrame(tick)

	renderer.autoClear = false
	renderer.clear()

	camera.layers.set(1)
	glitchComposer.render()
	renderer.clearDepth()
	camera.layers.set(0)

	renderer.render(scene, camera)
}
tick()

Could you help me figure what I’m doing wrong or the best way to do this? I’ve read a lot of threads in this forum and stackoverflow but I’m too inexperienced to really understand all the subtleties.

Thanks a lot!