Improved Alpha-Tested Magnification for Vector Textures and Special Effects

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

Improved Alpha-Tested Magnification for Vector Textures and Special Effects

Chris Green

Valve

그림 1: 64x64 텍스쳐로 인코딩된 벡터 아트. 

(a) 단순한 바이리니어( bilinear ) 필터링.

(b) 알파 테스팅.

(c) 우리의 디스턴스 필드( distance field ) 기법.

Abstract

굴곡지고 선형적인 요소로 조합된 상형문자( glyph )에 대한 진보된 렌더링을 허용하는 단순하고 효율적인 기법을 제시합니다. 디스턴스 필드( distance field )를 고해상도 이미지로부터 생성한 다음, 저해상도 텍스쳐의 채널에 저장합니다. 가장 단순한 케이스에서, 이 텍스쳐는 현대 GPU 들의 알파 테스팅( alpha testing )과 alpha-thresholding 을 사용해서 커스텀 쉐이더를 사용하지 않고 단순하게 렌더링될 수 있습니다. 이는 가장 낮은 사양의 3D 그래픽스 하드웨어 상에서도 사용될 수 있는 기법입니다.

프로그래밍가능한 쉐이딩을 사용하면, 이 기법은 다양한 특수 효과 렌더링을 수행하기 위해서 확장될 수 있는데, 이는 소프트 엣지( soft edges ), 아웃라인( outlining ), 드랍 쉐도우( drop shadow ), 멀티코어 이미지( multi-cored images ), 샤프 코너( sharp corner ) 등을 포함합니다.

1 Introduction

고품질 실시간 3D 렌더링에서는, 텍스쳐 맵의 저장소를 위해서 이용할 수 있는 제한된 메모리를 효율적으로 사용하는 것이 중요합니다. 컴퓨터 게임과 같은 상호작용가능한 응용프로그램에서는, 사용자가 보통 텍스쳐 매핑된 오브젝트를 매우 확대된 상태에서 볼 수 있는데, 이는 큰 해상도로 저장된 텍스쳐 맵을 요구합니다. 그렇지 않으면 그런 시점에서 볼 때 그림 1a 에서 보이는 것처럼 텍스쳐가 뭉개져 보이게 됩니다.

텍스쳐 맵들이 텍스트( text ), 신호( signs ), UI 요소와 같은 "라인 아트( line art )" 이미지들을 표현하기 위해 사용될 때, 이는 납득할만하게 보이기 위한 매우 큰 해상도의 텍스쳐를 사용할 것을 요구하게 됩니다.

이 문제는 나뭇잎( foliage )과 같은 복잡한 오브젝트들을 위한 알파 테스팅되는 이미지 기반 임포스터들에서도 나타납니다. 커버리지( coverage )로부터 파생된 알파채널을 가진 텍스쳐들이 하드웨어의 바이리니어 필터링을 사용해 확대될 때, 그림 1b 에서 보이는 것처럼 보기싫은 "구불구불한 모양( wiggles )"이 나타납니다. 왜냐하면 커버리지 함수( coverage function )는 선형적이지 않기 때문입니다.

이 챕터에서, 우리는 그러한 텍스쳐가 매우 확대될 때 발생하는 아티팩트들( artifacts )을 최소화하기 위해 알파 테스트된 텍스쳐 맵을 생성하고 렌더링는 단순한 기법을 제시합니다. 우리는 컴퓨터 게임 문맥에서의 몇 가지 사용 시나리오들을 설명할 것인데, 3D 렌더링과 UI 요소들을에 대해 모두 다릅니다. 우리의 기법은 그림 1c 에서 보이듯이 고품질 벡터 아트 렌더링을 생성할 수 있습니다.

2 Related work

