2012-09-25 2 views
8

나는 HLSL 쉐이더를 사용하여 그림자, 빗면 등의 Photoshop 스타일 필터를 추가하는 이미지 처리 프로젝트를 계속 연구 중이다. 이제 HLSL에서 외부 광선 효과를 구현하는 방법을 찾고 있습니다.HLSL 쉐이더로서의 겉감

1) 빛 (매개 변수를 만들 수있는 현재의 텍스처 스케일 : 윤곽의 크기)

2) 블러 수평

을 설정 glowSize을, 나는 현재 다음과 같은 아이디어를 실험하고 있습니다

3) 블러 수직, 색상을 빛과 빛을 렌더링 나는 다음과 같은 멀티 패스 HLSL 쉐이더를 사용하고 최고

에 원래의 질감을 추가 할 흐림의 변화 색상 :

,369을
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; 
} 

이 코드의 결과는 타원 같은 간단한 모양을 사용할 때 좋아 보이지만, 텍스트 쉐이더를 적용 할 때 작동하지 않습니다

Output of the above shader

이 문제가와가 있음을 분명 스케일링. 윤곽선으로 사용하기 위해 원본 텍스처의 크기를 조정하는 방법에 대한 단서가 없습니다. 그게 가능한가? 다른 아이디어를 HLSL에서 외부 광선이나 윤곽 필터를 구현하는 방법은 무엇입니까?

미리 감사드립니다.

답변

10

이 상황에서는 확장 전략을 적용 할 수 없습니다. 축소 단계를 버리고 블러 단계와 작성 단계 만 사용하십시오. 효과가있을 것입니다.

흐림 효과 셰이더가 어떻게 광선 효과를 생성하는지 보여 드리겠습니다.

A : 원본 이미지가 있습니다.

Original Image

B : 화상의 색상을 변경하고, 흐림 셰이더를 적용한다.

Blurred Image

C : 원본 이미지 블러 이미지를 결합.

Result Image

당신이, 글로우 크기를 제어하는 ​​대신 스케일링, 그것에 대해 흐림 단계의 커널 크기를 사용합니다. 아래 이미지를 만들 때 가우시안 블러를 사용했습니다.

  • 커널 크기 5

Gaussian Size 5

  • 커널 크기 10

Gaussian Size 10

  • 커널 크기 15

enter image description here

+0

어떻게 위에 게시 한 것과 같은 흐림 쉐이더는 포토샵 빛 블렌딩 옵션과 유사한 결과를 제공 할 수 있습니까? – barnacleboy

+0

내 코드는 이미 그렇게하고 있지만 스케일링없이 광선 크기를 설정하는 방법을 알 수는 없습니다. 내 쉐이더에서 얻는 빛은 괜찮지 만, 스케일링 없이는 성장할 수 없다 ... – barnacleboy

+0

늦게 답장을 드려 죄송합니다. 답변을 업데이트 한 것을 보지 못했습니다. – barnacleboy