GLSL -合并两个纹理

Question

我想显示任意三维网格与黑色边缘(黑色轮廓，黑色脊等)。因此，我创建了两个不同的纹理:一个颜色纹理和一个反别名边缘纹理。

下面是颜色纹理的一个示例：

以及相应的边缘纹理：

现在我想把这两种纹理合并起来。边缘纹理有一个白色背景，黑色/灰色边缘。我使用了fxaa，因此有些像素是灰色的。

我的问题是:如何正确地组合(混合)两种纹理？我也要申请fxaa的颜色纹理吗？

编辑:为了完整起见，这是fxaa-着色器代码：

    #version 330 core

in vec2 texPos;
out vec4 color;
uniform sampler2D colorTexture;
uniform float rt_w;
uniform float rt_h;

vec4 PostFX(sampler2D tex);
vec3 FxaaPixelShader(sampler2D tex, vec2 rcpFrame);  

void main()
{
    color = PostFX(colorTexture);
    //color = texelFetch(colorTexture, ivec2(gl_FragCoord), 0 );
}

vec4 PostFX(sampler2D tex)
{
  vec4 c = vec4(0.0);
  vec2 rcpFrame = vec2(1.0/rt_w, 1.0/rt_h);
  c.rgb = FxaaPixelShader(tex, rcpFrame);
  c.a = 1.0;
  return c;
}

vec3 FxaaPixelShader( 
  sampler2D tex, // Input texture.
  vec2 rcpFrame) // Constant {1.0/frameWidth, 1.0/frameHeight}.
{   
/*---------------------------------------------------------*/
    #define FXAA_REDUCE_MIN   (1.0/128.0)
    #define FXAA_REDUCE_MUL   (1.0/8.0)
    #define FXAA_SPAN_MAX     8.0
/*---------------------------------------------------------*/
    vec3 rgbNW = texture(tex, vec2(texPos) + (vec2(-1,-1) * rcpFrame.xy)).xyz;
    vec3 rgbNE = texture(tex, vec2(texPos) + (vec2(1,-1) * rcpFrame.xy)).xyz;
    vec3 rgbSW = texture(tex, vec2(texPos)+ (vec2(-1,1) * rcpFrame.xy)).xyz;
    vec3 rgbSE = texture(tex, vec2(texPos) + (vec2(1,1) * rcpFrame.xy)).xyz;
    vec3 rgbM  = texture(tex, vec2(texPos)).xyz;
/*---------------------------------------------------------*/
    vec3 luma = vec3(0.299, 0.587, 0.114);
    float lumaNW = dot(rgbNW, luma);
    float lumaNE = dot(rgbNE, luma);
    float lumaSW = dot(rgbSW, luma);
    float lumaSE = dot(rgbSE, luma);
    float lumaM  = dot(rgbM,  luma);
/*---------------------------------------------------------*/
    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
/*---------------------------------------------------------*/
    vec2 dir; 
    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));
/*---------------------------------------------------------*/
    float dirReduce = max(
        (lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL),
        FXAA_REDUCE_MIN);
    float rcpDirMin = 1.0/(min(abs(dir.x), abs(dir.y)) + dirReduce);
    dir = min(vec2( FXAA_SPAN_MAX,  FXAA_SPAN_MAX), 
          max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), 
          dir * rcpDirMin)) * rcpFrame.xy;
/*--------------------------------------------------------*/
    vec3 rgbA = (1.0/2.0) * (
        texture(tex, texPos.xy + dir * (1.0/3.0 - 0.5)).xyz +
        texture(tex, texPos.xy + dir * (2.0/3.0 - 0.5)).xyz);
    vec3 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * (
        texture(tex, texPos.xy + dir * (0.0/3.0 - 0.5)).xyz +
        texture(tex, texPos.xy + dir * (3.0/3.0 - 0.5)).xyz);
    float lumaB = dot(rgbB, luma);
    if((lumaB < lumaMin) || (lumaB > lumaMax)) return rgbA;
    return rgbB; 
}

Answer 1

最简单的解决方法就是乘法，它会给出黑色的边：

combinedColor = sceneColor * edgeRGB.r;

为了获得更多的控制，我会提出一些与@PaulHK在评论中提出的建议非常相似的建议：

float opacity = maxEdgeOpacity * (1. - edgeRGB.r);
combinedColor = mix(sceneColor, edgeColor, opacity);

edgeColor是您想要的边缘颜色，maxEdgeOpacity是指在0(根本没有边缘)到1(不透明边缘)之间的参数，您可以根据自己的喜好来选择。