SlideShare a Scribd company logo
1 of 23
Texture Atlas 개요/활용
1
발표 / 김성익(noerror@softnette.com) / 2015/6
2
목차
1. 텍스처 아틀라스
1. 개요
2.텍스처 패킹 구현
1. 패킹하기
2. 텍스처 크기
3. 비트맵 일반 (패딩, 엣지)
3. 텍스처 패킹 개선안
1. 공백 제거 (trim)
2. 볼록하게 만들기 (convex)
3. 이미지 접기 (divide)
4. 텍스처 로드/ 패치 / 런타임 패킹
3
텍스처 아틀라스 개요
4
텍스처 아틀라스 개요
- 텍스처 아틀라스 (texture atlas)
- atlas. 지도책
- 작은 이미지들을 모은 이미지
- 하나에 텍스처에 모으는 이유
- DrawCall 한번에 많은 폴리곤을 그리기 위해서
- 하드웨어 텍스처 크기 제한(2의 제곱수)으로 인한 공백 낭비를 줄이기
위해서
- 게임 개발에서 텍스처 아틀라스
- 개발 도구
- 작은 이미지 여러 장을 큰 이미지에 배치
- 조합된 (bake) 큰 이미지와 배치된 작은 이미지들의 정보
- 게임 프레임워크
- 패킹 정보로 개별 이미지 다루듯이 처리 가능하도록 지원
http://en.wikipedia.org/wiki/Texture_atlas
5
(참고) Texture Packer
- Texture Packer
- 대표적인 텍스처 아틀라스 개발 도구
- 표준적인 기능 제공
- 저렴한 가격 39.95$
- 다양한 엔진 지원
- 다중 출력 해상도 (일반/저해상도)
- 이미지 픽셀 포맷
https://www.codeandweb.com/texturepacker
6
텍스처 패킹 구현
패킹하기
텍스처 크기
비트맵 일반 이슈
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
패킹 순서와 분할 방법
- 패킹 시 순서대로 공간을 할당하는 방식이기 때문에 순서에 따라 결과 차
이가 많이 남
- 경험상 큰 이미지에서 작은 이미지로 배치가 효과적
이미지 크기도 면적이냐 가로 길이냐, 세로 길이냐에 따라서도 다른
결과
- 패킹시 할당 가능한 공간 중에서 어떤 공간에 배치할 것이냐에 따라서도
결과 차이가 남
- 할당 시 빈 공간을 어떻게 나눌 것이냐에 따라서도 차이가 남
- 의견) 빌드 타임에 가능한 모든 조건을 순차적으로 시도한 후 자동 선택
9
패킹 순서와 분할 방법
- Skyline 알고리즘
- 바닥부터 배치하고 가장 윗면 기준으로만 판단
- 폰트 글자 패킹에 적합
10
텍스처 크기
- 성능 / 관리 이슈
- 비디오 메모리에 텍스처가 사용량은 적을 수록 좋다
- 그려질 이미지들이 하나의 텍스처에 묶여 DPCALL이 적을 수록 좋다
- 텍스처 크기가 크면
- 더 많은 이미지를 패킹 할 수 있다.
- 좀 더 쉽게 DPCALL을 줄일 수 있다.
- 사용하지 않는 이미지도 메모리상에 올라간다
- 하드웨어상 한계상 최대 크기가 존재
- 텍스처 크기가 작으면
- 빈 공간이 작아져 패킹 효율이 떨어지고 여백이 더 생긴다
- 여백까지로 메모리에 올라간다
- DPCALL을 줄이기 위해서 패킹 내용 관리가 더 필요하다
11
비트맵 일반 이슈
- 패딩 픽셀
- 패킹된 텍스처가 인접한 경우 마지막 픽셀에서 옆 텍스처의 색이 스며
들 수 있으므로 여분의 공간을 할당한다
- 확장
- 마지막 픽셀의 경우 인접 픽셀이 스며드는데, 빈 공간으로 둘 경우 원
하는 결과가 나오지 않을 수 있다 (마지막 픽셀 혹은 첫픽셀로 채운다.)
- 테두리
- 이미지 테두리 부분은 알파가 0인 픽셀 컬러가
스며들게 되는데, 필요한 경우 알파가 0인
부분에도 인접 컬러를 채워주어야 테두리
컬러가 제대로 나온다.
http://cboard.cprogramming.com/game-programming/87890-bilinear-interpolation.html
12
비트맵 일반 이슈
- 밉맵 mipmap
- 다운 레벨에서 옆 이미지 영향을 받는 경우까지만 사용할 수 있다
Texture Atlas Whitepaper - NVIDIA Developer
13
텍스처 패킹 개선안
공백 제거하기
볼록하게 만들기
이미지 접기/분할
텍스처 로드/ 패치 / 런타임 패킹
14
공백 제거하기
- trim
- 이미지를 찍지 않아도 되는 영역을 제외한다
- 투명한 컬러 영역만큼 제외 (블랜드모드가 가산인 경우 검정컬러)
- (제외한 영역 정보 추가)
- 패킹할 크기가 줄어들어, 패킹할때 더 많은 이미지를 추가할 수 있다
파티클 시퀀스 이미지에 높은 효율
vs
- 렌더링 영역이 줄어들어 퍼포먼스 증가
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
볼록하게 만들기
- convex 만들기
- 사각형의 각 점에 대해서 제거 가능한 삼각형을 모두 구한다.
- 정점을 기준으로 X, Y축으로 한 픽셀씩
옮겨가면서 빈 공간에 선이 그려지는 지
검사
- 한 픽셀씩 증가하면서 겹칠 때까지
반복
- 겹치기 전까지가 가능한 공간
- 가장 넓은 면적의 값을 선택
17
볼록하게 그리기
- convex 그리기
- convex정보는 각 라인 위의 픽셀길이로 저장
- 0부터 순서대로 버텍스 추가
- 0, 2, 4, 6 값이 0이거나 다음 픽셀과 같은 값이면 추가하지 않음
- Triangle Fan 으로 기하 구성
18
빈공간 활용
- 패킹 시 Convex의 구석 영역을 빈 공간도 활용한다
- 공간에 할당 가능 조건
- 1. 기하의 바운드가 공간의 가로 세로보다
작다
- 2. 겹쳐놓았을 때 모든 정점이 삼각 공간
안에 있는지 검사한다. = 윗변에 겹친 삼각
공간인 경우 아랫 변의 정점들, 아래 변에
겹친 삼각 공간인 경우 윗 변의 점점 들만 검사
- 공간 할당한 경우 빈 공간 추가
- 삼각 공간을 바운드로 나눈 영역
- Convex의 빈 공간 중 삼각공간의 반대 방향을
제외한 구석 공간도 빈 공간에 추가
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
이미지 접기
- 일러스트처럼 큰 이미지의 경우 한 장에 배치할 수 있는 수가 제한됨
가로가 600인 이미지인 경우 1024 텍스처에 나란히 배치가 불가능
- 텍스처를 두 개로 분할해서 찍기
- 설정한 위치의 y축으로 분할하고 잘린 이미지는 아래쪽에 배치
- 렌더링 시 잘린 영역으로 두 개의 폴리곤 덩어리로 그리기
주) 잘리는 부분에 1픽셀 오른쪽에 다음 픽셀 채우기
21
텍스처 로드와 패치
- 텍스처 로드
- 로딩 속도와 이미지 크기에 비례
- 사용하는 텍스처만 로드 한다면 좋겠지만 묶여 있다
- 패치
- 묶여 있는 상태로 이미지를 사용하기 때문에 패킹 좌표가 바뀌면 전체
가 업데이트 되어야 한다
- 작은 이미지 단위로 파일을 구성하고 런타임에 텍스처에 업로드 한다면
- 장점
- 필요한 이미지만 단계적으로 업로드 할 수 있다
- 패킹 좌표가 바뀌더라도 이미지는 패치 되지 않아도 된다
- 일부 이미지가 바뀔 경우 해당 이미지만 패치 되면 된다
- 단점
- 여러 파일을 개별적으로 읽어서 올리는 추가 부하가 있다
- 압축 포맺 지원이 어렵다. (dxt면 블록 단위로 패킹한다면 런타임
으로 영역 복사가 가능하지만 PVRT, ETC등은 어렵다.)
22
런타임 패킹
- 이미지를 런타임에 배치하는 방식이라면 런타임에 패킹 가능
- 사용하는 이미지를 런타임 패킹
- 패킹된 내용을 패킹
- 풀 런타임 패킹
- 사용하는 이미지만 텍스처에 올릴 수 있다
- 실행하는 매번 패킹 연산을 해야 하는 부하가 있을 수 있다
- 패킹 순서가 예측 불가능하다
- 사전 패킹된 내용을 런타임 패킹
- 최적의 작은 사이즈로 의미 단위로 오프라인 패킹
- 인 게임에서 사용시 큰 텍스처에 패킹
- 패킹된 이미지가 bake된 경우에도 적용 가능하다
감사합니다
23

