Post-Processing with EffectComposer Issue

There are a few issues in your code that might be causing the black texture when trying to use the EffectComposer's output:

Main Issues

1. Render Target Conflict: You're rendering to renderTarget0 and then immediately using the same target for the EffectComposer, which can cause conflicts.

2. Render Order: You're manually rendering to the render target and then calling the composer, which is likely overwriting your content or not working as expected.

3. Output Buffer Usage: Directly using composer.outputBuffer.texture might not be reliable as the EffectComposer manages its buffers internally.

Suggested Solution

Here's a modified approach:

JAVASCRIPTCopied
// Create two separate render targets
const renderTarget0 = useFBO(
    viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    {
      stencilBuffer: false,
      alpha: true,
      samples: 4,
    },
);

// Create a separate target for the composer output
const composerTarget = useFBO(
    viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
    {
      stencilBuffer: false,
      alpha: true,
    },
);

const composer = useMemo(() => {
    // Create composer with its own render target
    const effectComposer = new EffectComposer(gl, composerTarget.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, composerTarget.current]);

// useFrame loop
useFrame(() => {
  if (renderScene0.current.render) {
    // Let the composer handle the rendering
    composer.render();
    
    // Now you can use composerTarget.texture in your materials
  }
});

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

Additional Tips

1. Make sure your scene has objects that would actually trigger the bloom effect (bright enough to exceed the luminance threshold).

2. If you're using React Three Fiber, consider using the built-in post-processing support:

JAVASCRIPTCopied
import { EffectComposer, Bloom } from '@react-three/postprocessing'

// In your component
return (
  <>
    <EffectComposer>
      <Bloom 
        luminanceThreshold={0.4}
        luminanceSmoothing={0.2}
        intensity={3.0}
      />
    </EffectComposer>
    {/* Your scene */}
  </>
)

3. If you need to access the post-processed texture, you might need to use a custom pass that copies the final result to your target texture.

The EffectComposer is a powerful tool for post-processing, but it requires careful management of render targets and render order to work correctly.