텍스쳐 매핑 그래픽스 하드웨어를 사용해 벡터 그래픽스를 정확하게 렌더링하기 위한 많은 기법들이 개발되어 왔습니다. [Firsken et al. 2000] 에서는 2차원 상형문자와 3차원 입체 지오메트리( solid geometry )를 표현하기 위해 디스턴스 필드를 사용했습니다. 지역적 다양성( local variations )에 기반해 디스턴스 필드의 해상도를 순응적으로( adaptively ) 제어하기 위해서 쿼드트리( quadtrees )와 옥트리( octrees )가 사용되었습니다. 그러한 오브젝트에 대한 GPU 렌더링에 대해서는 논의된 바가 없기는 하지만, GPU 프로그래밍 모델의 일반성( generality )에서의 최근의 진보는 이 기법을 DirectX10 을 사용해서 구현할 수 있도록 해 줍니다[Blythe 2006].

[Sen 2004] 와 [Tumblin and Choudhury 2004] 에서는 제어가능한 방식으로 샤프 엣지를 추가하기 위해 텍셀 샘플들간의 보간을 제어하기 위한 부가적 데이터가 텍스쳐 맵에 추가됩니다. 라인 아트 이미지와 하드 엣지( hard edge )를 포함하는 사진( photographic ) 텍스쳐들은 모두 그들의 표현을 사용해서 GPU 상에서 직접적으로 렌더링되었습니다.

[Loop and Blinn 2005] 에서는 음의 3차 커브들( implicit cubic curves, 역주 : implicit curve )을 사용하여 상형문자의 경계( boundaries )를 모델링했습니다. 이 때 smooth resolution-independent curves 를 사용하는 벡터 텍스처를 렌더링하기 위해 GPU 를 사용했습니다.

[Qin et al. 2006] 에서는 거리 기반 표현이 사용되었는데, 각 보로노이 영역( Voronoi region, 역주 : Voronoi diagram )에 영향을 주는 "특징( feature )"들의 미리 계산된 집합들을 사용합니다. 이러한 특징들이 주어지면, 픽셀 쉐이더를 사용해 해석적으로( analytically ) 정확한 거리 값을 계산합니다.

이진 on/off 결과를 산출하기 위해 픽셀쉐이더로부터 알파 값 출력이 thresholding 되는 알파-테스팅은 재구축( reconstructed ) 텍스쳐에서 샤프 엣지를 생성하기 위해서 게임에서 광범위하게 사용됩니다. 불운하게도 일반적으로 이를 위한 소스로서 사용되는 이미지는 서브텍셀( subtexel ) 수준에서 바이리니어 보간을 사용해서 재구축되기에는 적절하지 않은 "커버리지" 정보를 포함하기 때문에,  이 텍스쳐들이 확대될 때 축에 정렬되지 않은 엣지들에 대해서는 보통 보기싫은 아티팩트들이 보이게 됩니다.

3 Representation and Generation

스토리지를 최소한으로 유지하면서 단순한 알파 테스팅의 아티팩트들을 극복하기 위해서, 우리는 벡터 텍스처를 디스플레이하기 위한 기법을 찾아냈으며, 다음과 같은 것들을 수행할 수 있습니다 :

• 프로그래밍가능한 쉐이딩을 수행할 수 없는 시스템을 포함하는 다양한 수준의 그래픽 하드웨어에서 작동합니다.
• 표준 텍스쳐 매핑에 가깝거나 가능한한 빠르게 실행됩니다.
• 모든 현대 GPU 들에서 바이리니어 보간 표현의 이점을 취합니다.
• 적은 변경만을 동반하는 이미 존재하는 복잡한 쉐이더 시스템[Mitchell et al. 2006] 내부의 함수입니다.
• 약간의 명령만을 픽셀 쉐이더에 추가하므로, 벡터 텍스쳐는 명령 제한을 초과하지 않고 현존하는 쉐이더들 내에서 사용될 수 있습니다.
• 벡터 형식으로 제공되는 입력 이미지를 요구하지 않습니다.
• 현존하는 저해상도 8 비트 텍스쳐 포맷을 사용합니다.
• 알파 테스팅되는 임포스터 이미지들을 직접적으로 대체하기 위해서 사용됩니다.

