ThreeJS Node Material and MRT Rendering Issue

Based on the errors you're encountering, it appears you're facing an issue with Multiple Render Targets (MRT) when combining the WebGPU volumetric clouds with selective bloom postprocessing.

Understanding the Issue

The core problem seems to be that the VolumeNodeMaterial doesn't properly support the MRT setup required for the selective bloom effect. When you call getTextureNode('bloomIntensity'), the shader expects a corresponding output at location 1, but the VolumeNodeMaterial doesn't provide this output.

The errors indicate:

1. In WebGL: No fragment output at location 1 despite having a draw buffer attached
2. In WGSL: No corresponding fragment stage output for the color target

Possible Solutions

1. Separate Rendering Passes

One approach would be to separate the volumetric clouds into their own rendering pass, independent of the selective bloom pipeline. This way, the clouds wouldn't need to output to the bloomIntensity target.

JAVASCRIPTCopied
// First pass - render scene with selective bloom
const scenePass = pass(this, this.camera);
scenePass.setMRT(mrt({
  output,
  bloomIntensity: float(0)
}));
const outputPass = scenePass.getTextureNode();
const bloomIntensityPass = scenePass.getTextureNode('bloomIntensity');
const bloomPass = bloom(outputPass.mul(bloomIntensityPass), 1, 0.01, 0.1);

// Second pass - render clouds separately
const cloudPass = pass(this, this.camera);
// Configure cloud pass without MRT requirements
const cloudOutput = cloudPass.getTextureNode();

// Combine outputs
this.postProcessing = new PostProcessing(this.renderer);
this.postProcessing.outputColorTransform = false;
this.postProcessing.outputNode = outputPass.add(bloomPass).add(cloudOutput).renderOutput();

2. Modify VolumeNodeMaterial to Support MRT

If you want to keep everything in a single pass, you'll need to modify the VolumeNodeMaterial to properly support the MRT setup:

JAVASCRIPTCopied
// Modify the VolumeNodeMaterial to support MRT
const material = new VolumeNodeMaterial();

// Set up the material's fragment outputs to include bloomIntensity
material.fragmentNode = fragment(material.fragmentNode);
material.mrtNode = mrt({
  output: material.colorNode, // Your existing color output
  bloomIntensity: float(0)    // Add bloomIntensity output
});

3. Custom Render Pass for Clouds

Another approach is to create a custom render pass specifically for the clouds that doesn't interfere with the selective bloom pipeline:

JAVASCRIPTCopied
// Set up main scene with selective bloom
const scenePass = pass(this, this.camera);
scenePass.setMRT(mrt({
  output,
  bloomIntensity: float(0)
}));
const outputPass = scenePass.getTextureNode();
const bloomIntensityPass = scenePass.getTextureNode('bloomIntensity');
const bloomPass = bloom(outputPass.mul(bloomIntensityPass), 1, 0.01, 0.1);

// Create a separate renderer for clouds
const cloudRenderer = new WebGPURenderer();
cloudRenderer.setSize(window.innerWidth, window.innerHeight);
// Render clouds to a separate target
const cloudRenderTarget = new WebGPURenderTarget(window.innerWidth, window.innerHeight);
cloudRenderer.setRenderTarget(cloudRenderTarget);
cloudRenderer.render(cloudScene, camera);

// Combine the outputs in the final pass
const finalOutput = outputPass.add(bloomPass).add(texture(cloudRenderTarget.texture)).renderOutput();
this.postProcessing.outputNode = finalOutput;

Is This a Bug?

This appears to be more of a compatibility issue between different rendering techniques rather than a bug. The selective bloom example uses MRT to output both color and bloom intensity, while the volumetric clouds example likely doesn't support this MRT configuration.

If you're unable to resolve this with the approaches above, it might be worth opening an issue on the Three.js GitHub repository to request better integration between these features or to get more specific guidance from the maintainers.