'How to transition from a fragment shader to another using blending with WebGPU?

In order to animate a transition from an arbitrary fragment shader to another (without being able to modify the alpha value inside the shader), I was thinking on:

  1. render a first mesh with the first fragment shader
  2. render the same mesh with a different fragment shader and the following parameters
    • for depth testing, using the compare function wgpu::CompareFunction::LessEqual so I can draw on top of the previous rendered mesh
    • I use a custom blend color with set_blend_constant on the render pass which I gradually change, and use it with this blend state in my rendering pipeline:
wgpu::BlendState {
    color: wgpu::BlendComponent {
        src_factor: wgpu::BlendFactor::Constant,
        dst_factor: wgpu::BlendFactor::OneMinusConstant,
        operation: wgpu::BlendOperation::Add,
    },
    alpha: Default::default(),
};

It does work pretty well, however I am not an expert in OpenGL or graphical pipelines (rather a beginner), so maybe that is not the usual thing to do.

My issue is if my second shader (drawn on top of the first one) has some transparent colors. Since I already use the blending function to control an overall transparency, I do not know how to combine the actual transparent color coming from the second shader with the overall applied transparency.

OpenGL seems to have a GL_CONSTANT_ALPHA blending mode which, I think (but I may be wrong?), would combine the shader transparency and my overall transparency. But that does not exist in WebGPU, and actually it seems it does not exist in D3D neither according on this WebGPU GitHub issue.

How should I proceed to combine my overall transparency and the shader transparency?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source