More Related Content

What's hot

김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019devCAT Studio, NEXON
 
멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)Bongseok Cho
 
[Ndc11 박민근] deferred shading
[Ndc11 박민근] deferred shading[Ndc11 박민근] deferred shading
[Ndc11 박민근] deferred shadingMinGeun Park
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술henjeon
 
Tips and experience of DX12 Engine development .
Tips and experience of DX12 Engine development .Tips and experience of DX12 Engine development .
Tips and experience of DX12 Engine development .YEONG-CHEON YOU
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리changehee lee
 
게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPU게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPUYEONG-CHEON YOU
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012devCAT Studio, NEXON
 
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근MinGeun Park
 
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Dae Hyek KIM
 
모바일 게임 최적화
모바일 게임 최적화 모바일 게임 최적화
모바일 게임 최적화 tartist
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow MappingSukwoo Lee
 
언리얼을 활용한 오브젝트 풀링
언리얼을 활용한 오브젝트 풀링언리얼을 활용한 오브젝트 풀링
언리얼을 활용한 오브젝트 풀링TonyCms
 
NDC11_슈퍼클래스
NDC11_슈퍼클래스NDC11_슈퍼클래스
NDC11_슈퍼클래스noerror
 
[0903 구경원] recast 네비메쉬
[0903 구경원] recast 네비메쉬[0903 구경원] recast 네비메쉬
[0903 구경원] recast 네비메쉬KyeongWon Koo
 
