Your SlideShare is downloading. ×
0
글꼴 렌더링 이야기[DevRookie]꽝매니아
왜 글꼴 렌더링 인가?
너무 편하게 쓰려다가…
너무 이쁘게 쓰려다가…
도대체 어떻게 글씨를 그릴까?
글꼴이란?
글꼴의 타입 비트맵 서체 외곽선 서체 화면용 서체
비트맵 서체
외곽선 서체
화면용 서체
몇가지 용어 정리 글리프 ( Glyph ) : 자형(字形) 글자 여백 ( side bearing ) : 글자간 공백 간격 고정 너비, 비례 너비 커닝 (Kerning ) : 글자별로 자간 간격 조정 글자 너비 ...
최적화 이슈 화면 상에서 글자가 어떻게 렌더링 되고 있을까요?
자형 당 정점버퍼 사용구조 비트맵 글꼴의 일반적인 사용방식 한 글자당 정점버퍼 정보를 저장해 두고 있다가 실행할때 갱  신? 글자마다 DrawCall 이 걸리게 되면 잠재적인 렌더링 병목현상  을 초래
글꼴 텍스쳐 페이지 사용 벡터 그래픽 글씨를 비트맵에 그려 놓는다. 한글자가 들어갈 위치를 지정한 기하정보를 구성한다. UV 위치를 비트맵의 해당 글자 위치로 지정한다. 이렇게 할 경우, 해상도가 서로 안맞을때는...
글꼴 텍스쳐 페이지
여기에 추가적으로… 해상도에 의한 글꼴 왜곡 문제를 막기 위한 기법들도 있다. 왜곡되는 글자 외곽선을 번짐이나 안티 앨리어싱 하는 방법.
http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
왜 이렇게 했을까?                          뒤는 맡겨 두라구!- 글자 텍스쳐 변경을 리소스 변경없이스크립트와 환경 변수값으로 깔끔하게 처리- 물론, 비용이 없는건 아니다! (텍스쳐한장 쓸꺼 두장 쓰...
일괄적인 DrawCall 진행? 글자 렌더링을 위한 기하구조의 일괄적인 처리 매 프레임 마다 기하구조 갱신 커스텀 쉐이더, 렌더 스테이트 등에 의해 개별적인 구성 필요 고해상도 글꼴이나 자형 크기에 따른 텍스쳐 ...
D3DLOCK_DISCARD 버텍스 버퍼 정보구조를 GPU에 올릴때 정점 버퍼의 Lock 비  용 자형별로 했다가는… 꽤나 병목현상이 발생할 수 있다. 새로운 버퍼를 GPU로 부터 넘겨받아 바로 기록을 시작. 정...
정점 압축 정점 정보 구조체 안의 양을 줄여보자. Shader X2 : ‘최소한의 정점 버퍼 잠금으로 입자들을 화면 정  렬하기’ 참고 Screen-safe 형식이 아닌 billboard 정렬 shading 구조...
쉬어 갑시다.
인스턴싱(Instancing)은 어떨까? Shader Model 3.0 기준 Geometry Instancing 을 사용해 보는 방법 하지만, 일괄 단위 처리를 하는 상황에서의 추가부담이 크다. 일부 하드웨어에 ...
쉐이더 상수 배열을 이용한 인스턴싱 Constant Array 에 개별 자형 특성 정보를 만든다. 위치/크기, 텍스쳐 좌표위치/크기, 색상 정점 당 네 개의 버퍼 크기가 크게 줄어든다. 하지만, 앞에서 말한 문제...
상수 배열 인스턴싱
추가적인 고려사항 - 정렬 복수개의 텍스트가 화면상에 겹치게 될때 렌더링 순서 1) 텍스트를 사용하는 오브젝트의 렌더링 순서에 따라 정렬 예 – 아이템/케릭터 이름 표시 2) 텍스트가 입력된 순서에 의한 정렬 자...
추가적인 고려사항 – 절단 위치 렌더링 할 글꼴이 화면을 넘어갈때 아예 그리지 않게 선처리. (깔끔해!) 화면 공간 좌표에 변환해서 화면안으로 정렬되게 처리 추가적인 재정렬 연산 이 발생 텍스트가 잘려 보이는 ...
Q/A
Thanks & References GPG 8권 : ‘인스턴싱을 이용한 빠른 글꼴 렌더링’ http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTest...
Upcoming SlideShare
Loading in...5
×

글꼴 렌더링 이야기

