Outer Glow als HLSL-Shader

Question

Ich arbeite noch an einem Bildbearbeitungsprojekt, das HLSL-Shader verwendet, um Photoshop-ähnliche Filter wie Schlagschatten, Abschrägung usw. hinzuzufügen. Jetzt suche ich nach einem Ansatz, um einen äußeren Glow-Effekt in HLSL zu implementieren.

Ich bin derzeit mit der folgenden Idee zu experimentieren:

1) die aktuelle Textur Skalieren Sie das Glühen (Parameter zu erstellen: glowSize, die die Größe des Umrisses)

2) Blur horizontal

setzt

3) Blur vertikal, Farbe ändern, der Unschärfe Farbe zu glühen und ursprüngliche Textur hinzufügen auf

ich bin für das Rendern das glühen der folgenden Multi-Pass-HLSL-Shader mit:

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; 
} 

Das Ergebnis dieses Code sieht ok, wenn einfache Formen wie eine Ellipse verwenden, aber funktioniert nicht, wenn die Shader auf Text anwenden:

Es ist offensichtlich, dass es ein Problem mit der Skalierung. Ich habe keine Ahnung, wie man die ursprüngliche Textur skaliert, um sie als Umriss zu verwenden. Ist das überhaupt möglich? Irgendwelche anderen Ideen, wie man einen äußeren Glühen- oder Umrißfilter in HLSL einführt?

Vielen Dank im Voraus.

Answer 1

Ihre Skalierungsstrategie kann in dieser Situation nicht angewendet werden. Werfen Sie den Skalierungsschritt weg, verwenden Sie nur Weichzeichnungsschritte und den Kompositionsschritt. Es wird klappen.

Lassen Sie mich Ihnen zeigen, wie der Unschärfe-Shader einen Leuchteffekt erzeugt.

A: Es gibt ein Originalbild.

B: Ändern der Farbe des Bildes, und die Unschärfe Shader anwenden.

C: Kombinieren Sie das unscharfe Bild mit dem Originalbild.

Wenn Sie eine glow Größe zu steuern, eine Korngröße von Unschärfe Schritte für das, statt Skalierung zu verwenden. Ich habe Gaußsche Unschärfen verwendet, um Bilder darunter zu erstellen.

• Kernel Größe 5

• Kernel Größe 10

• Kernel Größe 15