우리는 고르게 샘플링되는 부호있는 디스턴스 필드 표현( uniformly-sampled signed-distance field representation )을 구현하기로 했습니다. 그리고 거리 함수는 8 비트 채널에 저장됩니다. 이렇게 함으로써, 우리는 내장된 바이리니어 텍스쳐 보간의 이점을 취할 수 있으며, 이는 서브 텍셀들 간의 거리와 매우 고해상도 이미지에 대한 piecewise-linear approximation 을 정확하게 재구축하기 위해 모든 현대 GPU 에서 사용될 수 있습니다. 이 표현은 다른 접근법들과 비교할 수 있게 표현할 수 있는 특징 토폴로지( topology of features )의 관점에서는 제약이 있기는 합니다만, 그것의 성능, 단순함, 우리의 현존하는 렌더링 시스템과의 통합의 편의성들을 고려했을 때 Valve 의 소스 엔진을 위한 올바른 선택이라는 점에서 만족스럽습니다.

기반 아트의 벡터 기반 표현으로부터의 적절한 거리 데이터를 생성하는 것이 가능하지만, 대신에 우리는 고해상도 소스 이미지로부터 저해상도 디스턴스 필드를 생성하기로 했습니다. 일반적인 경우에는, 4096x4096 이미지를 사용해서 그림 2 에서 보이는 것과 같은 64x64 의 저해상도 이미지로 디스턴스 필드 텍스쳐를 생성합니다.

그림 2: (a) 고해상도( 4096x4096 ) 이진 입력이

(b) 저해상도( 64x64 ) 디스턴스 필드를 계산하기 위해 사용됨.

텍스쳐 생성 시점에, 생성기( generator )는 입력으로 고해상도 이진 텍스쳐를 사용하는데, 여기에서 각 텍셀은 "in" 이나 "out" 으로 식별됩니다. 사용자는 대상 해상도와 "spread factor" 를 설정하는데, 이는 0 에서 1 범위로 8 비트 텍스쳐 채널에 부호있는 디스턴스를 매핑하는데 사용됩니다. Spread 요소는 드랍 쉐도우나 아웃라인으로서의 특수 렌더링 속성과 같은 효과의 영역( domain )을 제어하는 데도 사용되는데, 이에 대해서는 4.2 섹션에서 논의하도록 하겠습니다.

각 출력 텍셀들의 경우, 디스턴스 필드 생성기는 고해상도 이미지 내의 관련 픽셀들이 "in" 인지 "out" 인지를 결정하게 됩니다. 부가적으로 생성기는 반대 상태에 있는 가장 가까운 텍셀에 대한 ( 텍셀 단위의 ) 2D 디스턴스를 계산합니다. 이는 주어진 픽셀 주변의 지역적 이웃들을 검사함으로써 수행됩니다. 우리의 단순한 "brute-force" 검색보다 부호있는 디스턴스 필드를 계산하기 위한 더 효율적이고 복잡한 알고리즘들이 있기는 하지만, 8 비트 채널에 제한된 디스턴스 범위가 들어가야 하기 때문에, 적은 이웃들만이 검색되어야 합니다. 이 단순한 brute-force 기법을 위한 실행시간은 무시할만 합니다.

이 부호있는 디스턴스가 계산되고 나면, 우리는 그것을 0 에서 1 범위로 매핑하는데, 0 은 최대 음수 거리를 의미하며, 1 은 최대 양수 거리를 의미합니다. 텍셀값이 0.5 이면 정확한 엣지의 위치를 표현합니다. 그러므로 0.5 는 일반적으로 알파 문턱값( threshold ) 값으로 사용됩니다.

4 Rendering