감마가 어디감마
감마가 어디감마감마가 어디감마
감마가 어디감마JP Jung
 
임태현, 게임 서버 디자인 가이드, NDC2013
임태현, 게임 서버 디자인 가이드, NDC2013임태현, 게임 서버 디자인 가이드, NDC2013
임태현, 게임 서버 디자인 가이드, NDC2013devCAT Studio, NEXON
 

What's hot (20)

김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
 
멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)
 
[Ndc11 박민근] deferred shading
[Ndc11 박민근] deferred shading[Ndc11 박민근] deferred shading
[Ndc11 박민근] deferred shading
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
 
Tips and experience of DX12 Engine development .
Tips and experience of DX12 Engine development .Tips and experience of DX12 Engine development .
Tips and experience of DX12 Engine development .
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPU게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPU
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
 
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근
[Ndc12] 누구나 알기쉬운 hdr과 톤맵핑 박민근
 
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
Ndc17 - 차세대 게임이펙트를 위해 알야아할 기법들
 
Voxelizaition with GPU
Voxelizaition with GPUVoxelizaition with GPU
Voxelizaition with GPU
 
Bump Mapping
Bump MappingBump Mapping
Bump Mapping
 
Ndc11 이창희_hdr
Ndc11 이창희_hdrNdc11 이창희_hdr
Ndc11 이창희_hdr
 
모바일 게임 최적화
모바일 게임 최적화 모바일 게임 최적화
모바일 게임 최적화
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
언리얼을 활용한 오브젝트 풀링
언리얼을 활용한 오브젝트 풀링언리얼을 활용한 오브젝트 풀링
언리얼을 활용한 오브젝트 풀링
 
NDC11_슈퍼클래스
NDC11_슈퍼클래스NDC11_슈퍼클래스
NDC11_슈퍼클래스
 
[0903 구경원] recast 네비메쉬
[0903 구경원] recast 네비메쉬[0903 구경원] recast 네비메쉬
[0903 구경원] recast 네비메쉬
 
감마가 어디감마
감마가 어디감마감마가 어디감마
감마가 어디감마
 
임태현, 게임 서버 디자인 가이드, NDC2013
임태현, 게임 서버 디자인 가이드, NDC2013임태현, 게임 서버 디자인 가이드, NDC2013
임태현, 게임 서버 디자인 가이드, NDC2013
 

Viewers also liked

