SlideShare a Scribd company logo
1 of 40
게임프로그래머를 위한
리얼타임 렌더링
- 이미지 텍스처링 -
2018.02.03 데브루키 발표자 이석우
발표자 소개
• 이석우 (1987년생)
• 게임 회사로 이직 희망하는 병특(전문연구요원)
• 발표자료에 대한 오류사항이나 궁금한 점이 있으면 아래의 메일로 연락주세요.
kkndsta@naver.com
참고자료
• 게임 프로그래밍을 위한 3차원 그래픽스 - 저자 : 한정현 -
이미지 텍스처
• 텍스처는 텍셀(texel) 기반의 배열 구조를 가지는 데, 색상 정보를 저장하고 있는 경우 이미
지 텍스처라 부른다.
• 흔히 모델에 색상을 입히기 위해 텍스처를 이용한다. 이를 텍스처링(texturing)이라 한다.
텍스쳐링
• 이전 발표에서 텍스쳐링은 프래그먼트(3차원 폴리곤 메쉬를 2차원 데이터로 변
형한 형태)에 텍스쳐를 입히는 것이라 설명하였다.
• 그렇다면 어떻게 알맞은 위치에 텍스쳐를 입힐 수 있을까?
• 바로 텍스쳐좌표를 이용하여 텍스쳐를 입힌다.
텍스쳐 좌표
• 2차원 이미지 텍스쳐의 요소 하나를 텍스쳐 엘리먼트(texture element), 줄여서 텍
셀이라고 한다.(픽셀과 구분하기 위해 이름을 텍셀이라 한다.)
• 각각의 텍셀은 2차원 배열 상의 자신의 위치를 나타내는 인덱스(texcel address)를
가지고 있다.
텍스처 어드레싱 모드
• 텍스처 좌표는 기본적으로 [0, 1] 범위 안에 있지만 범위를 벗어나게 사용하는 경우
도 있다.
• 텍스처 어드레싱 모드는 [0, 1] 범위 밖 텍스처 매핑을 어떻게 처리할 지 결정하는
모드이다.
• 텍스처 어드레싱 모드의 기본 설정은 clamp로 되어 있다.
u,v : border u,v : wrap u,v : mirror
u : wrap
v : mirror
텍스처 어드레싱 모드 : CLAMP
• Clamp: 클램프는 텍스처 경계 부분의 색을 그대로 가져와 [0,1] 범위 밖을 칠한다.
텍스처 어드레싱 모드 : WRAP
• Wrap: [0,1] 범위 밖에서도 텍스처가 똑같이 반복되서 매핑된다.
텍스처 어드레싱 모드 : MIRROR
• Mirror: [0,1] 범위 밖에서 텍스처가 반사되어 매핑된다.
텍스처 어드레싱 모드 : BORDER
• Border: [0, 1] 범위 밖은 임의의 색을 설정하여 색을 입힌다.
텍스처 어드레싱 모드
• Direct3DDevice9::SetSamplerState method를 이용해서 텍스처 어드레싱 모드를
설정한다.
HRESULT SetSamplerState(
DWORD Sampler, // texture number
D3DSAMPLERSTATETYPE Type,
DWORD Value );
typedef enum _D3DSAMPLERSTATETYPE {
D3DSAMP_ADDRESSU = 1, // The default is D3DTADDRESS_WRAP
D3DSAMP_ADDRESSV = 2,
D3DSAMP_ADDRESSW = 3, // For 3D texturing
D3DSAMP_BORDERCOLOR = 4,
….
} D3DSAMPLERSTATETYPE;
typedef enum D3DTEXTUREADDRESS {
D3DTADDRESS_WRAP = 1,
D3DTADDRESS_MIRROR = 2,
D3DTADDRESS_CLAMP = 3,
D3DTADDRESS_BORDER = 4,
..
} D3DTEXTUREADDRESS, *LPD3DTEXTUREADDRESS;
텍스처 필터링
• 스크린 공간의 (x,y)에 위치한 게임 속 사각형이 텍스처 좌표(u,v)를 가질 때, 이 텍스
처좌표는 텍셀 주소(𝑡 𝑥 , 𝑡 𝑦)로 매핑된다.
• 그러나 일반적으로 게임 속 사각형과 텍스처는 크기가 다르기 때문에 텍스처를 확
대 또는 축소시킨다.
• 텍스처를 확대 또는 축소시키면서 사각형 속 픽셀의 색을 결정하는 과정을 텍스처
필터링이라고 한다.
텍스처 필터링
• 텍스처 필터링은 확대 필터링, 축소 필터링, 밉맵필터링이 있다.
• 필터링 방식은 근접점 샘플링, 선형 보간, 비등방 필터링 중에 선택한다.
텍스처 확대 필터링
텍스처 축소 필터링
밉맵 필터링
근접점 샘플링
선형 보간
비등방 필터링
텍스처가 확대될 경우
• 스크린 공간의 사각형 크기가 이미지 텍스처보다 클 경우, 텍스처는 사각형 크기에
맞춰서 확대된다.
• 픽셀 > 텍셀(개수)
확대 필터링 : 근접점 샘플링
• 확대 필터링을 근접점 샘플링으로 설정하면 가장 가까운 텍셀의 값을 픽셀에 집어
넣는다.
• 아래 그림은 텍셀 근처 픽셀들이 해당 텍셀의 색을 가져옴을 의미한다.
확대 필터링 : 겹선형 보간
• 겹선형 보간( bilinear interpolation)으로 선택하면 근처 텍셀들의 색을 선형 보간하
여 픽셀의 색을 구한다.
텍스처가 축소될 경우
• 스크린 공간의 사각형 크기가 이미지 텍스처보다 작을 경우, 텍스처는 사각형 크기
에 맞춰서 축소된다.
• 픽셀 < 텍셀
텍스트 축소 시 문제점
• 텍스처 축소 필터링도 마찬가지로 근접점 샘플링 혹은 겹선형 보간 중에 사용한다.
• 그러나 어떠한 필터링을 사용해도 텍스처 축소 시 한 가지 문제가 발생한다.
• 체크 무늬 모양의 텍스처를 사용한다고 가정하자.
• 텍스처를 축소할 경우 픽셀이 듬성듬성 텍셀들 사이에 듬성듬성 존재 한다.
텍스트 축소 시 문제점
• 그림 (a)는 픽셀들이 검은색 텍셀사이에 존재하므로 어떤 필터링을 사용해도 검은
색으로 보인다. 즉, 회색을 인색하지 못하므로 체크 무늬를 표현하지 못한다.
• 그림 (b)는 반대로 회색 텍셀사이에 존재하므로 회색으로만 보인다.
• 이것도 에일리어싱(Aliasing) 문제 중 하나이다(우리가 흔히 알고 있는 에일리어싱
문제는 게임 속 계단현상을 말하는 것으로 이것과는 다르다).
(a) (b)
밉맵 필터링의 모티브
• 텍스처 축소 시 텍스처가 스크린 공간 프리미티브에 비해 크기 때문에 에일리어싱 문
제가 발생하였다.
• 그렇다면 어떻게 해결해야 할까?
• 텍스처를 작게 만들어서 그 크기가 프리미티브와 비슷해지도록 하면 해결되지 않을까?
• 즉, 픽셀과 텍셀 간에 일대일 대응이 성립하도록 텍스처를 작게 만들면 된다.
• 이 아이디어로 착안된 게 바로 밉맵 필터링이다.
밉맵이란?
• 시시각각 크기가 변하는 게임 속 사각형과 크기가 맞는 텍스처를 대응시키기 위해
선 다수의 텍스처를 필요로 한다.
• 따라서 원본 텍스처를 기반으로 다운샘플링(DOWN SAMPLING)하여 다수의 텍스처
를 생성하고 이것들을 피라미드처럼 크기 별로 묶은 것을 밉맵이라 한다.
기본 배경 지식
• 텍스처 해상도는 기본적으로 2𝑙
× 2𝑙
크기의 정사각형으로 만든다.
• 이러한 텍스처는 다음과 같은 이점이 있다.
비균일 밉맵보다 메모리를 절약하고 캐시 효율이 좋다.
비트 연산에서 2^n의 숫자라면 연산량을 줄일 수 있기 때문에 텍스처 매핑이 작업이 최
적화 된다.
• 따라서 원본 텍스처의 해상도가 2𝑙
× 2𝑙
일 경우 밉맵의 레벨은 0부터 𝑙까지 존재한다.
밉맵 필터링 : 레벨의 선택
• 먼저 알맞은 크기의 텍스처를 정하기 위해
선 밉맵 레벨을 계산해야 한다.
• 픽셀이 텍스처에서 m(가로) x m(세로) 크기
의 텍셀 블록을 차지하는 경우 밉맵 레벨은
𝑙𝑜𝑔2 𝑚이다.
• 왼쪽 그림에선 픽셀의 2 x 2 크기의 텍셀 블
록을 차지하여 레벨 1이 선택되었다.
밉맵 필터링
• 그러나 만일 m이 제곱이 아니라면 레벨은
실수가 아닌 정수가 된다.
• 왼쪽 그림은 3x3 크기의 사각형의 레벨을 계
산하면 𝑙𝑜𝑔23 = 1.585이다.
• 필터링 방식은 가장 가까운 레벨을 선택하는
근접점 샘플링과 두 레벨 사이에서 선형보간
하는 방법 중 선택할 수 있다.
밉맵 필터링
• 텍스처 확대와 축소에는 겹선형 보간을 사용하였지만 밉맵 필터링의 선형 보간은 삼
선형 보간(trilinear interpolation)을 사용한다.
• 먼저 레벨 1과 레벨 2에 대해 각각 겹선형 보간이 진행되고 그 결과를 가지고 소수점
이하의 값(여기서는 0.585)을 이용해 다시 한번 선형 보간한다.
시선과 수직일 때
• 시선과 수직을 이루는 직사각형에 텍스처를 매핑할 때 밉맵 필터링의 결과는 아래
와 같이 아무 문제 없이 필터링된다.
시선과 수직이 아닐 때
• 그러나 만약 사각형이 기울어져 있다면 어떻게 될까?
• 스크린 공간의 사각형의 각 픽셀에서 이 텍스처가 확대 인지 축소인지 결정한다.
• 텍스처가 확대되는 부분에선 레벨 0인 텍스처를 사용하고, 축소되는 부분에서는 여
러가지 밉맵 레벨이 사용한다(뒤로 갈수록 레벨이 올라간다).
필터링 설정 방법
• 위에서 설명한 텍스처 필터링은 하드웨어가 구현해주지만 그래픽스 API는 프로그래머가 제어
할 수 있게 해준다.
• 텍스처 축소(magnifiaction) 및 확대(minification), 밉맵 필터링에 대해 근접점 샘플링과 선형
보간을 각각 선택하여 결과를 확인해 보자.
 MAGFILTER : 텍스처 확대 필터링
 NEAREST : Nearest point sampling(근접점 샘플링)
 BILINEAR : Bilinear interpolation(겹선형 보간)
 MINFILTER : 텍스처 축소 필터링
 NEAREST : Nearest point sampling(근접점 샘플링)
 BILINEAR : Bilinear interpolation(겹선형 보간)
 LEVEL : 밉맵 필터링
 NEAREST : Nearest point sampling(근접점 샘플링)
 LINEAR : Two levels to be linearly interpolated (삼선형 보간)