가장 단순한 경우에, 결과 디스턴스 필드 텍스쳐는 말 그대로 지오메트리가 알파 테스팅을 사용해서 렌더링되는 모든 문맥에 사용될 수 있습니다. Under magnification, this will produce an image with high-resolution ( albeit, aliased ) linear edge, free of the false curved contours ( see Figure 1b ) common with alpha-tested textures generated by storing and filtering coverage rather than a distance field. 디스턴스 필드 표현을 사용하면, 우리는 그냥 알파 테스트 문턱값을 0.5 로 설정해야 합니다. 비용이 많이 드는 정렬 단계를 회피하기 위해서 특정 프리미티브 클래스들을 위해 알파 블렌딩 대신에 알파 테스트를 사용하는 것이 매우 일반적이기 때문에, 이 기법은 성능 부하없이 가시 품질을 즉각적으로 개선할 수 있습니다.

그림 3: 팀 포트리스 2 의 서피스에 적용된 128x128 크기의 

"무단 침입 금지( No trespassing )" 디스턴스 필드 이미지.

그림 3 에서 우리는 팀 포트리스 2 에서 벽 표면에 데칼로 렌더링된 "No Trespassing" 이라는 표지판의 128x128 디스턴스 필드 표현을 소개합니다. 이 데칼의 월드 공간에서 보이는 해상도는 매우 높으며, 확대를 한다고 해도 게임내에서 항상 고해상도가 유지될 것입니다. 우리는 다음 섹션에서 이러한 특별한 데칼 예제를 언급할 것입니다. 왜냐하면 우리는 이러한 방식으로 우리의 벡터 아트를 표현할 때 우리에게 이용가능한 다른 증진법( enhancements )들에 대해 논의할 것이기 때문입니다.

4.1 Antialiasing

만약 주어진 응용프로그램에 대해 알파 블렌딩이 실용적이라면, 같은 디스턴스 필드 표현은 커스텀 프래그먼트 쉐이더를 요청하는 비용으로 그냥 알파 테스팅을 사용하는 것보다 더 좋은 품질의 렌더링을 생성하는데 사용될 수 있습니다. 

그림 4: 256x256 크기의 "No Trespassing" 표지판을 확대.

왼쪽은 하드 엣지 오른쪽은 소프트 엣지.

그림 4 는 거슬리는 에일리어싱 픽셀 엣지를 부드럽게 만드는 단순한 방법을 설명합니다. 두 개의 디스턴스 문턱값인 Dist_min 과 Dist_max 가 정의되며, 쉐이더는 smoothstep() 함수를 사용해 두 값 사이의 디스턴스 필드 값을 매핑합니다. 픽셀당 스크린공간 도함수( per-pixel screen-space derivatives )를 지원하는 그래픽스 하드웨어상에서, 디스턴스 필드의 텍스쳐 좌표에 대한 도함수는 벡터 아트의 엣지들을 적절히 안티 에일리어싱하기 위해 소프트 영역의 너비를 조절하기 위해 사용될 수 있습니다[Qin et al. 2006]. 텍스처가 축소되면, 에일리어싱 아티팩트를 감소시키기 위해서 소프트 영역을 넓게 만들 수 있습니다. 부가적으로 알파 테스팅되는 나뭇잎을 렌더링할 때, 알파 문턱값은 거리를 사용해 증가될 수 있습니다, 그래서 LOD 튐( popping )을 피하기 위해 거리가 멀어질 수록 나뭇잎은 점진적으로 사라게 됩니다.

4.2 Enhanced Rendering

래스터 하드웨어를 사용해 상쾌한( crisp ? ) 고해상도 안티에일리어싱 벡터 아트를 제공하는 것과 더불어, 우리는 아웃라이닝, 글로우( glows ), 드랍 쉐도우 등과 같은 다른 효과들을 취하기 위해서 디스턴스 필드를 사용하는 추가적인 조작을 할 수 있습니다. 물론 이러한 모든 연산들은 디스턴스 필드에 대한 함수이므로, 그것들은 쉐이더 파라미터를 사용해 동적으로 제어될 수 있습니다.

4.2.1 Outlining

그림 5: 픽셀 쉐이더에 의해 추가된 아웃라인.

