外发光作为 HLSL 着色器

Question

我仍在从事一个图像处理项目，该项目利用 HLSL 着色器添加 Photoshop 风格的滤镜，如投影、斜角等。现在我正在寻找一种在 HLSL 中实现外发光效果的方法。

我目前正在尝试以下想法：

1）缩放当前纹理以创建发光（参数：glowSize，设置轮廓的大小）

2) 水平模糊

3) 垂直模糊，将模糊颜色更改为发光颜色并在顶部添加原始纹理

我正在使用以下多通道 HLSL 着色器来渲染发光：

float4 PS_Scale(VS_OUTPUT IN) : COLOR0
{
    float2 tex = IN.texture0;
    float2 scaleCenter = float2(0.5f, 0.5f);
    float2 scaleTex = (tex - scaleCenter) * glowSize + scaleCenter;
    return tex2D(foreground, scaleTex);
}

float4 PS_GlowH(VS_OUTPUT IN) : COLOR0
{
    float2 Tex = IN.texture0;

    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    sum += tex2D(secondForeground, float2(Tex.x - 4.0*blur, Tex.y))*0.05;
    sum += tex2D(secondForeground, float2(Tex.x - 3.0*blur, Tex.y))*0.09;
    sum += tex2D(secondForeground, float2(Tex.x - 2.0*blur, Tex.y))*0.12;
    sum += tex2D(secondForeground, float2(Tex.x - blur, Tex.y))*0.15;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y))*0.16;
    sum += tex2D(secondForeground, float2(Tex.x + blur, Tex.y))*0.15;
    sum += tex2D(secondForeground, float2(Tex.x + 2.0*blur, Tex.y))*0.12;
    sum += tex2D(secondForeground, float2(Tex.x + 3.0*blur, Tex.y))*0.09;
    sum += tex2D(secondForeground, float2(Tex.x + 4.0*blur, Tex.y))*0.05;

    return sum;
}

float4 PS_GlowV(VS_OUTPUT IN) : COLOR0
{
    float2 Tex = IN.texture0;

    float4 sum = float4(0.0, 0.0, 0.0, 0.0);
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y - 4.0*blur))*0.05;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y - 3.0*blur))*0.09;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y - 2.0*blur))*0.12;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y - blur))*0.15;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y))*0.16;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y + blur))*0.15;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y + 2.0*blur))*0.12;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y + 3.0*blur))*0.09;
    sum += tex2D(secondForeground, float2(Tex.x, Tex.y + 4.0*blur))*0.05;

    float4 result = sum * opacity;
    result.rgb = float3(glowColor.r, glowColor.g, glowColor.b) / 255.0f;

    float4 src = tex2D(foreground, IN.texture0.xy);
    return result * (1-src.a) + src;
}

使用椭圆等简单形状时，此代码的结果看起来不错，但在文本上应用着色器时不起作用：

很明显，缩放存在问题。我不知道如何缩放原始纹理以将其用作轮廓。这甚至可能吗？还有其他想法如何在 HLSL 中实现外发光或轮廓过滤器吗？

提前谢谢你。

Answer 1

您的扩展策略无法在这种情况下应用。扔掉缩放步骤，只使用模糊步骤和合成步骤。它会起作用的。

让我向您展示模糊着色器如何创建发光效果。

A : 有原图。

B : 改变图像的颜色，并应用模糊着色器。

C : 将模糊后的图像与原始图像合并。

如果您想控制发光大小，请为此使用模糊步长的内核大小，而不是缩放。我使用高斯模糊来创建下面的图像。

• 内核大小 5

• 内核大小 10

• 内核大小 15