PostProcessing on renderTarget

[aronanol45]

Hi guys, currently trying to apply some bloom effect on a renderTarget, but get only black texture.
My goal is to apply the bloom effect on my renderTarget, retrieve the post-processed texture, and pass the texture to a custom shader to do some transition between many renderTargets.

The project is pretty huge, I tried to isolate the code here :

// renderTarget which works
const renderTarget0 = useFBO(
    viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    {
      stencilBuffer: false,
      alpha: true,
      samples: 4,
    },
);


const composer = useMemo(() => {
    const effectComposer = new EffectComposer(gl, renderTarget0.current);
    effectComposer.setSize(
      viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
      viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    );


    const renderPass = new RenderPass(scene, firstCameraRef.current);
    effectComposer.addPass(renderPass);

    const bloomPass = new SelectiveBloomEffect(scene, firstCameraRef.current, {
      blendFunction: BlendFunction.ADD,
      mipmapBlur: true,
      luminanceThreshold: 0.4,
      luminanceSmoothing: 0.2,
      intensity: 3.0,
    });
    effectComposer.addPass(bloomPass);

    return effectComposer;
}, [gl, scene, firstCameraRef.current, renderTarget0.current]);


// useFrame loop 
useFrame(() => {
 	gl.autoClear = true;
        if (renderScene0.current.render) { // render only if needed
  	        gl.setRenderTarget(renderTarget0);
  	        gl.render(scene, firstCameraRef.current);
  	        // try to add bloom effect on scene 0
  	        composer.render();
	}
})


return (
<mesh position={[0, 2, -20]} scale={2}>
    <boxGeometry />
    <meshBasicMaterial color={"red"}map={composer.outputBuffer.texture} />
 </mesh>)

That’s what I currently get :