Outer Glow come shader HLSL

Question

Sto ancora lavorando a un progetto di elaborazione delle immagini che utilizza gli shader HLSL per aggiungere filtri di Photoshop come drop shadow, smussatura e così via. Ora sto cercando un approccio per implementare un effetto bagliore esterno in HLSL.

Attualmente sto sperimentando con la seguente idea:

1) Scala la texture corrente per creare il bagliore (parametro: glowSize, che imposta la dimensione del contorno)

2) sfocatura orizzontale

3) sfocatura verticale, cambiamento di colore di sfocatura a brillare il colore e aggiungere texture originale sulla parte superiore

sto utilizzando il seguente Shader Multi passaggio HLSL per il rendering il bagliore:

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

Il risultato di questo codice sembra OK quando si utilizza forme semplici come un'ellisse, ma non funziona quando si applica lo shader del testo:

E 'ovvio che ci sia un problema con il scaling. Non ho idea di come ridimensionare la texture originale per usarla come contorno. È possibile? Altre idee su come implementare un filtro bagliore o contorno esterno in HLSL?

Grazie in anticipo.

Answer 1

La strategia di ridimensionamento non può essere applicata in questa situazione. Getta il gradino di ridimensionamento, usa solo i passaggi sfocatura e il passo di composizione. Funzionerà.

Lascia che ti mostri come lo sfocatura dello shader crea un effetto bagliore.

A: C'è un'immagine originale.

B: Cambia il colore dell'immagine, e applicare lo shader sfocatura.

C: Combinare l'immagine sfocata con l'immagine originale.

Se si desidera controllare una dimensione bagliore, utilizzare una dimensione del kernel di passi sfocatura per questo, invece di ridimensionamento. Ho usato sfocature gaussiane per creare immagini sottostanti.

• Kernel Size 5

• Kernel Size 10

• Kernel Dimensioni 15