8

我仍在从事一个图像处理项目,该项目利用 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 中实现外部发光或轮廓过滤器?

先感谢您。

4

1 回答 1

9

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

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

A:有原图。

原始图像

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

图像模糊

C :将模糊图像与原始图像结合。

结果图像

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

  • 内核大小 5

高斯尺寸 5

  • 内核大小 10

高斯大小 10

  • 内核大小 15

在此处输入图像描述

于 2012-09-26T08:41:34.703 回答