webgl - 双元混合扩展

双元混合（Dual-Source Blending）是一种高级混合技术，允许我们在片段着色器中输出两个颜色值，并在混合阶段同时使用这两个颜色进行混合操作。这种技术能够实现更复杂的混合效果，比传统的单源混合具有更大的灵活性。

双元混合在 webgpu 中默认支持。webgl 中，需要开启扩展。具体请看官方文档。下面举一个双元混合的例子

配置第二个颜色如何使用

在 blendFunc/blendFuncSeparate 配置第二个颜色如何使用。当前有以下的配置

[Exposed=(Window,Worker), LegacyNoInterfaceObject]
interface WEBGL_blend_func_extended {
    const GLenum SRC1_COLOR_WEBGL                   = 0x88F9;
    const GLenum SRC1_ALPHA_WEBGL                   = 0x8589;
    const GLenum ONE_MINUS_SRC1_COLOR_WEBGL         = 0x88FA;
    const GLenum ONE_MINUS_SRC1_ALPHA_WEBGL         = 0x88FB;
    const GLenum MAX_DUAL_SOURCE_DRAW_BUFFERS_WEBGL = 0x88FC;
};

下面举例说明如何设置

// 设置双元混合
gl.blendFunc(gl.SRC_COLOR, 0x88f9); // 0x88f9 代表第二个颜色

// 假设片段着色器输出的第一个颜色为 src0 ， 第二个颜色为 src1 ，dst 是已经有的颜色。那么最终生成的颜色为：
// finalColor.r = src0.r * src0.r + dst.r * src1.r
// finalColor.g = src0.g * src0.g + dst.g * src1.g
// finalColor.b = src0.b * src0.b + dst.b * src1.b
// finalColor.a = src0.a * src0.a + dst.a * src1.a

MAX_DUAL_SOURCE_DRAW_BUFFERS_WEBGL 表示支持的双源混合渲染目标的最大数量。即在片段着色器中，同时处理多个纹理。这个值通常是 1。

着色器写法

顶点着色器是常规写法。片段着色器需要定义两个输出颜色。如下所示

#version 300 es
precision highp float;

// 定义两个输出颜色
layout(location = 0, index = 0) out vec4 fragColor;
layout(location = 0, index = 1) out vec4 secondaryFragColor;

void main() {
    fragColor = vec4(0, 1, 0, 1);           // 第一个颜色
    secondaryFragColor = vec4(1, 0, 1, 0); // 第二个颜色（可以用于特殊效果）
}