I’m trying to combine two examples, the webgpu volumetric cloud example with the webgpu selective bloom postprocessing example. But I run into shader errors (both GLSL and WGSL) when trying to render the VolumeNodeMaterial with an additional call to getTextureNode('bloomIntensity')
I am using bloomIntesity but it seems to occur with any outputNode name I use.
I have tried explicity writing a bloomIntensity value to the volumeNodeMaterial’s .mrtNode and have also tried manually setting it’s colorNode and fragmentNode outputs:
material.mrtNode = mrt({
bloomIntensity: float(0)
})
But have not had any success so far and cannot get the cloud to render in my scene. The GLSL shader error I encounter is:
WebGL warning: drawElementsInstanced:
Program has no frag output at location 1, the destination draw buffer has an attached image, and its color write mask is not all false, and DRAW_BUFFER1 is not NONE.
And with WGSL I see a more detailed error:
Color target has no corresponding fragment stage output but writeMask (ColorWriteMask::(Red|Green|Blue|Alpha)) is not zero.
- While validating targets[1] framebuffer output.
- While validating fragment state.
- While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor ""renderPipeline_VolumeNodeMaterial_20""]).
[Invalid RenderPipeline "renderPipeline_VolumeNodeMaterial_20"] is invalid.
- While encoding [RenderPassEncoder (unlabeled)].SetPipeline([Invalid RenderPipeline "renderPipeline_VolumeNodeMaterial_20"]).
- While finishing [CommandEncoder "renderContext_1"].
[Invalid CommandBuffer from CommandEncoder "renderContext_1"] is invalid.
- While calling [Queue].Submit([[Invalid CommandBuffer from CommandEncoder "renderContext_1"]])
Would this be worth opening an issue over? Am I missing an essential piece in my postprocessing implementation by trying to combine VolumeNodeMaterial with this simple postprocessing pipeline? Is there a way I can separate them out into their own postprocessing pass and leave them unaffected by the call to scenePass.getTextureNode('bloomIntensity)
?
My intention is not to add bloom to the VolumeNodeMaterial (though that would be cool,) Just to get them rendering in my scene which uses postprocessing for other elements.
const scenePass = pass( this, this.camera );
scenePass.setMRT( mrt( {
output,
bloomIntensity: float( 0 )
} ) );
const outputPass = scenePass.getTextureNode();
// This line seems to be the one causing issues
const bloomIntensityPass = scenePass.getTextureNode( 'bloomIntensity' );
//
const bloomPass = bloom( outputPass.mul( bloomIntensityPass ), 1, 0.01, 0.1);
this.postProcessing = new PostProcessing( this.renderer );
this.postProcessing.outputColorTransform = false;
this.postProcessing.outputNode = outputPass.add(bloomPass).renderOutput();