[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C# 혼합 멀티플랫폼 게임 아키텍처 설계
[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C#  혼합 멀티플랫폼 게임 아키텍처 설계[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C#  혼합 멀티플랫폼 게임 아키텍처 설계
[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C# 혼합 멀티플랫폼 게임 아키텍처 설계Sungkyun Kim
 
Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기iFunFactory Inc.
 
06_앰비언트어클루전 소개
06_앰비언트어클루전 소개06_앰비언트어클루전 소개
06_앰비언트어클루전 소개noerror
 
07_Visual Shader Editor
07_Visual Shader Editor07_Visual Shader Editor
07_Visual Shader Editornoerror
 
KGC06_적응성 있는 자원 흐름 관리
KGC06_적응성 있는 자원 흐름 관리KGC06_적응성 있는 자원 흐름 관리
KGC06_적응성 있는 자원 흐름 관리noerror
 
06_자동차물리입문(1)
06_자동차물리입문(1)06_자동차물리입문(1)
06_자동차물리입문(1)noerror
 
Engines, Tools, and Scripts
Engines, Tools, and ScriptsEngines, Tools, and Scripts
Engines, Tools, and ScriptsKalito Viscra
 
11_웹서비스활용
11_웹서비스활용11_웹서비스활용
11_웹서비스활용noerror
 
06_게임엔진 활용팁
06_게임엔진 활용팁06_게임엔진 활용팁
06_게임엔진 활용팁noerror
 
06_HDR 소개
06_HDR 소개06_HDR 소개
06_HDR 소개noerror
 
06_게임엔진구성
06_게임엔진구성06_게임엔진구성
06_게임엔진구성noerror
 
NDC08_실시간비주얼그래프편집
NDC08_실시간비주얼그래프편집NDC08_실시간비주얼그래프편집
NDC08_실시간비주얼그래프편집noerror
 

Viewers also liked (13)

[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C# 혼합 멀티플랫폼 게임 아키텍처 설계
[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C#  혼합 멀티플랫폼 게임 아키텍처 설계[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C#  혼합 멀티플랫폼 게임 아키텍처 설계
[KGC2014] 두 마리 토끼를 잡기 위한 C++ - C# 혼합 멀티플랫폼 게임 아키텍처 설계
 
Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기
 
06_앰비언트어클루전 소개
06_앰비언트어클루전 소개06_앰비언트어클루전 소개
06_앰비언트어클루전 소개
 
Ssao
SsaoSsao
Ssao
 
07_Visual Shader Editor
07_Visual Shader Editor07_Visual Shader Editor
07_Visual Shader Editor
 
KGC06_적응성 있는 자원 흐름 관리
KGC06_적응성 있는 자원 흐름 관리KGC06_적응성 있는 자원 흐름 관리
KGC06_적응성 있는 자원 흐름 관리
 
06_자동차물리입문(1)
06_자동차물리입문(1)06_자동차물리입문(1)
06_자동차물리입문(1)
 
Engines, Tools, and Scripts
Engines, Tools, and ScriptsEngines, Tools, and Scripts
Engines, Tools, and Scripts
 
11_웹서비스활용
11_웹서비스활용11_웹서비스활용
11_웹서비스활용
 
06_게임엔진 활용팁
06_게임엔진 활용팁06_게임엔진 활용팁
06_게임엔진 활용팁
 
06_HDR 소개
06_HDR 소개06_HDR 소개
06_HDR 소개
 
06_게임엔진구성
06_게임엔진구성06_게임엔진구성
06_게임엔진구성
 
NDC08_실시간비주얼그래프편집
NDC08_실시간비주얼그래프편집NDC08_실시간비주얼그래프편집
NDC08_실시간비주얼그래프편집
 

Similar to 15_TextureAtlas

[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트강 민우
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트재철 황
 
QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0Byeong-Hyeok Yu
 
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례SangYun Yi
 
Kgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmicKgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmicLee Jungpyo
 
노동진 Mega splatting
노동진 Mega splatting노동진 Mega splatting
노동진 Mega splattingdrandom
 
09_Voxel rendering
09_Voxel rendering09_Voxel rendering
09_Voxel renderingnoerror
 
History of Vision AI
History of Vision AIHistory of Vision AI
History of Vision AITae Young Lee
 
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술YEONG-CHEON YOU
 
글꼴 렌더링 이야기
글꼴 렌더링 이야기글꼴 렌더링 이야기
글꼴 렌더링 이야기Young-jun Jeong
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기changehee lee
 
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전Sukwoo Lee
 
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNetjdo
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬현찬 양
 
Landscape 구축, Unreal Engine 3 의 차세대 terrain system
Landscape 구축, Unreal Engine 3 의 차세대 terrain systemLandscape 구축, Unreal Engine 3 의 차세대 terrain system
Landscape 구축, Unreal Engine 3 의 차세대 terrain systemdrandom
 
09_Bilateral filtering/Reprojection Cache 소개
09_Bilateral filtering/Reprojection Cache 소개09_Bilateral filtering/Reprojection Cache 소개
09_Bilateral filtering/Reprojection Cache 소개noerror
 

Similar to 15_TextureAtlas (20)

[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트
 
QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0QGIS를 활용한 공간분석 입문 ver.1.0
QGIS를 활용한 공간분석 입문 ver.1.0
 
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
Unity3D 엔진을 활용한 게임환경 분석 및 3D 그래픽스 기술 /제작 사례
 
Gametech2015
Gametech2015Gametech2015
Gametech2015
 
Kgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmicKgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmic
 
노동진 Mega splatting
노동진 Mega splatting노동진 Mega splatting
노동진 Mega splatting
 
09_Voxel rendering
09_Voxel rendering09_Voxel rendering
09_Voxel rendering
 
HistoryOfCNN
HistoryOfCNNHistoryOfCNN
HistoryOfCNN
 
History of Vision AI
History of Vision AIHistory of Vision AI
History of Vision AI
 
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
 
글꼴 렌더링 이야기
글꼴 렌더링 이야기글꼴 렌더링 이야기
글꼴 렌더링 이야기
 
[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기[Kgc2013] 모바일 엔진 개발기
[Kgc2013] 모바일 엔진 개발기
 
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
 
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet
[컴퓨터비전과 인공지능] 8. 합성곱 신경망 아키텍처 3 - GoogLeNet
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬
 
Landscape 구축, Unreal Engine 3 의 차세대 terrain system
Landscape 구축, Unreal Engine 3 의 차세대 terrain systemLandscape 구축, Unreal Engine 3 의 차세대 terrain system
Landscape 구축, Unreal Engine 3 의 차세대 terrain system
 
Motion blur
Motion blurMotion blur
Motion blur
 
09_Bilateral filtering/Reprojection Cache 소개
09_Bilateral filtering/Reprojection Cache 소개09_Bilateral filtering/Reprojection Cache 소개
09_Bilateral filtering/Reprojection Cache 소개
 
Devtree illu
Devtree illuDevtree illu
Devtree illu
 

More from noerror

NDC12_Lockless게임서버설계와구현
NDC12_Lockless게임서버설계와구현NDC12_Lockless게임서버설계와구현
NDC12_Lockless게임서버설계와구현noerror
 
KCGS11_실시간 피사계 심도 렌더링 개선 기법
KCGS11_실시간 피사계 심도 렌더링 개선 기법KCGS11_실시간 피사계 심도 렌더링 개선 기법
KCGS11_실시간 피사계 심도 렌더링 개선 기법noerror
 
11_통계 자료분석 입문
11_통계 자료분석 입문11_통계 자료분석 입문
11_통계 자료분석 입문noerror
 
11_빠른 개발 가능한 레벨 편집 시스템
11_빠른 개발 가능한 레벨 편집 시스템11_빠른 개발 가능한 레벨 편집 시스템
11_빠른 개발 가능한 레벨 편집 시스템noerror
 
11_SH를 이용한 실시간 투명 근사법
11_SH를 이용한 실시간 투명 근사법11_SH를 이용한 실시간 투명 근사법
11_SH를 이용한 실시간 투명 근사법noerror
 
ICON08_게임 애니메이션 최적화 기법
ICON08_게임 애니메이션 최적화 기법ICON08_게임 애니메이션 최적화 기법
ICON08_게임 애니메이션 최적화 기법noerror
 
08_Marching Cube Terrains
08_Marching Cube Terrains08_Marching Cube Terrains
08_Marching Cube Terrainsnoerror
 
08_게임 물리 프로그래밍 가이드
08_게임 물리 프로그래밍 가이드08_게임 물리 프로그래밍 가이드
08_게임 물리 프로그래밍 가이드noerror
 
08_플래시 맛보기
08_플래시 맛보기08_플래시 맛보기
08_플래시 맛보기noerror
 
08_애니메이션고등학교 게임과 특강
08_애니메이션고등학교 게임과 특강08_애니메이션고등학교 게임과 특강
08_애니메이션고등학교 게임과 특강noerror
 
08_Wxwidgets 소개
08_Wxwidgets 소개08_Wxwidgets 소개
08_Wxwidgets 소개noerror
 
07_PhysX 강체물리 입문
07_PhysX 강체물리 입문07_PhysX 강체물리 입문
07_PhysX 강체물리 입문noerror
 
07_스케일폼 소개
07_스케일폼 소개07_스케일폼 소개
07_스케일폼 소개noerror
 
05_Reliable UDP 구현
05_Reliable UDP 구현05_Reliable UDP 구현
05_Reliable UDP 구현noerror
 
05_스마트 포인터 구현하기
05_스마트 포인터 구현하기05_스마트 포인터 구현하기
05_스마트 포인터 구현하기noerror
 
05_벡터와 매트릭스
05_벡터와 매트릭스05_벡터와 매트릭스
05_벡터와 매트릭스noerror
 
05_STL컨테이너정리
05_STL컨테이너정리05_STL컨테이너정리
05_STL컨테이너정리noerror
 
05_동기화_개요
05_동기화_개요05_동기화_개요
05_동기화_개요noerror
 
05_글로벌일루미네이션
05_글로벌일루미네이션05_글로벌일루미네이션
05_글로벌일루미네이션noerror
 
05_컴파일러최적화전략(1)
05_컴파일러최적화전략(1)05_컴파일러최적화전략(1)
05_컴파일러최적화전략(1)noerror
 

More from noerror (20)

NDC12_Lockless게임서버설계와구현
NDC12_Lockless게임서버설계와구현NDC12_Lockless게임서버설계와구현
NDC12_Lockless게임서버설계와구현
 
KCGS11_실시간 피사계 심도 렌더링 개선 기법
KCGS11_실시간 피사계 심도 렌더링 개선 기법KCGS11_실시간 피사계 심도 렌더링 개선 기법
KCGS11_실시간 피사계 심도 렌더링 개선 기법
 
11_통계 자료분석 입문
11_통계 자료분석 입문11_통계 자료분석 입문
11_통계 자료분석 입문
 
11_빠른 개발 가능한 레벨 편집 시스템
11_빠른 개발 가능한 레벨 편집 시스템11_빠른 개발 가능한 레벨 편집 시스템
11_빠른 개발 가능한 레벨 편집 시스템
 
11_SH를 이용한 실시간 투명 근사법
11_SH를 이용한 실시간 투명 근사법11_SH를 이용한 실시간 투명 근사법
11_SH를 이용한 실시간 투명 근사법
 
ICON08_게임 애니메이션 최적화 기법
ICON08_게임 애니메이션 최적화 기법ICON08_게임 애니메이션 최적화 기법
ICON08_게임 애니메이션 최적화 기법
 
08_Marching Cube Terrains
08_Marching Cube Terrains08_Marching Cube Terrains
08_Marching Cube Terrains
 
08_게임 물리 프로그래밍 가이드
08_게임 물리 프로그래밍 가이드08_게임 물리 프로그래밍 가이드
08_게임 물리 프로그래밍 가이드
 
08_플래시 맛보기
08_플래시 맛보기08_플래시 맛보기
08_플래시 맛보기
 
08_애니메이션고등학교 게임과 특강
08_애니메이션고등학교 게임과 특강08_애니메이션고등학교 게임과 특강
08_애니메이션고등학교 게임과 특강
 
08_Wxwidgets 소개
08_Wxwidgets 소개08_Wxwidgets 소개
08_Wxwidgets 소개
 
07_PhysX 강체물리 입문
07_PhysX 강체물리 입문07_PhysX 강체물리 입문
07_PhysX 강체물리 입문
 
07_스케일폼 소개
07_스케일폼 소개07_스케일폼 소개
07_스케일폼 소개
 
05_Reliable UDP 구현
05_Reliable UDP 구현05_Reliable UDP 구현
05_Reliable UDP 구현
 
05_스마트 포인터 구현하기
05_스마트 포인터 구현하기05_스마트 포인터 구현하기
05_스마트 포인터 구현하기
 
05_벡터와 매트릭스
05_벡터와 매트릭스05_벡터와 매트릭스
05_벡터와 매트릭스
 
05_STL컨테이너정리
05_STL컨테이너정리05_STL컨테이너정리
05_STL컨테이너정리
 
05_동기화_개요
05_동기화_개요05_동기화_개요
05_동기화_개요
 
05_글로벌일루미네이션
05_글로벌일루미네이션05_글로벌일루미네이션
05_글로벌일루미네이션
 
05_컴파일러최적화전략(1)
05_컴파일러최적화전략(1)05_컴파일러최적화전략(1)
05_컴파일러최적화전략(1)
 

15_TextureAtlas

  • 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. 텍스처 로드/ 패치 / 런타임 패킹
  • 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된 경우에도 적용 가능하다