Depth Bias Blending 머티리얼 표현식

개요

DepthBiasedBlend 는 바이어스(bias, 한 쪽으로 치우치게 만드는) 값에 따라 렌더되는 소스 오브젝트와 목적지 버퍼의 콘텐츠를 블렌딩(혼합)하는 머티리얼 표현식입니다. 최종 색의 결정 과정에 있어 내부적인 계산 과정은 다음과 같습니다:

if (DestinationDepth < SourceDepth)
{
    FinalColor = DestinationColor;  // 소스 픽셀 그리지 않음
}
else
if (SourceDepth < (DestinationDepth - ((1 - Bias) * BiasScale)))
{
    FinalColor = SourceColor;  // 소스 픽셀 그림
}
else
{
    FinalColor = LinearInterpolation(DestinationColor, SourceColor,
                     ((DestinationDepth - Source Depth) / ((1 - Bias) * BiasScale)));
}

이런 종류의 블렌딩이 가장 확실하게 사용되는 곳은, 스프라이트 파티클이 지오메트리와 교차할 때 발생하는 거친 에지를 제거할 때입니다. 이런 상황에 DepthBiasBlend 표현식을 사용하는 것을 데모로 보도록 하겠습니다.

예제

이 예제는 새로운 머티리얼 표현식의 장점을 시연하기 위해 간단한 파티클 스프라이트 이미터를 사용합니다. 파티클 시스템에 대해서는 이 페이지를 참고하시기 바랍니다: 파티클 토픽

소스 이미지와 이미터

그림 1: 사용된 소스 텍스처 (오른쪽은 이미지의 알파)

문제 예제

파티클 스프라이트에 적용될 단순 머티리얼은 다음과 같습니다:

그림 2: '표준' 스프라이트 머티리얼

캐스케이드 뷰포트에서 적용시켜 보면 파티클 시스템이 멋져 보입니다. 그러나 이미터를 레벨에다 놓았을 때 문제가 있습니다. 파티클이 레벨의 지오메트리를 관통할 때마다 두꺼운 에지가 나오는 것입니다. 결과는 아래와 같습니다:

그림 3: 표준 파티클/지오메트리 교차 - 샷 1

그림 4: 표준 파티클/지오메트리 교차 - 샷 2

그림 5: 표준 파티클/지오메트리 교차 - 샷 3

스프라이트가 레벨 지오메트리를 관통할 때 나타나는 거친 에지에 주목!

새로운 방법

파티클 스프라이트에 적용 가능한 새 머티리얼은 DepthBiasBlend 표현식을 활용하며, 아래와 같이 표현됩니다:

그림 6: DepthBiasBlend 기반 머티리얼

DepthBiasBlend 은 TextureSample 표현식에서 파생되므로, 소스 텍스처 설정은 일반 브라우저에서 텍스처를 선택한 뒤, 표현식에 우클릭, "현재 텍스처 사용"을 선택하면 됩니다.

Coord 입력은 표준 Texture Coordinate 옵션입니다. 파티클의 경우는 첫 UV 세트가 활용될 수 있게 하기 위해 '비워' 두어야 합니다.

Bias 입력은 소스 픽셀 바이어스를 조달합니다. 오브젝트가 관통하면서 발생하는 전환의 '블렌딩'을 위해 위의 식에 연결되는 값입니다. 단일 부동소수점 값으로 나오는 표현식 조합값이 될 수도 있습니다. 이 경우 소스 이미지의 알파 채널이 사용됩니다. 즉 각 픽셀에서 소스 텍스처가 샘플된 알파값을 갖게 되며, 이를 바이어스값으로 활용하게 된다는 뜻입니다.

DepthBiasBlend 표현식의 BiasScale 파라미터를 통해서 효과를 좀 더 미세하게 저어하기 위한 바이어스값 조절이 가능합니다. 이 경우 효과를 보다 선명하게 보이기 위해 바이어스값 스케일 값을 비교적 높게 (200.0) 잡았습니다.

머티리얼의 BlendMode는 텍스처가 opaque(불투명)이라도 translucent(반투명)으로 설정해야 합니다. (주: 나중에 바뀔 수도 있지만, 이 문서가 저작되는 시점에서는 그렇습니다.) 이는 해당 머티리얼을 사용하는 오브젝트가, 대상 버퍼에 혼합할 값을 가지고 있을 때 렌더링되도록 보장하기 위해서입니다. 불투명 텍스처를 혼합하려는 경우, BlendMode를 Translucent로 하고 값이 1.0인 Constant 표현식을 Opacity 채널에 물려주면 됩니다.

[*중요 알림*: 현재 이 표현식은 썸네일 렌더링이나 미리보기 창에 표시되지 않을 것입니다. 현재 클리어가 발생하는 방식 때문입니다. 보고된 문제점으로 데이터베이스에 있습니다.]

이미터에 새 머티리얼이 적용된 결과는 다음과 같습니다:

그림 7: 새로운 파티클/지오메트리 교차 - 샷 1

그림 8: 새로운 파티클/지오메트리 교차 - 샷 2

그림 8: 새로운 파티클/지오메트리 교차 - 샷 3

아래는 두 버전 이미터의 건별 비교 스크린샷입니다:

그림 9: 건별 비교

사용 주의:

- DepthBiasBlend 머티리얼 표현식은 싸지 않습니다. 현재 추가되는 명령 수는 15개이니, 이걸 활용하는 머티리얼을 만들 때 고려하시기 바랍니다.

중요 업데이트

(곧 엔진에서 사라지게 될) DepthBiasBlend 위치에다 DepthBiasedBlend 모듈을 사용해야 합니다. 새 표현식의 장점은 더이상 TextureSample 표현식에서 파생되지 않는다는 점입니다. RGB 및 알파값은 표현식에 대한 입력입니다. 이를 통해 다양한 샘플 (FlipBook, Movie, ParticleSubUV 등) 표현식에 대한 특수 Depth Blend 표현식을 구현할 필요가 없어졌습니다.

알파 입력은 알파 출력으로 통과됩니다. 알파 입력 표현식이 없을 경우, 출력은 1.0f 값이 됩니다. 바이어스값은 빈 입력에 대해서 1.0f 가 됩니다. 이는 불투명 텍스처의 경우에 좋습니다. 아래 표는 새로운 표현식으로 구현한 불투명 머티리얼의 모양입니다:

그림 10: 불투명 DepthBiasedBlend 머티리얼

위에서 반투명 머티리얼의 예제를 새 표현식으로 구현한 모양은 이와 같습니다:

그림 11: 반투명 DepthBiasedBlend 머티리얼