Using Multiple Render Targets with EffectComposer

The error you're encountering is related to how multiple render targets (MRT) work with Three.js and EffectComposer. The issue is that when you're using multiple outputs in your first shader, your second shader also needs to have corresponding outputs.

The Problem

When using count: 2 in your render target, WebGL expects your fragment shader to output to both color attachments. Your first shader correctly defines two outputs, but it seems your second shader might not be properly configured to handle both outputs.

Solution Approaches

Option 1: Modify ShaderPass to Support Multiple Inputs/Outputs

You need to modify your second shader to also have two outputs, even if one is unused:

GLSLCopied
// In your second shader
layout(location = 0) out vec4 outputColor;
layout(location = 1) out vec4 unusedOutput; // This is required even if unused

void main() {
  // Your shader code
  outputColor = vec4(1.0); // Your actual output
  unusedOutput = vec4(0.0); // Dummy output
}

And make sure both textures are properly passed as uniforms:

JAVASCRIPTCopied
// Make sure your shader2 material has both uniforms defined
shader2.uniforms = {
  tInput: { value: null },
  tInput2: { value: null }
};

// Then set them
shaderPass2.uniforms.tInput.value = renderTarget.textures[0];
shaderPass2.uniforms.tInput2.value = renderTarget.textures[1];

Option 2: Custom Pass Instead of ShaderPass

The standard ShaderPass might not be fully compatible with MRT. Consider creating a custom pass:

JAVASCRIPTCopied
class MultiTargetPass extends Pass {
  constructor(shader, uniforms) {
    super();
    this.material = new ShaderMaterial({
      uniforms: uniforms,
      vertexShader: shader.vertexShader,
      fragmentShader: shader.fragmentShader
    });
    this.fsQuad = new FullScreenQuad(this.material);
  }

  render(renderer, writeBuffer, readBuffer) {
    // Set your uniforms here if needed
    this.fsQuad.render(renderer);
  }
}

Option 3: Use Separate Render Targets

If you're having trouble with MRT, you could use two separate render targets and passes:

JAVASCRIPTCopied
var renderTarget1 = new WebGLRenderTarget(w, h, { type: FloatType });
var renderTarget2 = new WebGLRenderTarget(w, h, { type: FloatType });

// Then use them separately in your passes

Final Note

The error "Active draw buffers with missing fragment shader outputs" specifically means that you've configured WebGL to render to multiple color attachments, but your fragment shader isn't outputting to all of them. Make sure all shaders in your pipeline that use MRT have outputs for each attachment.

If you continue having issues, you might need to implement this without EffectComposer, using a custom rendering pipeline that gives you more control over the MRT setup.