글꼴 렌더링 이야기[DevRookie] 꽝매니아

왜 글꼴 렌더링 인가 ?

너무 편하게 쓰려다가…

너무 이쁘게 쓰려다가…

도대체 어떻게 글씨를 그릴까 ?

글꼴이란 ?

글꼴의 타입 비트맵 서체 외곽선 서체 화면용 서체

비트맵 서체

외곽선 서체

화면용 서체

몇가지 용어 정리 글리프 ( Glyph ) : 자형 ( 字形 ) 글자 여백 ( side bearing ) : 글자간 공백 간격 고정 너비 , 비례 너비 커닝 (Kerning ) : 글자별로 자간 간격 조정 글자 너비 (character width ) : 자형 실제 너비 이음자 : 2-3 글자를 하나로 합쳐서 만든 글자 .

최적화 이슈 화면 상에서 글자가 어떻게 렌더링 되고 있을까요 ?

자형 당 정점버퍼 사용구조 비트맵 글꼴의 일반적인 사용방식 한 글자당 정점버퍼 정보를 저장해 두고 있다가 실행할때

갱신 ? 글자마다 DrawCall 이 걸리게 되면 잠재적인 렌더링

병목현상을 초래

글꼴 텍스쳐 페이지 사용 벡터 그래픽 글씨를 비트맵에 그려 놓는다 . 한글자가 들어갈 위치를 지정한 기하정보를 구성한다 . UV 위치를 비트맵의 해당 글자 위치로 지정한다 . 이렇게 할 경우 , 해상도가 서로 안맞을때는 ? 가격대 성능비가 좋다 .

글꼴 텍스쳐 페이지

여기에 추가적으로… 해상도에 의한 글꼴 왜곡 문제를 막기 위한 기법들도 있다 . 왜곡되는 글자 외곽선을 번짐이나 안티 앨리어싱 하는 방법 .

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

왜 이렇게 했을까 ? - 글자 텍스쳐 변경을 리소스 변경없이스크립트와 환경 변수값으로 깔끔하게 처리 - 물론 , 비용이 없는건 아니다 ! ( 텍스쳐한장 쓸꺼 두장 쓰는격 ?)

뒤는 맡겨 두라구 !

일괄적인 DrawCall 진행 ? 글자 렌더링을 위한 기하구조의 일괄적인 처리 매 프레임 마다 기하구조 갱신 커스텀 쉐이더 , 렌더 스테이트 등에 의해 개별적인 구성

필요 고해상도 글꼴이나 자형 크기에 따른 텍스쳐 페이지 설정

D3DLOCK_DISCARD 버텍스 버퍼 정보구조를 GPU 에 올릴때 정점 버퍼의 Lock

비용 자형별로 했다가는… 꽤나 병목현상이 발생할 수 있다 . 새로운 버퍼를 GPU 로 부터 넘겨받아 바로 기록을 시작 . 정점 버퍼가 렌더링 되고 있는 동안에도 갱신을 할 수 있다 . 하지만 , 폐기되는 버퍼량에 대한 문제가 제기될 수 있다 .

정점 압축 정점 정보 구조체 안의 양을 줄여보자 . Shader X2 : ‘ 최소한의 정점 버퍼 잠금으로 입자들을 화면

정렬하기’ 참고 Screen-safe 형식이 아닌 billboard 정렬 shading 구조 정점하나에 rightFactor, upFactor 저장해서 쉐이더에

넘기고 쉐이더에서 카메라 좌표축에 의해 빌보드 사각형을 정렬한다 . 정점 위치 이동계산을 GPU 로 넘길 수 있다 . 정점 버퍼 Lock 을 하면서 갱신하지 않아도 된다 .

쉬어 갑시다 .

인스턴싱 (Instancing) 은 어떨까 ? Shader Model 3.0 기준 Geometry Instancing 을 사용해 보는 방법 하지만 , 일괄 단위 처리를 하는 상황에서의 추가부담이 크다 . 일부 하드웨어에 따라 성능차이가 많이 나는 단점 . 하위 버전 호환을 위한 인스턴싱 작업 추가 . ( 성능 장담은

… ) 동일한 글자를 여러 번 렌더링 할때 효과적일 수 있다 . 따라서 , 한글 등의 특수한 글자들에 한해 효과가 그리 크지

못하다 .

쉐이더 상수 배열을 이용한 인스턴싱 Constant Array 에 개별 자형 특성 정보를 만든다 . 위치 / 크기 , 텍스쳐 좌표위치 / 크기 , 색상 정점 당 네 개의 버퍼 크기가 크게 줄어든다 . 하지만 , 앞에서 말한 문제점을 다 해결하기에는 역부족

상수 배열 인스턴싱

추가적인 고려사항 - 정렬 복수개의 텍스트가 화면상에 겹치게 될때 렌더링 순서 1) 텍스트를 사용하는 오브젝트의 렌더링 순서에 따라 정렬 예 – 아이템 / 케릭터 이름 표시 2) 텍스트가 입력된 순서에 의한 정렬 자료구조 구성 예 – 게임 화면상에서의 채팅문구 표시 3) 겹치지 않게 재정렬 예 – 디아블로 아이템 이름 표시

추가적인 고려사항 – 절단 위치 렌더링 할 글꼴이 화면을 넘어갈때 아예 그리지 않게 선처리 . ( 깔끔해 !) 화면 공간 좌표에 변환해서 화면안으로 정렬되게 처리 추가적인 재정렬 연산 이 발생 텍스트가 잘려 보이는 건 UI 입장에서 불편해 보인다 .

Q/A

Thanks & References GPG 8 권 : ‘ 인스턴싱을 이용한 빠른 글꼴 렌더링’ http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Shader X2 Tip&Tricks : ‘ 최소한의 정점 버퍼 잠금으로

입자들을 화면 정렬하기’