두 개의 사용자 지정 디스턴스 값들 사이의 모든 텍셀의 색상을 변경함으로써, 그림 5 의 데칼 예제에서 보이듯이 픽셀 쉐이더를 사용함으로써 단순한 텍스쳐 공간 아웃라이닝이 적욛될 수 있습니다. 확대했을 때 생성된 아웃라인은 꽤 고품질의 엣지를 가지게 됩니다. 물론 아웃라인의 색상과 너비는 그냥 픽셀 쉐이더 상수를 변경함으로써 동적으로 다양해질 수 있습니다.

4.2.2 Glows

그림 6: 픽셀 쉐이더에 의해 추가된 무섭게 빛나는 "외곽 글로우( outer glow )".

알파값이 0.5 와 0 의 문턱값 사이라면, 그림 6 에서 보이듯이 smoothstep 함수를 사용해서 "헤일로( halo )"를 대체하기 위해서 smoothstep 함수를 사용할 수 있는데, 그것의 색상값은 픽셀 쉐이더 상수로부터 옵니다. 이 효과의 동적 속성은 특히 게임에서 강력합니다. 왜냐하면 디자이너들이 글로우 파라미터들을 애니메이션 시킴으로써 특정 게임 상태에 기반해 게임 월드 내의 특정 벡터 조각에 대해 주의( attention )를 줄 수 있기 때문입니다( 체력을 깜박거린다거나 출구 표지를 강조한다거나 하는 등 ).

4.2.3 Drop Shadows

그림 7: 픽셀 쉐이더에 의해 추가된 소프트 드랍 쉐도우.

그림자의 방향, 크기, 투명도, 색상은 동적으로 제어가능함.

단일 거리에 대한 단순한 함수들인 효과들과 더불어, 우리는 그림 7 에 보이는 드랍 쉐도우나 다른 비슷한 효과들을 생성하기 위해 텍스쳐 좌표 오프셋을 사용하여 디스턴스 필드에 대한 이차 룩업( second lookup )을 사용할 수 있습니다.

이러한 단순한 2D 효과들과 함께, 디스턴스 필드를 다른 방식으로 해석해서 디자이너에게 더 많은 옵션들을 제공할 수 있습니다.

4.3 Sharp corners

그림 8: 64x64 로 인코딩된 코너.

왼쪽은 하나의 디스턴스 필드.

오른족은 두 개의 디스턴스 필드에 대한 AND.

앞의 다른 예제들에서 살펴 보았듯이, 단일 부호있는 디스턴스를 사용하여 엣지를 인코딩하는 것은 디스턴스 필드의 해상도가 감소할수록 코너를 "rounds off"합니다[Qin et al. 2006]( 역주 : 코너를 둥글둥글하게 만든다는 의미인듯...). 예를 들어, 그림 2a 의 문자 G 의 하드 코너는 그림 5, 6, 7 에서 보이는 것처럼 더욱 round off 됩니다.

그러나 텍셀과 겹치는 다른 엣지를 표현하기 위해 텍스쳐의 한 채널 이상을 사용함으로써 샤프 코너가 유지될 수 있습니다. 예를 들어, 두 개의 채널을 사용할 때, 두 엣지가 겹치는 것은 픽셀 쉐이더에서 논리 AND 연산을 수행함으로써 정확하게 표현될 수 있습니다. 그림 8 에서, 우리는 이러한 두 개의 엣지 디스턴스들을 단일 텍스쳐의 red 와 green 채널에 저장했으며, 잘 보존된 점모양의 코너가 결과로서 산출됩니다. 이것은 우리 텍스트 상에서 샤프 코너를 표현하기를 원한다면 "No Trespassing" 표지판 상에서도 같은 기법이 적용될 수 있습니다. 현재 상태로는, 우리는 이 텍스트의 둥글둥글한 스타일을 좋아하며, 이 데칼과 팀 포트리스 2 에서의 다른 데칼들을 위해서는 단일 디스턴스 필드를 사용했습니다.

5. Conclusion

