Texture Atlas 개요, 활용

1. Texture Atlas 개요/활용
1
발표 / 김성익(noerror@softnette.com) / 2015/6

2. 2
목차
1. 텍스처 아틀라스
1. 개요
2.텍스처 패킹 구현
1. 패킹하기
2. 텍스처 크기
3. 비트맵 일반 (패딩, 엣지)
3. 텍스처 패킹 개선안
1. 공백 제거 (trim)
2. 볼록하게 만들기 (convex)
3. 이미지 접기 (divide)
4. 텍스처 로드/ 패치 / 런타임 패킹

3. 3
텍스처 아틀라스 개요

4. 4
텍스처 아틀라스 개요
- 텍스처 아틀라스 (texture atlas)
- atlas. 지도책
- 작은 이미지들을 모은 이미지
- 하나에 텍스처에 모으는 이유
- DrawCall 한번에 많은 폴리곤을 그리기 위해서
- 하드웨어 텍스처 크기 제한(2의 제곱수)으로 인한 공백 낭비를 줄이기
위해서
- 게임 개발에서 텍스처 아틀라스
- 개발 도구
- 작은 이미지 여러 장을 큰 이미지에 배치
- 조합된 (bake) 큰 이미지와 배치된 작은 이미지들의 정보
- 게임 프레임워크
- 패킹 정보로 개별 이미지 다루듯이 처리 가능하도록 지원
http://en.wikipedia.org/wiki/Texture_atlas

5. 5
(참고) Texture Packer
- Texture Packer
- 대표적인 텍스처 아틀라스 개발 도구
- 표준적인 기능 제공
- 저렴한 가격 39.95$
- 다양한 엔진 지원
- 다중 출력 해상도 (일반/저해상도)
- 이미지 픽셀 포맷
https://www.codeandweb.com/texturepacker

6. 6
텍스처 패킹 구현
패킹하기
텍스처 크기
비트맵 일반 이슈

7. 7
패킹하기
- 패킹 절차
- 빈 공간에서 최적의 공간을 찾는다
- 공간을 분할해서 이미지를 배치하고 남은 공간은 빈 공간에 추가한다
인접 축 방향으로 분할 BSP
- 반복
http://clb.demon.fi/files/RectangleBinPack.pdf
이미지 출처 Thousand Ways to Pack the Bin - A
Practical Approach to Two-Dimensional
Rectangle Bin Packing

8. 8
패킹 순서와 분할 방법
- 패킹 시 순서대로 공간을 할당하는 방식이기 때문에 순서에 따라 결과 차
이가 많이 남
- 경험상 큰 이미지에서 작은 이미지로 배치가 효과적
이미지 크기도 면적이냐 가로 길이냐, 세로 길이냐에 따라서도 다른
결과
- 패킹시 할당 가능한 공간 중에서 어떤 공간에 배치할 것이냐에 따라서도
결과 차이가 남
- 할당 시 빈 공간을 어떻게 나눌 것이냐에 따라서도 차이가 남
- 의견) 빌드 타임에 가능한 모든 조건을 순차적으로 시도한 후 자동 선택

9. 9
패킹 순서와 분할 방법
- Skyline 알고리즘
- 바닥부터 배치하고 가장 윗면 기준으로만 판단
- 폰트 글자 패킹에 적합

10. 10
텍스처 크기
- 성능 / 관리 이슈
- 비디오 메모리에 텍스처가 사용량은 적을 수록 좋다
- 그려질 이미지들이 하나의 텍스처에 묶여 DPCALL이 적을 수록 좋다
- 텍스처 크기가 크면
- 더 많은 이미지를 패킹 할 수 있다.
- 좀 더 쉽게 DPCALL을 줄일 수 있다.
- 사용하지 않는 이미지도 메모리상에 올라간다
- 하드웨어상 한계상 최대 크기가 존재
- 텍스처 크기가 작으면
- 빈 공간이 작아져 패킹 효율이 떨어지고 여백이 더 생긴다
- 여백까지로 메모리에 올라간다
- DPCALL을 줄이기 위해서 패킹 내용 관리가 더 필요하다

11. 11
비트맵 일반 이슈
- 패딩 픽셀
- 패킹된 텍스처가 인접한 경우 마지막 픽셀에서 옆 텍스처의 색이 스며
들 수 있으므로 여분의 공간을 할당한다
- 확장
- 마지막 픽셀의 경우 인접 픽셀이 스며드는데, 빈 공간으로 둘 경우 원
하는 결과가 나오지 않을 수 있다 (마지막 픽셀 혹은 첫픽셀로 채운다.)
- 테두리
- 이미지 테두리 부분은 알파가 0인 픽셀 컬러가
스며들게 되는데, 필요한 경우 알파가 0인
부분에도 인접 컬러를 채워주어야 테두리
컬러가 제대로 나온다.
http://cboard.cprogramming.com/game-programming/87890-bilinear-interpolation.html

12. 12
비트맵 일반 이슈
- 밉맵 mipmap
- 다운 레벨에서 옆 이미지 영향을 받는 경우까지만 사용할 수 있다
Texture Atlas Whitepaper - NVIDIA Developer

13. 13
텍스처 패킹 개선안
공백 제거하기
볼록하게 만들기
이미지 접기/분할
텍스처 로드/ 패치 / 런타임 패킹