필터링 결과 : 적용 전 참고사항
• 이제 실제 필터링을 적용한 결과를 보도록 하자.
• 텍스처 확대 및 축소를 구분하기 위해 레벨 0 텍스처를 빨간색이라 가정한다.
필터링 결과 : 적용 전 참고사항
• 프로그래머의 설정에 따라 근접점 샘플링 혹은 선형 보간 필터링이 된다.
• MAGFILTER(확대필터), MINFILTER(축소필터), LEVEL(밉맵필터) 등을 바꿔가며 결과
를 확인한다.
magnification minification
area:2
level 0 level 0 level 0 level 1
a b c d e
e
c
d
b
a
필터링 결과
비등방 필터링의 모티브
• 지금까지 픽셀을 텍스처 공간으로 이동시켰을 때 등방형(isotropic, 정사각형) 영역
을 차지한다고 가정하고 필터링을 적용했다. 과연 그럴까?
• 아래 그림의 사각형 영역을 픽셀이라 가정하고 텍스처 공간으로 이동시켜 보자(실
제로는 훨씬 작다).
비등방 필터링의 모티브
• 사각형에 입혀진 텍스처는 원근감이 적용되어 사각형 아랫면에서 윗면으로 갈수록
텍스처가 더욱 밀집된 형태로 매핑된다.
• 따라서 텍스처 공간으로 변환하면 정사각형이 아니게 된다!!
텍스처 공간
공간 변환
스크린 공간
확대
비등방 필터링의 모티브
• 아래 그림의 텍스처 공간으로 이동한 픽셀은 실제 하얀색 영역만 차지하고 있다.
• 그러나 등방형 필터링은 정사각형으로 맞추다 보니 본래 영역보다 넓은 범위를 선형
보간하여 픽셀에 하얀색뿐만 아니라 파란색까지 섞이게 된다.
• 이 때문에 텍스처가 축소 될수록 색이 섞여 화면이 번지는 느낌을 준다.
비등방 필터링
• 이 색상번짐을 해결하기 위해 비등방 필터링(anisotropic filtering)이 고안되었다.
• 비등방 필터링도 확대, 축소, 밉맵 필터링에 모두 적용 가능하다.
• 여기서는 밉맵 필터링에 비등방 필터링이 어떻게 적용되는 지 간단히 설명한다.
비등방 필터링
• 비등방 필터링은 스크린 공간에서 텍스트 공간으로 이동했을 때, 정사각형 대신 실
제 변환된 사각형 크기와 유사한 직사각형을 이용한다.
• 이 직사각형을 정사각형으로 쪼개 각 사각형에 대해 선형 보간하여 색을 구한 후,
이 색들을 평균하여 픽셀의 최종 색을 계산한다.
비등방 필터링
• 아래 그림은 가로 세로 비율이 1: 3인 직사각형을 정사각형 𝑝1, 𝑝2, 𝑝3가 나눈다.
• 𝑝2는 밉맵 레벨 1, 2를 가지고 삼선형 보간법을 이용하여 색을 구한다. 𝑝1, 𝑝3에서도
똑같은 과정이 진행하여 최종색을 구한다.
비등방 필터링
• 비등방 필터링을 적용한 결과 텍스처 축소 영역에서 이미지가 비교적 선명하게 보
존되는 것을 볼 수 있다.
Q&A