이 챕터에서, 우리는 효율적인 벡터 텍스쳐 시스템을 설명했는데, 이는 Half-Life 2 시리즈, Counter-Strike: Source, Day of Defeat : Source 와 같은 게임을 개발하는 데 사용했던 Source 게임 엔진에 통합되었습니다. 이 벡터 텍스쳐 기법은 앞으로 나올 팀 포트리스 2 에도 사용되었는데, 전통적인 텍스쳐 매핑과 비교했을 때 중요한 성능 저하는 없습니다. 우리는 벡터로 인코딩된 이미지들을 우리의 1인칭 3D 뷰의 3D 지오메트리 상에 매핑되는 텍스쳐나 2D 스크린 오우버레이( overlay )들을 위해서 사용할 수 있습니다. 이 기능은 가시 품질을 매우 증진시키며 텍스쳐 메모리를 절약해 줍니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

float distAlphaMask = baseColor.a;   if( OUTLINE &&     ( distAlphaMask >= OUTLINE_MIN_VALUE0 ) &&     ( distAlphaMask <= OUTLINE_MAX_VALUE1 ) ) {     float oFactor = 1.0 ;     if( distAlphaMask <= OUTLINE_MIN_VALUE1 )     {         oFactor = smoothstep( OUTLINE_MIN_VALUE0, OUTLINE MIN VALUE1, distAlphaMask );     }     else     {         oFactor = smoothstep( OUTLINE_MAX_VALUE1, OUTLINE_MAX_VALUE0, distAlphaMask );     }     baseColor = lerp( baseColor, OUTLINE_COLOR, oFactor ); }   if( SOFT_EDGES ) {     baseColor.a *= smoothstep( SOFT_EDGE_MIN, SOFT_EDGE_MAX, distAlphaMask ); } else {     baseColor.a = distAlphaMask >= 0.5; }   if( OUTER_GLOW ) {     float4 glowTexel = tex2D( BaseTextureSampler, i.baseTexCoord.xy + GLOW_UV_OFFSET );     float4 glowc = OUTER_GLOW_COLOR * smoothstep( OUTER_GLOW_MIN_DVALUE, OUTER_GLOW_MAX_DVALUE, glowTexel.a );     baseColor = lerp( glowc, baseColor, mskUsed ); }

References

BLYTHE, D. 2006. The direct3d 10 system. In SIGGRAPH ’06: ACM SIGGRAPH 2006 Papers, ACM Press, New York, NY, USA, 724–734.

FRISKEN, S. F., PERRY, R. N., ROCKWOOD, A. P., AND JONES, T. R. 2000. Adaptively sampled distance fields: a general representation of shape for computer graphics. In SIGGRAPH’00: Proceedings of the 27th annual conference on Computer graphics and interactive techniques, ACM Press/Addison-Wesley Publishing Co., New York, NY, USA, 249–254.

LOOP, C., AND BLINN, J. 2005. Resolution independent curve rendering using programmable graphics hardware. In SIGf Figure 9: HLSL source code for outline, glow/dropshadow, and edge softness. GRAPH ’05: ACM SIGGRAPH 2005 Papers, ACM Press, New York, NY, USA, 1000–1009.

MITCHELL, J., MCTAGGART, G., AND GREEN, C. 2006. Shading in valve’s source engine. In SIGGRAPH ’06: ACM SIGGRAPH 2006 Courses, ACM Press, New York, NY, USA, 129–142.

QIN, Z., MCCOOL, M. D., AND KAPLAN, C. S. 2006. Real-time texture-mapped vector glyphs. In I3D ’06: Proceedings of the 2006 symposium on Interactive 3D graphics and games, ACM Press, New York, NY, USA, 125–132.

RAY, N., NEIGER, T., CAVIN, X., AND LEVY, B. 2005. Vector texture maps. In Tech Report.

SEN, P. 2004. Silhouette maps for improved texture magnification. In HWWS ’04: Proceedings of the ACM SIGGRAPH/EUROGRAPHICS conference on Graphics hardware, ACM Press, New York, NY, USA, 65–73.

TUMBLIN, J., AND CHOUDHURY, P. 2004. Bixels: Picture samples with sharp embedded boundaries. In Rendering Techniques, 255–264.