Outer Glow như bóng đổ HLSL

Question

Tôi vẫn đang làm việc trên một dự án xử lý hình ảnh, sử dụng các trình đổ bóng HLSL để thêm bộ lọc Photoshop-esque như đổ bóng, bevel và vân vân. Bây giờ tôi đang tìm kiếm một cách tiếp cận để thực hiện một hiệu ứng ánh sáng bên ngoài trong HLSL.

Tôi hiện đang thử nghiệm với các ý tưởng sau đây:

1) Quy mô kết cấu hiện tại để tạo ra ánh sáng (tham số: glowSize, thiết lập kích thước của đề cương)

2) Blur ngang

3) Blur dọc, thay đổi màu sắc mờ phát sáng màu và thêm kết cấu ban đầu trên

tôi đang sử dụng shader đa vượt qua HLSL sau để render ánh sáng:

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

Kết quả của mã này trông ok khi sử dụng hình dạng đơn giản như một hình elip, nhưng không hoạt động khi áp dụng đổ bóng trên văn bản:

Rõ ràng rằng có một vấn đề với mở rộng. Tôi không có bất kỳ đầu mối nào để chia tỷ lệ texture gốc để sử dụng nó như một phác thảo. Điều đó thậm chí có thể? Bất kỳ ý tưởng nào khác về cách triển khai bộ lọc ánh sáng hoặc phác thảo bên ngoài trong HLSL?

Cảm ơn bạn trước.

Answer 1

Không thể áp dụng chiến lược mở rộng của bạn trong trường hợp này. Vứt bỏ bước mở rộng quy mô, chỉ sử dụng các bước mờ và bước soạn thảo. Nó sẽ hoạt động.

Hãy để tôi chỉ cho bạn cách trình tạo bóng mờ tạo hiệu ứng ánh sáng.

A: Có hình ảnh gốc.

B: Thay đổi màu của hình ảnh và áp dụng trình đổ bóng mờ.

C: Kết hợp hình ảnh mờ với ảnh gốc.

Nếu bạn muốn kiểm soát một kích thước ánh sáng, sử dụng một kích thước hạt nhân của bước mờ cho rằng, thay vì mở rộng quy mô. Tôi đã sử dụng gaussian blurs để tạo hình ảnh bên dưới.

• Kernel Kích 5

• Kernel Kích 10

• Kernel Kích thước 15