More Related Content

What's hot

Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Johan Andersson
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
devCAT Studio, NEXON
 
Wrapped diffuse
Wrapped diffuseWrapped diffuse
Wrapped diffuse
민웅 이
 
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
MinGeun Park
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Johan Andersson
 
UE4 Garbage Collection
UE4 Garbage CollectionUE4 Garbage Collection
UE4 Garbage Collection
QooJuice
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
henjeon
 
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
JP Lee
 

What's hot (20)

Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
Terrain Rendering in Frostbite using Procedural Shader Splatting (Siggraph 2007)
 
포인트 셰도우
포인트 셰도우포인트 셰도우
포인트 셰도우
 
2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성2009-2016 기본기(손맵)의 중요성
2009-2016 기본기(손맵)의 중요성
 
Bump Mapping
Bump MappingBump Mapping
Bump Mapping
 
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
김혁, <드래곤 하운드>의 PBR과 레이트레이싱 렌더링 기법, NDC2019
 
Wrapped diffuse
Wrapped diffuseWrapped diffuse
Wrapped diffuse
 
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다  공개용
물리 기반 셰이더의 허와 실:물리기반 셰이더를 가르쳐 봤습니다 공개용
 
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
[0107 박민근] 쉽게 배우는 hdr과 톤맵핑
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
 
