使用3通道带Alpha的遮罩混合纹理时出现问题

我有一张带透明通道的纯色PNG，用于后续在Shader中替换为纹理。我利用每个颜色通道控制对应纹理的混合量，例如用红色通道控制沙子纹理，蓝色通道控制水纹理，已实现基础效果，但存在瑕疵——在水和草同时绘制的像素中，沙子效果过强。

我使用的Shader代码如下：

vec4 board = texture(texture_3, texture_position);

vec4 ground_color = texture(texture_4, texture_position_gamma);
color = ground_color;

if (board.g > 0) {
    vec4 grass_color = texture(texture_5, texture_position_delta);
    color = mix(color, grass_color, max(0, board.a - board.r - board.b));
}
if (board.r > 0) {
    vec4 sand_color = texture(texture_6, texture_position_gamma);
    color = mix(color, sand_color, max(0, board.a - board.g - board.b));
}
if (board.b > 0) {
    vec4 water_color = vec4(0.1, 0.6, 0.6, 1);
    color = mix(color, water_color, board.a * board.b);
}

你的实现思路本身是可行的，但混合逻辑确实存在明显问题，这也是导致水+草区域沙子效果异常的核心原因：

1. 混合权重与通道控制逻辑脱节
   你设定红通道控制沙子，但沙子的混合权重却是max(0, board.a - board.g - board.b)——这个逻辑完全不参考红通道的值。在水（蓝通道>0）和草（绿通道>0）同时存在的区域，只要alpha减去绿、蓝通道后还有剩余（比如alpha=1，g=0.3，b=0.3，结果为0.4），沙子就会强制混入，完全违背你“红通道控制沙子”的设计初衷。

2. 多纹理混合规则不一致
   水的混合权重是board.a * board.b，这是正确的“通道值×整体强度”逻辑，但草和沙子的权重计算却用了完全割裂的规则，导致整体混合逻辑混乱，出现非预期的叠加效果。

3. 分支判断的精度隐患
   直接用board.g > 0这类判断，容易因为纹理采样的精度误差触发不必要的分支，建议添加极小阈值（比如0.0001）来避免这种情况。

修正后的两种可行方案 #

方案1：归一化权重混合（适合多纹理平等叠加）

让每个通道直接对应纹理的混合权重，同时归一化保证权重总和不超过1，避免颜色异常：

vec4 board = texture(texture_3, texture_position);
vec4 ground_color = texture(texture_4, texture_position_gamma);

// 提取各通道的有效权重，用alpha做整体强度缩放
float grass_weight = board.g * board.a;
float sand_weight = board.r * board.a;
float water_weight = board.b * board.a;

// 归一化权重，防止总和超过1导致颜色过亮
float total_weight = grass_weight + sand_weight + water_weight;
if(total_weight > 0.0001){
    grass_weight /= total_weight;
    sand_weight /= total_weight;
    water_weight /= total_weight;
}

// 按权重混合所有纹理
vec4 grass_color = texture(texture_5, texture_position_delta);
vec4 sand_color = texture(texture_6, texture_position_gamma);
vec4 water_color = vec4(0.1, 0.6, 0.6, 1);

vec4 color = ground_color * (1.0 - total_weight) 
            + grass_color * grass_weight 
            + sand_color * sand_weight 
            + water_color * water_weight;

方案2：层级叠加混合（适合有覆盖关系的纹理，比如水在最上层）

如果你的场景中水需要覆盖在其他纹理之上，可以保留叠加逻辑，但修正每个纹理的权重与对应通道绑定：

vec4 board = texture(texture_3, texture_position);

vec4 color = texture(texture_4, texture_position_gamma);

// 草：用绿通道×alpha作为混合权重
if (board.g > 0.0001) {
    vec4 grass_color = texture(texture_5, texture_position_delta);
    color = mix(color, grass_color, board.g * board.a);
}
// 沙子：用红通道×alpha作为混合权重
if (board.r > 0.0001) {
    vec4 sand_color = texture(texture_6, texture_position_gamma);
    color = mix(color, sand_color, board.r * board.a);
}
// 水：用蓝通道×alpha作为混合权重，放在最后保证覆盖层级
if (board.b > 0.0001) {
    vec4 water_color = vec4(0.1, 0.6, 0.6, 1);
    color = mix(color, water_color, board.b * board.a);
}

额外优化建议 #

• 若你的PNG是纯色带透明通道，建议将其转为单通道纹理或直接用uniform传递权重，减少不必要的纹理采样开销。
• 尽量避免在Shader中使用分支判断，方案1的无分支混合逻辑性能更优。

内容的提问来源于stack exchange，提问作者ellipticaldoor