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

2.
왜 글꼴 렌더링 인가?

3.
너무 편하게 쓰려다가…

4.
너무 이쁘게 쓰려다가…

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

6.
글꼴이란?

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

8.
비트맵 서체

9.
외곽선 서체

10.
화면용 서체

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

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

13.
자형 당 정점버퍼 사용구조
 비트맵 글꼴의 일반적인 사용방식
 한 글자당 정점버퍼 정보를 저장해 두고 있다가 실행할때 갱
신?
 글자마다 DrawCall 이 걸리게 되면 잠재적인 렌더링 병목현상
을 초래

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

15.
글꼴 텍스쳐 페이지

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

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

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

19.
일괄적인 DrawCall 진행?
 글자 렌더링을 위한 기하구조의 일괄적인 처리
 매 프레임 마다 기하구조 갱신
 커스텀 쉐이더, 렌더 스테이트 등에 의해 개별적인 구성 필요
 고해상도 글꼴이나 자형 크기에 따른 텍스쳐 페이지 설정

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

21.
정점 압축
 정점 정보 구조체 안의 양을 줄여보자.
 Shader X2 : ‘최소한의 정점 버퍼 잠금으로 입자들을 화면 정
렬하기’ 참고
 Screen-safe 형식이 아닌 billboard 정렬 shading 구조
 정점하나에 rightFactor, upFactor 저장해서 쉐이더에 넘기고
 쉐이더에서 카메라 좌표축에 의해 빌보드 사각형을 정렬한다.
 정점 위치 이동계산을 GPU로 넘길 수 있다.
 정점 버퍼 Lock을 하면서 갱신하지 않아도 된다.

22.
쉬어 갑시다.

23.
인스턴싱(Instancing)은 어떨
까?
 Shader Model 3.0 기준
 Geometry Instancing 을 사용해 보는 방법
 하지만, 일괄 단위 처리를 하는 상황에서의 추가부담이 크다.
 일부 하드웨어에 따라 성능차이가 많이 나는 단점.
 하위 버전 호환을 위한 인스턴싱 작업 추가. (성능 장담은…)
 동일한 글자를 여러 번 렌더링 할때 효과적일 수 있다.
 따라서, 한글 등의 특수한 글자들에 한해 효과가 그리 크지 못
하다.

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

25.
상수 배열 인스턴싱

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

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

28.
Q/A

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