DirectX 11 Rendering in Battlefield 3
DirectX 11 Rendering in Battlefield 3DirectX 11 Rendering in Battlefield 3
DirectX 11 Rendering in Battlefield 3
 
UE4 Garbage Collection
UE4 Garbage CollectionUE4 Garbage Collection
UE4 Garbage Collection
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희
 
[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자[1023 박민수] 깊이_버퍼_그림자
[1023 박민수] 깊이_버퍼_그림자
 
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
 
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
 
Gamma and linear color-space
Gamma and linear color-spaceGamma and linear color-space
Gamma and linear color-space
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
 
감마가 어디감마
감마가 어디감마감마가 어디감마
감마가 어디감마
 
「原神」におけるコンソールプラットフォーム開発
「原神」におけるコンソールプラットフォーム開発「原神」におけるコンソールプラットフォーム開発
「原神」におけるコンソールプラットフォーム開発
 
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...Penner   pre-integrated skin rendering (siggraph 2011 advances in real-time r...
Penner pre-integrated skin rendering (siggraph 2011 advances in real-time r...
 

Similar to 2018.02.03 이미지 텍스처링

노동진 Mega splatting
노동진 Mega splatting노동진 Mega splatting
노동진 Mega splatting
drandom
 
111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web
CARROTCG
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
Yggdrasil610
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트
재철 황
 
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링
Mark Choi
 
I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기
hanstar17
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadow
MoonLightMS
 

Similar to 2018.02.03 이미지 텍스처링 (20)

노동진 Mega splatting
노동진 Mega splatting노동진 Mega splatting
노동진 Mega splatting
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
 
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)
 
3D 기술 세미나2주차
3D 기술 세미나2주차3D 기술 세미나2주차
3D 기술 세미나2주차
 
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
[데브루키]노대영_프린이를 위하여(프로그래밍 어린이)
 
111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web111118 ch 4_basic image manipulation_web
111118 ch 4_basic image manipulation_web
 
Graphics 8장 텍스처 적용.pptx
Graphics 8장 텍스처 적용.pptxGraphics 8장 텍스처 적용.pptx
Graphics 8장 텍스처 적용.pptx
 
실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬
 
그림자 이야기
그림자 이야기그림자 이야기
그림자 이야기
 
게임 개발을 위한 렌더링 기법 한성환
게임 개발을 위한 렌더링 기법   한성환게임 개발을 위한 렌더링 기법   한성환
게임 개발을 위한 렌더링 기법 한성환
 
아일렛 온라인에서 사용한 블럭 렌더링 소개
아일렛 온라인에서 사용한 블럭 렌더링 소개아일렛 온라인에서 사용한 블럭 렌더링 소개
아일렛 온라인에서 사용한 블럭 렌더링 소개
 
NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트NDC2015 광개토태왕 테크니컬 아트
NDC2015 광개토태왕 테크니컬 아트
 
[컴퓨터비전과 인공지능] 5. 신경망
[컴퓨터비전과 인공지능] 5. 신경망[컴퓨터비전과 인공지능] 5. 신경망
[컴퓨터비전과 인공지능] 5. 신경망
 
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 2
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 2[컴퓨터비전과 인공지능] 7. 합성곱 신경망 2
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 2
 
코드와 실습으로 이해하는 인공지능
코드와 실습으로 이해하는 인공지능코드와 실습으로 이해하는 인공지능
코드와 실습으로 이해하는 인공지능
 
GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링GameMath-Chapter 08 고급렌더링
GameMath-Chapter 08 고급렌더링
 
Kgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmicKgc2014 jplee allegorithmic
Kgc2014 jplee allegorithmic
 
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
활동가를 위한 속성 일러스트 워크샵 AI 워크샵(2013년)
 
I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기I phone3d programming - Chap04:깊이와 현실감 향상시키기
I phone3d programming - Chap04:깊이와 현실감 향상시키기
 
Depth buffershadow
Depth buffershadowDepth buffershadow
Depth buffershadow
 

More from Sukwoo Lee (7)

진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
진화하는 컴퓨터 하드웨어와 게임 개발 기술의 발전
 
Data-Oriented Design과 유니티 DOTS
Data-Oriented Design과 유니티 DOTSData-Oriented Design과 유니티 DOTS
Data-Oriented Design과 유니티 DOTS
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
행동 트리
행동 트리행동 트리
행동 트리
 
2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑
 
리얼타임 렌더링 - 조명 입문편 -
리얼타임 렌더링 - 조명  입문편 -리얼타임 렌더링 - 조명  입문편 -
리얼타임 렌더링 - 조명 입문편 -
 
Component-Based Entity System과 Data-oriented Design
Component-Based Entity System과 Data-oriented DesignComponent-Based Entity System과 Data-oriented Design
Component-Based Entity System과 Data-oriented Design
 

2018.02.03 이미지 텍스처링

  • 1. 게임프로그래머를 위한 리얼타임 렌더링 - 이미지 텍스처링 - 2018.02.03 데브루키 발표자 이석우
  • 2. 발표자 소개 • 이석우 (1987년생) • 게임 회사로 이직 희망하는 병특(전문연구요원) • 발표자료에 대한 오류사항이나 궁금한 점이 있으면 아래의 메일로 연락주세요. kkndsta@naver.com
  • 3. 참고자료 • 게임 프로그래밍을 위한 3차원 그래픽스 - 저자 : 한정현 -
  • 4. 이미지 텍스처 • 텍스처는 텍셀(texel) 기반의 배열 구조를 가지는 데, 색상 정보를 저장하고 있는 경우 이미 지 텍스처라 부른다. • 흔히 모델에 색상을 입히기 위해 텍스처를 이용한다. 이를 텍스처링(texturing)이라 한다.
  • 5. 텍스쳐링 • 이전 발표에서 텍스쳐링은 프래그먼트(3차원 폴리곤 메쉬를 2차원 데이터로 변 형한 형태)에 텍스쳐를 입히는 것이라 설명하였다. • 그렇다면 어떻게 알맞은 위치에 텍스쳐를 입힐 수 있을까? • 바로 텍스쳐좌표를 이용하여 텍스쳐를 입힌다.
  • 6. 텍스쳐 좌표 • 2차원 이미지 텍스쳐의 요소 하나를 텍스쳐 엘리먼트(texture element), 줄여서 텍 셀이라고 한다.(픽셀과 구분하기 위해 이름을 텍셀이라 한다.) • 각각의 텍셀은 2차원 배열 상의 자신의 위치를 나타내는 인덱스(texcel address)를 가지고 있다.
  • 7. 텍스처 어드레싱 모드 • 텍스처 좌표는 기본적으로 [0, 1] 범위 안에 있지만 범위를 벗어나게 사용하는 경우 도 있다. • 텍스처 어드레싱 모드는 [0, 1] 범위 밖 텍스처 매핑을 어떻게 처리할 지 결정하는 모드이다. • 텍스처 어드레싱 모드의 기본 설정은 clamp로 되어 있다. u,v : border u,v : wrap u,v : mirror u : wrap v : mirror
  • 8. 텍스처 어드레싱 모드 : CLAMP • Clamp: 클램프는 텍스처 경계 부분의 색을 그대로 가져와 [0,1] 범위 밖을 칠한다.
  • 9. 텍스처 어드레싱 모드 : WRAP • Wrap: [0,1] 범위 밖에서도 텍스처가 똑같이 반복되서 매핑된다.
  • 10. 텍스처 어드레싱 모드 : MIRROR • Mirror: [0,1] 범위 밖에서 텍스처가 반사되어 매핑된다.
  • 11. 텍스처 어드레싱 모드 : BORDER • Border: [0, 1] 범위 밖은 임의의 색을 설정하여 색을 입힌다.
  • 12. 텍스처 어드레싱 모드 • Direct3DDevice9::SetSamplerState method를 이용해서 텍스처 어드레싱 모드를 설정한다. HRESULT SetSamplerState( DWORD Sampler, // texture number D3DSAMPLERSTATETYPE Type, DWORD Value ); typedef enum _D3DSAMPLERSTATETYPE { D3DSAMP_ADDRESSU = 1, // The default is D3DTADDRESS_WRAP D3DSAMP_ADDRESSV = 2, D3DSAMP_ADDRESSW = 3, // For 3D texturing D3DSAMP_BORDERCOLOR = 4, …. } D3DSAMPLERSTATETYPE; typedef enum D3DTEXTUREADDRESS { D3DTADDRESS_WRAP = 1, D3DTADDRESS_MIRROR = 2, D3DTADDRESS_CLAMP = 3, D3DTADDRESS_BORDER = 4, .. } D3DTEXTUREADDRESS, *LPD3DTEXTUREADDRESS;
  • 13. 텍스처 필터링 • 스크린 공간의 (x,y)에 위치한 게임 속 사각형이 텍스처 좌표(u,v)를 가질 때, 이 텍스 처좌표는 텍셀 주소(𝑡 𝑥 , 𝑡 𝑦)로 매핑된다. • 그러나 일반적으로 게임 속 사각형과 텍스처는 크기가 다르기 때문에 텍스처를 확 대 또는 축소시킨다. • 텍스처를 확대 또는 축소시키면서 사각형 속 픽셀의 색을 결정하는 과정을 텍스처 필터링이라고 한다.
  • 14. 텍스처 필터링 • 텍스처 필터링은 확대 필터링, 축소 필터링, 밉맵필터링이 있다. • 필터링 방식은 근접점 샘플링, 선형 보간, 비등방 필터링 중에 선택한다. 텍스처 확대 필터링 텍스처 축소 필터링 밉맵 필터링 근접점 샘플링 선형 보간 비등방 필터링
  • 15. 텍스처가 확대될 경우 • 스크린 공간의 사각형 크기가 이미지 텍스처보다 클 경우, 텍스처는 사각형 크기에 맞춰서 확대된다. • 픽셀 > 텍셀(개수)
  • 16. 확대 필터링 : 근접점 샘플링 • 확대 필터링을 근접점 샘플링으로 설정하면 가장 가까운 텍셀의 값을 픽셀에 집어 넣는다. • 아래 그림은 텍셀 근처 픽셀들이 해당 텍셀의 색을 가져옴을 의미한다.
  • 17. 확대 필터링 : 겹선형 보간 • 겹선형 보간( bilinear interpolation)으로 선택하면 근처 텍셀들의 색을 선형 보간하 여 픽셀의 색을 구한다.
  • 18. 텍스처가 축소될 경우 • 스크린 공간의 사각형 크기가 이미지 텍스처보다 작을 경우, 텍스처는 사각형 크기 에 맞춰서 축소된다. • 픽셀 < 텍셀
  • 19. 텍스트 축소 시 문제점 • 텍스처 축소 필터링도 마찬가지로 근접점 샘플링 혹은 겹선형 보간 중에 사용한다. • 그러나 어떠한 필터링을 사용해도 텍스처 축소 시 한 가지 문제가 발생한다. • 체크 무늬 모양의 텍스처를 사용한다고 가정하자. • 텍스처를 축소할 경우 픽셀이 듬성듬성 텍셀들 사이에 듬성듬성 존재 한다.
  • 20. 텍스트 축소 시 문제점 • 그림 (a)는 픽셀들이 검은색 텍셀사이에 존재하므로 어떤 필터링을 사용해도 검은 색으로 보인다. 즉, 회색을 인색하지 못하므로 체크 무늬를 표현하지 못한다. • 그림 (b)는 반대로 회색 텍셀사이에 존재하므로 회색으로만 보인다. • 이것도 에일리어싱(Aliasing) 문제 중 하나이다(우리가 흔히 알고 있는 에일리어싱 문제는 게임 속 계단현상을 말하는 것으로 이것과는 다르다). (a) (b)
  • 21. 밉맵 필터링의 모티브 • 텍스처 축소 시 텍스처가 스크린 공간 프리미티브에 비해 크기 때문에 에일리어싱 문 제가 발생하였다. • 그렇다면 어떻게 해결해야 할까? • 텍스처를 작게 만들어서 그 크기가 프리미티브와 비슷해지도록 하면 해결되지 않을까? • 즉, 픽셀과 텍셀 간에 일대일 대응이 성립하도록 텍스처를 작게 만들면 된다. • 이 아이디어로 착안된 게 바로 밉맵 필터링이다.
  • 22. 밉맵이란? • 시시각각 크기가 변하는 게임 속 사각형과 크기가 맞는 텍스처를 대응시키기 위해 선 다수의 텍스처를 필요로 한다. • 따라서 원본 텍스처를 기반으로 다운샘플링(DOWN SAMPLING)하여 다수의 텍스처 를 생성하고 이것들을 피라미드처럼 크기 별로 묶은 것을 밉맵이라 한다.
  • 23. 기본 배경 지식 • 텍스처 해상도는 기본적으로 2𝑙 × 2𝑙 크기의 정사각형으로 만든다. • 이러한 텍스처는 다음과 같은 이점이 있다. 비균일 밉맵보다 메모리를 절약하고 캐시 효율이 좋다. 비트 연산에서 2^n의 숫자라면 연산량을 줄일 수 있기 때문에 텍스처 매핑이 작업이 최 적화 된다. • 따라서 원본 텍스처의 해상도가 2𝑙 × 2𝑙 일 경우 밉맵의 레벨은 0부터 𝑙까지 존재한다.
  • 24. 밉맵 필터링 : 레벨의 선택 • 먼저 알맞은 크기의 텍스처를 정하기 위해 선 밉맵 레벨을 계산해야 한다. • 픽셀이 텍스처에서 m(가로) x m(세로) 크기 의 텍셀 블록을 차지하는 경우 밉맵 레벨은 𝑙𝑜𝑔2 𝑚이다. • 왼쪽 그림에선 픽셀의 2 x 2 크기의 텍셀 블 록을 차지하여 레벨 1이 선택되었다.
  • 25. 밉맵 필터링 • 그러나 만일 m이 제곱이 아니라면 레벨은 실수가 아닌 정수가 된다. • 왼쪽 그림은 3x3 크기의 사각형의 레벨을 계 산하면 𝑙𝑜𝑔23 = 1.585이다. • 필터링 방식은 가장 가까운 레벨을 선택하는 근접점 샘플링과 두 레벨 사이에서 선형보간 하는 방법 중 선택할 수 있다.
  • 26. 밉맵 필터링 • 텍스처 확대와 축소에는 겹선형 보간을 사용하였지만 밉맵 필터링의 선형 보간은 삼 선형 보간(trilinear interpolation)을 사용한다. • 먼저 레벨 1과 레벨 2에 대해 각각 겹선형 보간이 진행되고 그 결과를 가지고 소수점 이하의 값(여기서는 0.585)을 이용해 다시 한번 선형 보간한다.
  • 27. 시선과 수직일 때 • 시선과 수직을 이루는 직사각형에 텍스처를 매핑할 때 밉맵 필터링의 결과는 아래 와 같이 아무 문제 없이 필터링된다.
  • 28. 시선과 수직이 아닐 때 • 그러나 만약 사각형이 기울어져 있다면 어떻게 될까? • 스크린 공간의 사각형의 각 픽셀에서 이 텍스처가 확대 인지 축소인지 결정한다. • 텍스처가 확대되는 부분에선 레벨 0인 텍스처를 사용하고, 축소되는 부분에서는 여 러가지 밉맵 레벨이 사용한다(뒤로 갈수록 레벨이 올라간다).
  • 29. 필터링 설정 방법 • 위에서 설명한 텍스처 필터링은 하드웨어가 구현해주지만 그래픽스 API는 프로그래머가 제어 할 수 있게 해준다. • 텍스처 축소(magnifiaction) 및 확대(minification), 밉맵 필터링에 대해 근접점 샘플링과 선형 보간을 각각 선택하여 결과를 확인해 보자.  MAGFILTER : 텍스처 확대 필터링  NEAREST : Nearest point sampling(근접점 샘플링)  BILINEAR : Bilinear interpolation(겹선형 보간)  MINFILTER : 텍스처 축소 필터링  NEAREST : Nearest point sampling(근접점 샘플링)  BILINEAR : Bilinear interpolation(겹선형 보간)  LEVEL : 밉맵 필터링  NEAREST : Nearest point sampling(근접점 샘플링)  LINEAR : Two levels to be linearly interpolated (삼선형 보간)
  • 30. 필터링 결과 : 적용 전 참고사항 • 이제 실제 필터링을 적용한 결과를 보도록 하자. • 텍스처 확대 및 축소를 구분하기 위해 레벨 0 텍스처를 빨간색이라 가정한다.
  • 31. 필터링 결과 : 적용 전 참고사항 • 프로그래머의 설정에 따라 근접점 샘플링 혹은 선형 보간 필터링이 된다. • MAGFILTER(확대필터), MINFILTER(축소필터), LEVEL(밉맵필터) 등을 바꿔가며 결과 를 확인한다. magnification minification area:2 level 0 level 0 level 0 level 1 a b c d e e c d b a
  • 33. 비등방 필터링의 모티브 • 지금까지 픽셀을 텍스처 공간으로 이동시켰을 때 등방형(isotropic, 정사각형) 영역 을 차지한다고 가정하고 필터링을 적용했다. 과연 그럴까? • 아래 그림의 사각형 영역을 픽셀이라 가정하고 텍스처 공간으로 이동시켜 보자(실 제로는 훨씬 작다).
  • 34. 비등방 필터링의 모티브 • 사각형에 입혀진 텍스처는 원근감이 적용되어 사각형 아랫면에서 윗면으로 갈수록 텍스처가 더욱 밀집된 형태로 매핑된다. • 따라서 텍스처 공간으로 변환하면 정사각형이 아니게 된다!! 텍스처 공간 공간 변환 스크린 공간 확대
  • 35. 비등방 필터링의 모티브 • 아래 그림의 텍스처 공간으로 이동한 픽셀은 실제 하얀색 영역만 차지하고 있다. • 그러나 등방형 필터링은 정사각형으로 맞추다 보니 본래 영역보다 넓은 범위를 선형 보간하여 픽셀에 하얀색뿐만 아니라 파란색까지 섞이게 된다. • 이 때문에 텍스처가 축소 될수록 색이 섞여 화면이 번지는 느낌을 준다.
  • 36. 비등방 필터링 • 이 색상번짐을 해결하기 위해 비등방 필터링(anisotropic filtering)이 고안되었다. • 비등방 필터링도 확대, 축소, 밉맵 필터링에 모두 적용 가능하다. • 여기서는 밉맵 필터링에 비등방 필터링이 어떻게 적용되는 지 간단히 설명한다.
  • 37. 비등방 필터링 • 비등방 필터링은 스크린 공간에서 텍스트 공간으로 이동했을 때, 정사각형 대신 실 제 변환된 사각형 크기와 유사한 직사각형을 이용한다. • 이 직사각형을 정사각형으로 쪼개 각 사각형에 대해 선형 보간하여 색을 구한 후, 이 색들을 평균하여 픽셀의 최종 색을 계산한다.
  • 38. 비등방 필터링 • 아래 그림은 가로 세로 비율이 1: 3인 직사각형을 정사각형 𝑝1, 𝑝2, 𝑝3가 나눈다. • 𝑝2는 밉맵 레벨 1, 2를 가지고 삼선형 보간법을 이용하여 색을 구한다. 𝑝1, 𝑝3에서도 똑같은 과정이 진행하여 최종색을 구한다.
  • 39. 비등방 필터링 • 비등방 필터링을 적용한 결과 텍스처 축소 영역에서 이미지가 비교적 선명하게 보 존되는 것을 볼 수 있다.
  • 40. Q&A