1,311

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,311
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "글꼴 렌더링 이야기"

  1. 1. 글꼴 렌더링 이야기[DevRookie]꽝매니아
  2. 2. 왜 글꼴 렌더링 인가?
  3. 3. 너무 편하게 쓰려다가…
  4. 4. 너무 이쁘게 쓰려다가…
  5. 5. 도대체 어떻게 글씨를 그릴까?
  6. 6. 글꼴이란?
  7. 7. 글꼴의 타입 비트맵 서체 외곽선 서체 화면용 서체
  8. 8. 비트맵 서체
  9. 9. 외곽선 서체
  10. 10. 화면용 서체
  11. 11. 몇가지 용어 정리 글리프 ( Glyph ) : 자형(字形) 글자 여백 ( side bearing ) : 글자간 공백 간격 고정 너비, 비례 너비 커닝 (Kerning ) : 글자별로 자간 간격 조정 글자 너비 (character width ) : 자형 실제 너비 이음자 : 2-3글자를 하나로 합쳐서 만든 글자.
  12. 12. 최적화 이슈 화면 상에서 글자가 어떻게 렌더링 되고 있을까요?
  13. 13. 자형 당 정점버퍼 사용구조 비트맵 글꼴의 일반적인 사용방식 한 글자당 정점버퍼 정보를 저장해 두고 있다가 실행할때 갱 신? 글자마다 DrawCall 이 걸리게 되면 잠재적인 렌더링 병목현상 을 초래
  14. 14. 글꼴 텍스쳐 페이지 사용 벡터 그래픽 글씨를 비트맵에 그려 놓는다. 한글자가 들어갈 위치를 지정한 기하정보를 구성한다. UV 위치를 비트맵의 해당 글자 위치로 지정한다. 이렇게 할 경우, 해상도가 서로 안맞을때는? 가격대 성능비가 좋다.
  15. 15. 글꼴 텍스쳐 페이지
  16. 16. 여기에 추가적으로… 해상도에 의한 글꼴 왜곡 문제를 막기 위한 기법들도 있다. 왜곡되는 글자 외곽선을 번짐이나 안티 앨리어싱 하는 방법.
  17. 17. http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
  18. 18. 왜 이렇게 했을까? 뒤는 맡겨 두라구!- 글자 텍스쳐 변경을 리소스 변경없이스크립트와 환경 변수값으로 깔끔하게 처리- 물론, 비용이 없는건 아니다! (텍스쳐한장 쓸꺼 두장 쓰는격?)
  19. 19. 일괄적인 DrawCall 진행? 글자 렌더링을 위한 기하구조의 일괄적인 처리 매 프레임 마다 기하구조 갱신 커스텀 쉐이더, 렌더 스테이트 등에 의해 개별적인 구성 필요 고해상도 글꼴이나 자형 크기에 따른 텍스쳐 페이지 설정
  20. 20. D3DLOCK_DISCARD 버텍스 버퍼 정보구조를 GPU에 올릴때 정점 버퍼의 Lock 비 용 자형별로 했다가는… 꽤나 병목현상이 발생할 수 있다. 새로운 버퍼를 GPU로 부터 넘겨받아 바로 기록을 시작. 정점 버퍼가 렌더링 되고 있는 동안에도 갱신을 할 수 있다. 하지만, 폐기되는 버퍼량에 대한 문제가 제기될 수 있다.
  21. 21. 정점 압축 정점 정보 구조체 안의 양을 줄여보자. Shader X2 : ‘최소한의 정점 버퍼 잠금으로 입자들을 화면 정 렬하기’ 참고 Screen-safe 형식이 아닌 billboard 정렬 shading 구조 정점하나에 rightFactor, upFactor 저장해서 쉐이더에 넘기고 쉐이더에서 카메라 좌표축에 의해 빌보드 사각형을 정렬한다. 정점 위치 이동계산을 GPU로 넘길 수 있다. 정점 버퍼 Lock을 하면서 갱신하지 않아도 된다.
  22. 22. 쉬어 갑시다.
  23. 23. 인스턴싱(Instancing)은 어떨까? Shader Model 3.0 기준 Geometry Instancing 을 사용해 보는 방법 하지만, 일괄 단위 처리를 하는 상황에서의 추가부담이 크다. 일부 하드웨어에 따라 성능차이가 많이 나는 단점. 하위 버전 호환을 위한 인스턴싱 작업 추가. (성능 장담은…) 동일한 글자를 여러 번 렌더링 할때 효과적일 수 있다. 따라서, 한글 등의 특수한 글자들에 한해 효과가 그리 크지 못 하다.
  24. 24. 쉐이더 상수 배열을 이용한 인스턴싱 Constant Array 에 개별 자형 특성 정보를 만든다. 위치/크기, 텍스쳐 좌표위치/크기, 색상 정점 당 네 개의 버퍼 크기가 크게 줄어든다. 하지만, 앞에서 말한 문제점을 다 해결하기에는 역부족
  25. 25. 상수 배열 인스턴싱
  26. 26. 추가적인 고려사항 - 정렬 복수개의 텍스트가 화면상에 겹치게 될때 렌더링 순서 1) 텍스트를 사용하는 오브젝트의 렌더링 순서에 따라 정렬 예 – 아이템/케릭터 이름 표시 2) 텍스트가 입력된 순서에 의한 정렬 자료구조 구성 예 – 게임 화면상에서의 채팅문구 표시 3) 겹치지 않게 재정렬 예 – 디아블로 아이템 이름 표시
  27. 27. 추가적인 고려사항 – 절단 위치 렌더링 할 글꼴이 화면을 넘어갈때 아예 그리지 않게 선처리. (깔끔해!) 화면 공간 좌표에 변환해서 화면안으로 정렬되게 처리 추가적인 재정렬 연산 이 발생 텍스트가 잘려 보이는 건 UI 입장에서불편해 보인다.
  28. 28. Q/A
  29. 29. Thanks & References GPG 8권 : ‘인스턴싱을 이용한 빠른 글꼴 렌더링’ http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Shader X2 Tip&Tricks : ‘최소한의 정점 버퍼 잠금으로 입자들 을 화면 정렬하기’
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×