14. 14
공백 제거하기
- trim
- 이미지를 찍지 않아도 되는 영역을 제외한다
- 투명한 컬러 영역만큼 제외 (블랜드모드가 가산인 경우 검정컬러)
- (제외한 영역 정보 추가)
- 패킹할 크기가 줄어들어, 패킹할때 더 많은 이미지를 추가할 수 있다
파티클 시퀀스 이미지에 높은 효율
vs
- 렌더링 영역이 줄어들어 퍼포먼스 증가

15. 15
볼록하게 만들기
- convex
- 처리가 쉬운 기하(geometry)단위
- 기하를 임의의 평면으로 나누었을 때 2개로 분할된다
- 최소단위는 삼각형
- 직사각형은 convex
- convex를 임의의 평면으로 나누어 생긴 기하는 모두 convex
- 정점만으로 기하를 만들 수 있다
- 클리핑 연산이 쉽다
- Triangle Fan으로 구성가능
http://en.wikipedia.org/wiki/Convex_polygon
http://en.wikipedia.org/wiki/Sutherland%E2%80%93Hodgman_algorithm
(비교) concave

16. 16
볼록하게 만들기
- convex 만들기
- 사각형의 각 점에 대해서 제거 가능한 삼각형을 모두 구한다.
- 정점을 기준으로 X, Y축으로 한 픽셀씩
옮겨가면서 빈 공간에 선이 그려지는 지
검사
- 한 픽셀씩 증가하면서 겹칠 때까지
반복
- 겹치기 전까지가 가능한 공간
- 가장 넓은 면적의 값을 선택

17. 17
볼록하게 그리기
- convex 그리기
- convex정보는 각 라인 위의 픽셀길이로 저장
- 0부터 순서대로 버텍스 추가
- 0, 2, 4, 6 값이 0이거나 다음 픽셀과 같은 값이면 추가하지 않음
- Triangle Fan 으로 기하 구성

18. 18
빈공간 활용
- 패킹 시 Convex의 구석 영역을 빈 공간도 활용한다
- 공간에 할당 가능 조건
- 1. 기하의 바운드가 공간의 가로 세로보다
작다
- 2. 겹쳐놓았을 때 모든 정점이 삼각 공간
안에 있는지 검사한다. = 윗변에 겹친 삼각
공간인 경우 아랫 변의 정점들, 아래 변에
겹친 삼각 공간인 경우 윗 변의 점점 들만 검사
- 공간 할당한 경우 빈 공간 추가
- 삼각 공간을 바운드로 나눈 영역
- Convex의 빈 공간 중 삼각공간의 반대 방향을
제외한 구석 공간도 빈 공간에 추가

19. 19
과제
- 이미지 영역을 더 정교하게 자른다면
- 1. 좀 더 정교한 convex hull
- 2. 전체를 작은 영역의 convex 모음으로 분할
- 3. 인접 조건에 연결된 convex끼리 머지
- 4. convex 폴리곤 bloolean 연산
- Convex는 아니므로 triangle list등의 부가 정보들이 필요
- 패킹 구현 난이도가 대폭 증가 예상
http://bulletphysics.org/Bullet/phpBB3/viewtopic.php?f=18&t=7445

20. 20
이미지 접기
- 일러스트처럼 큰 이미지의 경우 한 장에 배치할 수 있는 수가 제한됨
가로가 600인 이미지인 경우 1024 텍스처에 나란히 배치가 불가능
- 텍스처를 두 개로 분할해서 찍기
- 설정한 위치의 y축으로 분할하고 잘린 이미지는 아래쪽에 배치
- 렌더링 시 잘린 영역으로 두 개의 폴리곤 덩어리로 그리기
주) 잘리는 부분에 1픽셀 오른쪽에 다음 픽셀 채우기

21. 21
텍스처 로드와 패치
- 텍스처 로드
- 로딩 속도와 이미지 크기에 비례
- 사용하는 텍스처만 로드 한다면 좋겠지만 묶여 있다
- 패치
- 묶여 있는 상태로 이미지를 사용하기 때문에 패킹 좌표가 바뀌면 전체
가 업데이트 되어야 한다
- 작은 이미지 단위로 파일을 구성하고 런타임에 텍스처에 업로드 한다면
- 장점
- 필요한 이미지만 단계적으로 업로드 할 수 있다
- 패킹 좌표가 바뀌더라도 이미지는 패치 되지 않아도 된다
- 일부 이미지가 바뀔 경우 해당 이미지만 패치 되면 된다
- 단점
- 여러 파일을 개별적으로 읽어서 올리는 추가 부하가 있다
- 압축 포맺 지원이 어렵다. (dxt면 블록 단위로 패킹한다면 런타임
으로 영역 복사가 가능하지만 PVRT, ETC등은 어렵다.)

22. 22
런타임 패킹
- 이미지를 런타임에 배치하는 방식이라면 런타임에 패킹 가능
- 사용하는 이미지를 런타임 패킹
- 패킹된 내용을 패킹
- 풀 런타임 패킹
- 사용하는 이미지만 텍스처에 올릴 수 있다
- 실행하는 매번 패킹 연산을 해야 하는 부하가 있을 수 있다
- 패킹 순서가 예측 불가능하다
- 사전 패킹된 내용을 런타임 패킹
- 최적의 작은 사이즈로 의미 단위로 오프라인 패킹
- 인 게임에서 사용시 큰 텍스처에 패킹
- 패킹된 이미지가 bake된 경우에도 적용 가능하다

23. 감사합니다
23