SlideShare a Scribd company logo
1 of 107
Download to read offline
게임프로그래머를 위한
리얼타임 렌더링
- 입문편(1) -
2017.12.09 데브루키 발표자 이석우
발표자 소개
• 이석우 (1987년생)
• 게임 회사로 이직 희망하는 병특(전문연구요원)
• 발표자료에 대한 오류사항이나 궁금한 점이 있으면 아래의 메일로 연락주세요.
kkndsta@naver.com
컴퓨터 그래픽스는 크게 두가지로 나뉜다
Vector Graphics Raster Graphics
벡터 그래픽스
• 기하학적인 방법으로 그래픽을 표현한다.
해상도 무한!!!
그러나 느리다…
아직까지 완벽히 지원하는 장비가 없다.
래스터 그래픽스
• 래스터라 불리는 2차원 그리드에 색을 저장하여 그래픽을 표현한다.
그리드 속 셀 하나하나를 픽셀이라 부른다.
래스터 그래픽스
• 래스터라 불리는 2차원 그리드에 색을 저장하여 그래픽을 표현한다.
해상도가 정해져 있기 때문에,
확대하면 퀄리티가 떨어진다.
컴퓨터 하드웨어는 래스터 그래픽스를 지원한다.
오늘의 주제
• 따라서 오늘은 래스터 기반 리얼타임 렌더링에 대해 알아 봅시다!
먼저 CG에서 렌더링이란?
• 컴퓨터 상에서 이미지를 생성하는 것을 말한다.
Computer
Scene
Image
• 래스터 이미지가 도화지라면 컴퓨터는 그림을 그리는 화가라 생각하면 된다.
Computer
Scene
Image
먼저 CG에서 렌더링이란?
먼저 CG에서 렌더링이란?
• 이미지 속 전체 내용물을 장면(SCENE)이라 하며, 흔히 장면(SCENE)을 렌더링한다고 말한다.
Computer
Scene
Image
앞에 리얼타임이 붙는 이유
• 실시간(REALTIME) 렌더링은 실시간으로 이미지를 생성하고 화면에 보여주는 것을 말한다.
• 반면 비실시간 렌더링은 이미지를 생성하는 모든 작업을 먼저 완료한 후 완성된 이미지를
순서대로 화면에 보여준다.
비실시간 렌더링(예 : 애니메이션)
당연한 얘기지만 비실시간이 퀄리티가 더 높다!
실시간 렌더링(예 : 게임)
앞에 리얼타임이 붙는 이유
• 우리가 아는 애니메이션은 플레이타임을 정하고 콘티대로 만들기 때문에 모든 장면을 미
리 알고 개발한다. 따라서 비실시간 렌더링이 가능하다.
앞에 리얼타임이 붙는 이유
• 반면 게임은 유져 입력을 받고 캐릭터가 움직이기 때문에 어떤 행동을 할 지 미리알 수 없
다. 플레이 타임 또한 유저가 포기하지 않는 한 계속된다.
따라서 게임은 장면을 실시간으로 렌더링하고 화면에 보여주는 리얼타임 렌더링을 적용한다.
이제 본격적으로 렌더링으로 들어가보기 전에…
한가지 알아야 할 것이 있다.
바로 모델링이다. 모델이 없으면 화면에 보여줄 게 없다.
모델의 구성요소
폴리곤 메쉬는 모델의 형상을 나타낸다. 텍스쳐는 모델에 입힐 색상이다.
• 모델은 폴리곤 메쉬와 텍스쳐로 구성된다.
골격(SKELETON)도 필요하다
• 폴리곤 메쉬에 골격을 입히는 작업을 리깅이라 한다.
캐릭터에 움직임을 넣기 위해선 리깅이 필수적이다.
LEVEL OF DETAIL
• LOD는 모델의 디테일 수준을 말하며 게임의 퀄리티의 컴퓨터 성능을 고려하여 적절한 수
준으로 조절 한다.
모델의 저장
모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다.
• 여기서 등장하는 것이 바로 버텍스(VERTEX)이다.
버텍스는 모델을 구성하는 최소한의 단위를 뜻한다.
 버텍스 구성 요소
 위치
 노말 벡터
 텍스쳐 좌표
모델의 저장
모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다.
• 그러나 위치 정보(버텍스)만으로는 폴리곤 메쉬를 만들 수 없다. 각 점을 연결시키는 선정
보를 가지고 있어야 컴퓨터는 폴리곤 메쉬를 인식할 수 있다.
 버텍스 구성 요소
 위치
 노말 벡터
 텍스쳐 좌표
버텍스를 이용한 데이터 저장 방법
• 따라서 버텍스를 담는 버텍스를 버퍼에 삼각형을 연결하는 순으로 버텍스를 채워넣는다.
 이를 NON-INDEXED TRIANGLE LIST라 부른다.
버텍스를 이용한 데이터 저장 방법
• NON-INDEXED TRIANGLE LIST
 그러나 이 방법은 중복되는 데이터가 많아 비효율적이다.
중복
발생
중복
발생
모델의 저장
모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다.
• 이 중복 문제를 해결하기 위해 등장한 것이 인덱스 버퍼이다.
버텍스 버퍼의 인덱스를 이용해 각 점들을 이어준다.
버텍스와 인덱스를 이용한 저장방법
• INDEXED TRIANGLE LIST
• VERTEX는 VERTEX BUFFER에 오직 하나만 저장된다.
• 삼각형 하나당 3개의 인덱스가 인덱스 버퍼에 저장된다.
이제 인덱스를 가지고 삼각형을 연결한다.
삼각형 연결 규칙
• 참고로 위의 두 방법 모두 시계 방향 혹은 반시계 방향 순으로 선을 잇는다.
• 이를 삼각형을 감는 방향이라 말하며 이것은 후에 뒷면 제거 단계에서 사용된다.
1
2
3
1
2
3
삼각형 연결 규칙
• 참고로 위의 두 방법 모두 시계 방향 혹은 반시계 방향 순으로 선을 잇는다.
1
2
3
1
2
3
모델 내보내기(EXPORTING)
• 모델링 프로그램과 그래픽스 API의 좌표계가 다르기 때문에 주의해서 EXPORTING해야 한다.
맥스에서 OPENGL로 내보내기
• OPENGL로 내보낼 땐 YZ축 대칭 이동시켜야 한다.
맥스에서 OPENGL로 내보내기
맥스에서 DIRECTX로 내보내기
• YZ축 대칭 이동(MAX → OPENGL)에서 Z좌표 부호를 변경하면 된다.
맥스에서 DIRECTX로 내보내기
• 그러나 렌더링 결과를 보면 앞면이 제거되는 문제가 생긴다.
앞면이 컬링된다!
컬링 문제가 발생하는 이유
• DIRECTX는 왼손좌표계이므로 시계 방향으로 감긴 삼각형을 정면으로 판별한다.
• 따라서 뒷면 제거 설정을 D3DCULL_CCW(기본)에서 D3DCULL_CW로 바꾸면 된다.
드디어 렌더링에 대해 알아보자
• 렌더링은 CPU가 아닌 GPU에 의해서 수행된다.
CPU
데이터 VRAM
GPU 렌더링
드디어 렌더링에 대해 알아보자
• 이때 CPU와 GPU는 메모리를 공유하지 않고 서로 다른 메모리를 사용하기 때문에 CPU에
서 모델 데이터를 로드한 후 VRAM으로 보낸다.
CPU
데이터 VRAM
GPU 렌더링
데이터 이동 매우 느리므로 주의!
렌더링이 GPU에서 수행되는 이유
• 데이터 이동에 따른 시간 낭비에도 불구하고 왜 GPU에서 렌더링을 수행할까?
• GPU가 CPU에 비해 병렬 작업이 월등히 유리하게 설계되었기 때문이다.
CPU는 커다란 코어를 2~8개 넣지만 GPU는 작은 코어를 수백개씩 넣는다.
렌더링이 GPU에서 수행되는 이유
• 픽셀 단위의 래스터 이미지는 퀄리티가 높아질수록 픽셀의 개수도 많아진다.
따라서 픽셀을 한번에 하나씩 채우기 보단 한번에
여러 픽셀을 채우는 것이 가능한 GPU에서 수행하
는 게 훨씬 빠르다.
장면이 화면에 표시되는 과정
• 장면이 화면에 표시되는 과정은 다음과 같다.
백버퍼 초기화
데이터 설정
렌더링
화면 표시
1. 장면을 아무것도 그려지지 않은 상태로 초기화한다.
4. 장면이 화면에 보여진다.
3. 장면의 객체들를 렌더링한다.
2. 렌더링에 필요한 데이터를 설정한다.
백버퍼
• 렌더링의 출력(OUTPUT)을 백버퍼(BACK BUFFER)라 한다.
백버퍼 초기화
데이터 설정
렌더링
화면 표시
버퍼(BUFFER)는 컴퓨터의 주기억장치와 주변 장치 사이에서 데이터
를 주고 받을 때 정보를 기억해 두고 사용할 수 있는 공간을 말한다.
즉, 백버퍼는 래스터 이미지가 데이터화하며 저장된 형태라고 생각
하면 된다.
백버퍼의 데이터는 화면 표시 단계에서 이미지 형태로 변화하여
화면에 표시된다.
백버퍼라 불리는 이유
• 사실 렌더링 작업에는 두가지 버퍼를 이용한다. 이것을 더블 버퍼링이라 한다.
• 화면에 보여지는 것을 프론트 버퍼(FRONT BUFFER)라고 한다.
• 이전 슬라이드의 렌더링 작업이 진행되고 있는 것을 백 버퍼(BACK BUFFER)라고 한다.
버퍼를 하나만 사용하지 않는 이유
• 버퍼가 하나인 상태로 렌더링 과정을 진행하면 이전 장면과 현재 장면이 섞이게 된다. 이
를 테어링(TEARING)이라고 한다.
기존
화면
새 화면
더블 버퍼링 적용 전 화면 전환
게임 속 테어링 현상
버퍼를 하나만 사용하지 않는 이유
• 이중 버퍼링을 사용하면 테어링을 방지할 수 있다. 추가적으로 삼중 버퍼링을 사용하기도
한다.
기존
화면
오프
스크린
새화면교체
더블 버퍼링 적용 후 화면 전환
렌더링 과정
• 지금부터 GPU에서 장면의 객체를 어떤 과정을 거쳐 그리는지 살펴보자.
렌더링 렌더링 구간의 과정을 단계별로 묶은 것을 렌더링 파이프라인이라 한다.
렌더링 파이프라인
• 렌더링 파이프라인은 버텍스 처리 단계, 래스터화 단계, 프래그먼트 처리 단계, 출력병합
단계로 이루어진다.
렌더링 파이프라인
• 이중 버텍스 처리 단계와 프래그먼트 처리 단계는 프로그래밍이 가능하고 래스터라이재
이션과 출력병합 단계는 하드웨어가 직접 처리한다.
프로그래머가
처리
하드웨어가 처리하드웨어가 처리
버텍스 처리
• 버텍스 처리 단계에서는 모델의 공간을 변환한다.
• 프로그래머는 버텍스 쉐이더(VERTEX SHADER)에서 이 작업을 처리한다.
아핀(AFFINE) 변환
• 3차원 그래픽스에서 공간 변환을 할 때 사용되는 변환을 아핀변환이라 한다.
• 아핀변환은 다음의 3가지 기능이 가능하다.
 이동변환(TRANSLATION): 객체의 위치를 이동시킨다.
 회전변환(ROTATION): 객체를 기준축을 중심으로 회전시킨다.
 스케일링(SCALING): X, Y, Z 축을 기준으로 비율에 따라 객체의 크기를 조절한다.
WORLD TRANSFORM
• 객체 공간(OBJECT SPACE)에 있는 객체를 게임 월드 공간으로 배치하는 것을 WORLD
TRANSFROM이라 한다.
아핀 변환을 이용한 월드 변환 예
• 스케일링을 통해 구의 반지름이 2배가 되었다.
아핀 변환을 이용한 월드 변환 예
• 회전 변환은 X, Y, Z 중 어느 축으로 회전할 지에 따라 아래의 행렬 공식을 이용해 회전행렬
을 구할 수 있다.
x축 회전 행렬 y축 회전 행렬 z축 회전 행렬
아핀 변환을 이용한 월드 변환 예
• 주전자는 Y축을 기준으로 90도 회전했으므로 아래와 같이 회전 행렬을 구할 수 있다.
아핀 변환을 이용한 월드 변환 예
• 주전자는 회전 후 X 방향으로 7만큼 이동하므로 이동 행렬은 아래와 같다.
아핀 변환을 이용한 월드 변환 예
• 보통 회전과 이동을 하나로 결합한 행렬을 사용하는 것이 편리하다.
VIEW TRANSFORM
• 게임 월드 공간에 있는 객체들을 뷰공간으로 변환하는 것을 뷰변환이라 한다.
• 유저가 바라보는 시점으로 바뀌는 것이라 생각하면 이해하기 쉽다.
 EYE : 카메라 위치
 AT : 카메라가 바라보는 방향
 UP : 카메라 윗 방향 벡터
VIEW FRUSTUM
• VIEW FRUSTUM은 카메라를 통해 볼 수 있는 가시영역의 범위를 의미한다. (가시영역의 모
든 범위를 다 보여주는 것은 불가능한데다 비효율적이다.)
 FOVY, ASPECT, N, F으로 프러스텀을 정의할 수 있다.
PROJECTION TRANSFORM
• 마지막으로 PERSPECTIVE PROJECTION TRANSFORM은 뷰공간에서 원근법이 적용된 공간으
로 변환한다. 따라서 같은 객체라도 멀리 있으면 작게 보이고, 가까이 있으면 크게 보인다.
투영 공간 혹은 클립 공간이라 부른다.
PROJECTION TRANSFORM
• 오른손 좌표계(OPENGL 해당)를 사용할 경우 Z좌표의 부호를 변경해서 왼손좌표계로 바꿔
줘야 한다. 투영 매트릭스
이유는 래스터화 단계에서 하드웨어는 왼손 좌표계를 사용하기 때문!!
Z좌표 부호 변경
투영 변환 행렬 유도
• VIEW TRANSFORM 유도
tan(fovy/2) = 1/-z 이다.
따라서 z = -cot(fovy/2)가 된다.
1
-z
투영 변환 행렬 유도
• VIEW TRANSFORM 유도
같은 직선을 지나는 임의의 점 y,z와 y’,z’는
아래와 같은 비례식이 성립한다.
투영 변환 행렬 유도
종횡비를 이미 알고 있으므로
fovx 대신 fovy에 대한 식으로
바꿀수 있다.
투영 변환 행렬 유도
3번째 줄의 z와 z’ 성분으로만 이루어져 있으므로 x,y 성분은 0이다.
-z를 곱한다. 이 둘은 동일한 카테시안 좌표를 가지고 있다.
이제 x’, y’, z’를 알고있으므로 이를 동차 좌표계로 표시하면 아래의 식과 같다.
행렬화
투영 변환 행렬 유도
가까운 평면과 먼 평면의 z 값은 0과 -1이다.
래스터화(RASTERIZATION)
• 버텍스 처리 단계에서 공간 변환된 버텍스는 래스터화 단계에서 삼각형으로 조립되고 래
스터로 변형된다. 이 구간은 프로그래머가 아닌 하드웨어가 처리한다.
래스터화 단계
• 맨 처음 래스터에 대하여 설명하였다. 바로 래스터화 단계를 설명하기 위해서 였다. 래
스터화 단계란 점, 선, 면으로 이루어진 폴리곤 메쉬를 래스터로 변형시키는 단계라 생
각하면 이해하기 쉽다.
래스터화 단계의 작업
• 래스터화 단계를 세부적으로 나누면 다음과 같다.
• 프리미티브 어셈블리 : 버텍스를 삼각형으로 조립한다.
• 클리핑 : 클립 공간의 육면체 범위를 벗어나는 폴리곤을 제거한다.
• 원근나눗셈 : 𝜔로 X,Y,Z를 나누어 원근감을 적용한다.
• 뒷면 제거 : 카메라 기준으로 뒷면의 폴리곤을 제거한다.
• 뷰포트 변환 : 화면에 표시되는 스크린 공간으로 변환한다.
• 스캔 컨버젼 : 삼각형을 래스터화(혹은 픽셀화)한 프래그먼트를 생성한다.
viewport
transform
primitive
assembly
clipping
perspective
division
back-face
culling
scan
conversion
PRIMITIVE ASSEMBLY
• 버텍스 쉐이더에서 공간 변환을 한 버텍스를 PRIMITIVE ASSEMBLY 단계에서 삼각형으로 조
립한다.
클리핑
• 클리핑은 뷰프러스텀 바깥에 있는 폴리곤을 잘라낸다.
삼각형 𝑡1는 완전히 범위를 벗어나므로 버려진다.
삼각형 𝑡2는 범위 안에 있으므로 그대로 그려진다.
삼각형 𝑡3는 범위를 벗어난 부분만 제거되고 그려진다.
클리핑
• 클립 공간(CLIP SPACE)에서 클리핑이 진행된다.
(뷰공간)
(클립공간)
클리핑은 프러스텀(시야범위를 나타내는 모형)이 직
육면체로 된 클립공간에서 행해진다. 앞의 슬라이드
는 이해를 돕기위에 뷰공간을 기준으로 클리핑을 설
명하였다.
원근나눗셈(PERSPECTIVE DIVISION)
• 위의 버텍스 처리 단계에서 투영 변환 후 원근감 적용한다고 말했다.
• 그러나 실제 적용된 건 아니고 동차좌표계의 𝜔에 Z에대한 거리값이 곱해진다.
• 이 값을 래스터화 단계에서 나누어 원근감이 적용된 좌표로 변형된다. 이를 원근 나눗셈
이라 한다.
• 원근 나눗셈이 적용된 좌표를 정규화된 장치 좌표(NORMALIZED DEVICE COORDINATES) 혹
은 NDC라고 부른다.
투영 매트릭스 NDC
원근나눗셈(PERSPECTIVE DIVISION)
• 실제 길이는 같지만 카메라로 부터 가까운 있는 점과 멀리 있는 점에 대해 원근 나눗셈을
적용 예이다.
뒷면 제거(BACK-FACE CULLING)
• 카메라에 보이지 않는 뒷면(BACK FACE)을 제거 한다.
면의 노말 벡터와 카메라에서 면까지의 벡터의 외적이 0보다 크면 앞면, 작으면 뒷면이다.
하지만 이 방법을 사용하진 않는다.
뒷면 제거(BACK-FACE CULLING)
• 행렬식을 이용하면 삼각형의 감는 방향을 알 수 있으므로 이를 통해 뒷면인지 판별한다.
• 앞면인 경우 행렬식은 양수이며, 삼각형은 시계방향으로 감긴다.
• 뒷면인 경우 행렬식은 음수이며, 삼각형은 반시계방향으로 감긴다.
• 단, DIRECTX는 왼손좌표계이므로 뒷면이 시계방향이다.
VIEWPORT TRANSFORM
• 뷰포트 변환은 화면에 표시되는 컴퓨터 스크린 공간으로 이동시킨다.
• 뷰포트 변환은 다음 슬라이드의 3가지 작업을 한다.
VIEWPORT TRANSFORM
• 첫번째로, 모니터 스크린에서 Y축 좌표는 반대이므로 Y축을 반전시킨다.
VIEWPORT TRANSFORM
• 두번째로, 모니터 스크린 속 보여지는 비율에 맞게 스케일링 한다.
VIEWPORT TRANSFORM
• 세번째로, 모니터 스크린 속 알맞은 위치로 이동시킨다.
VIEWPORT TRANSFORM
• 이전 슬라드의 세 가지 모두 적용된 행렬은 아래와 같다.
대부분의 경우 뷰포트는 윈도우 전체 영역을 차지 한다. 이 경우 MinX와 MinY는 모두 0이 된다.
또한 대개의 경우 MinZ와 MaxZ는 각각 0.0과 1.0으로 설정된다.
따라서 최종적인 식은 오른쪽처럼 단순해진다.
SCAN CONVERSION
• 버텍스를 삼각형으로 조립하고 스크린 공간으로 이동시켰으니 이제 래스터로 변형시키
는 일만 남았다. 바로 스캔 컨버젼에서 그 작업을 한다. 여기서 래스터화된 결과물을 프래
그먼트(FRAGMENT)라고 한다.
삼각형 프래그먼트
SCAN CONVERSION
• 래스터는 픽셀을 최소 단위로 가지는 2차원 그리드 형태의 데이터 집합이라고 위에서
설명하였다. 삼각형을 어떻게 픽셀 단위의 데이터로 변형 시킬 수 있을까?
바로 선형 보간을 이용한다.
SCAN CONVERSION
• 삼각형에는 3 개의 버텍스가 있고 이 버텍스에는 노말 벡터, 텍스쳐 좌표, 색상, 깊이 값 등
이 들어 있다. 이 값을 선형 보간하여 각 픽셀에다 값을 채우면 된다.
SCAN CONVERSION
• 색상 (RGB) 중에 R에 대한 선형 보간의 예
먼저 y축 좌표를 기준으로 삼각형의 선을 따라 보간한다.
SCAN CONVERSION
• 색상 (RGB) 중에 R에 대한 선형 보간의 예
그림에서는 오른쪽 선에 대한 보간만 나와있다.
다른 나머지 선들도 똑같은 작업을 한다.
SCAN CONVERSION
• 색상 (RGB) 중에 R에 대한 선형 보간의 예
이전 슬라이드에서 y축을 기준으로 선형 보간한 값을 x축을 기준으로 다시 선형 보간하여 각 픽셀의 위치에 대한
R 값을 계산한다. 이처럼 선형 보간이 x, y축을 기준으로 두단계로 수행되는 것을 겹선형 보간(bilinear
interpolation)이라 한다.
TOP-LEFT RULE
• 변 위에 픽셀이 위치하면 위쪽 혹은 왼쪽변을 가진 삼각형이 소유권을 가지므로 해당 삼
각형의 버텍스를 가지고 선형보간한다.
프래그먼트 처리
• 래스터화 단계에서 생성된 프래그먼트의 속성은 노말 벡터, 텍스쳐 좌표, 색상(RGBA), 깊
이, ETC 등을 포함한다. 이 속성들을 이용하여, 프래그먼트 처리 단계에서 프래그먼트의 최
종 색을 결정한다. 이 프래그먼트 처리를 하는 쉐이더를 픽셀 쉐이더라고 한다.
프래그먼트 처리
• 프래그먼트 처리 단계에서 가장 중요한 것은 두가지이다.
① 텍스쳐링 : 모델링 과정에서 생성한 텍스쳐를 이 단계에서 입힌다.
② 조명 : 빛과 물체 사이의 상호작용을 추가한다.
텍스쳐링
• 앞에서 텍스쳐링은 프래그먼트(3차원 폴리곤 메쉬를 2차원 데이터로 변형한 형태)에 텍
스쳐를 입히는 것이라 설명하였다.
• 그렇다면 어떻게 알맞은 위치에 텍스쳐를 입힐 수 있을까?
• 바로 텍스쳐좌표를 이용하여 텍스쳐를 입힌다.
텍스쳐 좌표
• 2차원 이미지 텍스쳐의 요소 하나를 텍스쳐 엘리먼트(TEXTURE ELEMENT), 줄여서 텍셀이라
고 한다.(픽셀과 구분하기 위해 이름을 텍셀이라 한다.)
• 각각의 텍셀은 2차원 배열 상의 자신의 위치를 나타내는 인덱스(TEXCEL ADDRESS)를 가지
고 있다.
텍스쳐 좌표
• 프래그먼트에는 텍셀 어드레스가 아닌 정규화된 텍스쳐 좌표(U, V)를 사용한다.
• 텍셀 어드레스를 사용하면 같은 해상도를 가진 텍스쳐만 매핑할 수 있지만 텍스쳐 좌표를
사용하면 다른 해상도를 가진 다수의 이미지들의 텍스쳐 좌표를 변경하지 않고 표면에 부
착할 수 있다.
SUARFACE PARAMETERIZATION
• 텍스쳐 좌표는 모델링 단계에서 생성되는 데, 폴리곤 메쉬의 버텍스에 텍스쳐 좌표를 할
당하는 작업을 표면 파라미터화(SURFACE PARAMETERIZATION이라 한다.
• 일반적으로 표면 파라미터화는 3차원 표면을 2차원 평면으로 펼친 후 좌표를 할당한다.
차트와 아틀라스
• 각각의 폴리곤 메쉬의 텍스쳐를 차트(CHART)라 하고 여러 차트를 하나의 텍스쳐 모은 것
을 아틀라스(ATLAS)라고 부른다.
차트
아틀라스
텍스쳐 좌표를 텍셀 주소로 변환하기
• 폴리곤 메쉬의 버텍스들이 가진 텍스쳐 좌표는 래스터화 단계의 스캔 변환 단계에서 보간
되어 각 프래그먼트에 할당되었다.
텍스쳐 좌표를 텍셀 주소로 변환하기
• 텍스쳐 좌표는 텍셀 주소로 변환하기 위해 아래의 식을 이용한다.
t : 텍셀 주소
S: 텍스쳐 해상도
u, v : 텍스쳐 좌표
조명(LIGHTING OR ILLUMINATION)
• 조명은 광원과 물체 사이의 상호작용을 처리하는 기술이다.
• 장면의 사실성을 부과하기 위해서 프래그먼트 처리 단계에서 조명 효과를 계산하여 색상
에 반영한다.
• 자세한 설명은 다음 발표 때 추가!
출력 병합(OUTPUT MERGE)
• 픽셀 쉐이더에서 텍스쳐링과 조명 등을 통해 프래그먼트의 색을 구하였다. 출력 병합 단
계에서는 픽셀 쉐이더에서 구한 색을 화면에 보여줄 지 결정한다. 이 단계에서는 다음의
작업을 한다.
• 깊이 테스트 : 깊이값을 비교하여 픽셀 버퍼에 저장할 지 결정한다.
• 스텐실 테스트 : 스텐실 버퍼를 비교하여 픽셀 버퍼에 저장할 지 결정한다.
• 알파 블렌딩 : 픽셀 버퍼의 픽셀과 프래그먼트의 색상을 혼합시킨다.
깊이 테스트
• 깊이 테스트는 프래그먼트의 깊이 값을 현재 픽셀 버퍼의 픽셀과 비교하여 작으면 프래그
먼트 색상과 깊이값으로 해당 픽셀의 속성을 갱신한다. 이를 Z 버퍼링(Z BUFFERING)이라고
도 한다.
깊이 테스트
• Z-버퍼링은 폴리곤을 그리는 순서에 독립적이다. 따라서 폴리곤을 그리는 순서를 임의로
바꿔도 결과는 항상 같다.
Z 버퍼링의 단점
• Z 버퍼링은 파이프라인의 마지막 단계에서 수행된다. 이는 그려지는 프래그먼트 뿐만 아
니라 버려질 프래그먼트까지 색상을 전부 계산한다. 한마디로 매우 비효율적이다.
래스터화 단계 Z컬링
• Z 버퍼링의 문제를 해결하기 위해 프래그먼트 처리 단계 전에 래스터화 단계에서 깊이
테스트하여 프래그먼트를 선별할 수 있도록 개선되었다. HI-Z 와 EARLY-Z가 있다.
래스터화 단계 Z컬링
• HI-Z는 타일기반 컬링이지만 EARLY-Z는 픽셀기반 컬링이다. HI-Z가 먼저 진행된 후
EARLY-Z가 진행된다.
• HI-Z는 별도의 버퍼를 사용 하지만 EARLY-Z는 깊이 버퍼를 그대로 사용한다.
래스터화 단계 Z컬링
• HI-Z와 EARLY-Z는 그래픽스 API(DIRECTX/OPENGL)에서 기본적으로 제공한다.
• 앞에 있는 거부터 순서대로 그리면 자동으로 적용된다.
EARLY-Z PASS
• EARLY-Z 기능을 최대한 활용하고자 하는 목적으로 고안된 게 EARLY-Z PASS이다.
• 투패스 알고리즘이기 때문에 사용하기 위해선 코드를 수정해야 한다. (소스 코드 참조)
• EARLY-Z PASS는 두 번의 렌더링 과정을 거친다.
 첫번째 패스는 컬러 버퍼는 채우지 않고 깊이 버퍼만 채운다.
 두번째 패스는 통상적인 렌더링을 수행한다.
• 일반적인 싱글패스 렌더링보다 빠르다.
• 소스 코드 : HTTPS://SOFTWARE.INTEL.COM/EN-US/ARTICLES/EARLY-Z-REJECTION-SAMPLE
스텐실 테스트
• 스텐실 버퍼도 Z 버퍼 처럼 테스트를 해서 픽셀을 쓸지 안쓸지 결정해주는 버퍼이다.
• 깊이 테스트는 Z 값을 기준으로 테스트하지만 스텐실 버퍼는 사용자가 기준을 정하여 테
스트한다.
• 사용법은 DIRECTX 11 버전 용책 10장 참조.
알파 블렌딩
• 알파 블렌딩은 투명한 객체를 투현하기 위해 고안된 방법이다.
• 픽셀 버퍼와 프래그먼트의 색을 혼합 시켜 투명한 객체로 착각하게 만든다.
알파 블렌딩
• 프래그먼트 색상의 알파 채널은 0과 1사이의 값을 가지고 있다. 0은 완전히 투명한 것을
의미하고 1은 완전히 불투명한것을 의미한다.
• 색상의 혼합식은 아래와 같다.
𝑐 = 𝛼𝑐𝑓 + 1 − 𝛼 𝑐 𝑝
알파 블렌딩 주의사항
• 투명한 객체와 불투명한 객체를 구분없이 그릴 경우 투명한 객체의 깊이테스트에 의해
뒤에 있는 객체가 컬링되어 알파 블렌딩을 적용해도 뒤의 객체가 보이지 않는다.
• 이 문제를 해결하기 위해서 렌더링 순서를 조절해야 한다.
유리 창
알파 블렌딩 렌더링 순서
• 첫번째로 불투명한 객체를 먼저 그리고 이후에 투명한 객체를 그린다.
• 렌더 스테이트를 플래그를 이용하여 불투명과 투명 객체로 각각 설정하고 그려야 한다.
• 투명한 객체들은 뒤에 있는 객체부터 그린다.
• 이렇게 하면 아무런 문제없이 알파 블렌딩이 된다.
오늘은 여기까지
Q&A

More Related Content

What's hot

[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리
KyeongWon Koo
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
MoonLightMS
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
devCAT Studio, NEXON
 
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
devCAT Studio, NEXON
 
Hierachical z Map Occlusion Culling
Hierachical z Map Occlusion CullingHierachical z Map Occlusion Culling
Hierachical z Map Occlusion Culling
YEONG-CHEON YOU
 

What's hot (20)

스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
 
Shadow mapping 정리
Shadow mapping 정리Shadow mapping 정리
Shadow mapping 정리
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희
 
[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리
 
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
 
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다레퍼런스만 알면 언리얼 엔진이 제대로 보인다
레퍼런스만 알면 언리얼 엔진이 제대로 보인다
 
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
조정훈, 게임 프로그래머를 위한 클래스 설계, NDC2012
 
리얼타임 렌더링에 대해
리얼타임 렌더링에 대해리얼타임 렌더링에 대해
리얼타임 렌더링에 대해
 
AAA게임_UI_최적화_및_빌드하기.pptx
AAA게임_UI_최적화_및_빌드하기.pptxAAA게임_UI_최적화_및_빌드하기.pptx
AAA게임_UI_최적화_및_빌드하기.pptx
 
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
심예람, <프로젝트DH> AI 내비게이션 시스템, NDC2018
 
[0821 박민근] 렌즈 플레어(lens flare)
[0821 박민근] 렌즈 플레어(lens flare)[0821 박민근] 렌즈 플레어(lens flare)
[0821 박민근] 렌즈 플레어(lens flare)
 
멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)멀티스레드 렌더링 (Multithreaded rendering)
멀티스레드 렌더링 (Multithreaded rendering)
 
Screen space reflection
Screen space reflectionScreen space reflection
Screen space reflection
 
2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑2018.12.22 깊이 버퍼 그림자 매핑
2018.12.22 깊이 버퍼 그림자 매핑
 
C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현
 
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 .
 
Hierachical z Map Occlusion Culling
Hierachical z Map Occlusion CullingHierachical z Map Occlusion Culling
Hierachical z Map Occlusion Culling
 
게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPU게임프로젝트에 적용하는 GPGPU
게임프로젝트에 적용하는 GPGPU
 
Compute shader DX11
Compute shader DX11Compute shader DX11
Compute shader DX11
 
[KGC2014] DX9에서DX11로의이행경험공유
[KGC2014] DX9에서DX11로의이행경험공유[KGC2014] DX9에서DX11로의이행경험공유
[KGC2014] DX9에서DX11로의이행경험공유
 

Similar to 2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)

[박민근] 3 d렌더링 옵티마이징_2
[박민근] 3 d렌더링 옵티마이징_2[박민근] 3 d렌더링 옵티마이징_2
[박민근] 3 d렌더링 옵티마이징_2
MinGeun Park
 

Similar to 2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조) (20)

실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬실전프로젝트 정서경 양현찬
실전프로젝트 정서경 양현찬
 
Voxel based game_optimazation_relelase
Voxel based game_optimazation_relelaseVoxel based game_optimazation_relelase
Voxel based game_optimazation_relelase
 
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
[IGC2018] 유영천 개발자 - Voxel기반 네트워크 게임 최적화기법
 
3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해3D 게임 그래픽스의 이해
3D 게임 그래픽스의 이해
 
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
크게, 아름답게,빠르게, 일관되게 만들기: Just Cause 2 개발에서 배운 교훈들 (GPU Pro)
 
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
 
[박민근] 3 d렌더링 옵티마이징_2
[박민근] 3 d렌더링 옵티마이징_2[박민근] 3 d렌더링 옵티마이징_2
[박민근] 3 d렌더링 옵티마이징_2
 
[0918 박민수] 범프 매핑
[0918 박민수] 범프 매핑[0918 박민수] 범프 매핑
[0918 박민수] 범프 매핑
 
Motion blur
Motion blurMotion blur
Motion blur
 
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
[IGC 2017] 에픽게임즈 최용훈 - 밤낮으로 부수고 짓고 액션 빌딩 게임 만들기 - 포트나이트
 
포인트 셰도우
포인트 셰도우포인트 셰도우
포인트 셰도우
 
Rendering realistic Ice objects
Rendering realistic Ice objectsRendering realistic Ice objects
Rendering realistic Ice objects
 
파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기파이어몽키 3D 애플리케이션 만들기
파이어몽키 3D 애플리케이션 만들기
 
Ndc12 이창희 render_pipeline
Ndc12 이창희 render_pipelineNdc12 이창희 render_pipeline
Ndc12 이창희 render_pipeline
 
2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링2018.02.03 이미지 텍스처링
2018.02.03 이미지 텍스처링
 
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 1
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 1[컴퓨터비전과 인공지능] 7. 합성곱 신경망 1
[컴퓨터비전과 인공지능] 7. 합성곱 신경망 1
 
Cascade Shadow Mapping
Cascade Shadow MappingCascade Shadow Mapping
Cascade Shadow Mapping
 
PiCANet, Pytorch Implementation (Korean)
PiCANet, Pytorch Implementation (Korean)PiCANet, Pytorch Implementation (Korean)
PiCANet, Pytorch Implementation (Korean)
 
[NDC17] 물리 기반 대기와 구름 만들기
[NDC17] 물리 기반 대기와 구름 만들기[NDC17] 물리 기반 대기와 구름 만들기
[NDC17] 물리 기반 대기와 구름 만들기
 
아일렛 온라인에서 사용한 블럭 렌더링 소개
아일렛 온라인에서 사용한 블럭 렌더링 소개아일렛 온라인에서 사용한 블럭 렌더링 소개
아일렛 온라인에서 사용한 블럭 렌더링 소개
 

2017 12 09_데브루키_리얼타임 렌더링_입문편(3차원 그래픽스[저자 : 한정현] 참조)

  • 1. 게임프로그래머를 위한 리얼타임 렌더링 - 입문편(1) - 2017.12.09 데브루키 발표자 이석우
  • 2. 발표자 소개 • 이석우 (1987년생) • 게임 회사로 이직 희망하는 병특(전문연구요원) • 발표자료에 대한 오류사항이나 궁금한 점이 있으면 아래의 메일로 연락주세요. kkndsta@naver.com
  • 3. 컴퓨터 그래픽스는 크게 두가지로 나뉜다 Vector Graphics Raster Graphics
  • 4. 벡터 그래픽스 • 기하학적인 방법으로 그래픽을 표현한다. 해상도 무한!!! 그러나 느리다… 아직까지 완벽히 지원하는 장비가 없다.
  • 5. 래스터 그래픽스 • 래스터라 불리는 2차원 그리드에 색을 저장하여 그래픽을 표현한다. 그리드 속 셀 하나하나를 픽셀이라 부른다.
  • 6. 래스터 그래픽스 • 래스터라 불리는 2차원 그리드에 색을 저장하여 그래픽을 표현한다. 해상도가 정해져 있기 때문에, 확대하면 퀄리티가 떨어진다. 컴퓨터 하드웨어는 래스터 그래픽스를 지원한다.
  • 7. 오늘의 주제 • 따라서 오늘은 래스터 기반 리얼타임 렌더링에 대해 알아 봅시다!
  • 8. 먼저 CG에서 렌더링이란? • 컴퓨터 상에서 이미지를 생성하는 것을 말한다. Computer Scene Image
  • 9. • 래스터 이미지가 도화지라면 컴퓨터는 그림을 그리는 화가라 생각하면 된다. Computer Scene Image 먼저 CG에서 렌더링이란?
  • 10. 먼저 CG에서 렌더링이란? • 이미지 속 전체 내용물을 장면(SCENE)이라 하며, 흔히 장면(SCENE)을 렌더링한다고 말한다. Computer Scene Image
  • 11. 앞에 리얼타임이 붙는 이유 • 실시간(REALTIME) 렌더링은 실시간으로 이미지를 생성하고 화면에 보여주는 것을 말한다. • 반면 비실시간 렌더링은 이미지를 생성하는 모든 작업을 먼저 완료한 후 완성된 이미지를 순서대로 화면에 보여준다. 비실시간 렌더링(예 : 애니메이션) 당연한 얘기지만 비실시간이 퀄리티가 더 높다! 실시간 렌더링(예 : 게임)
  • 12. 앞에 리얼타임이 붙는 이유 • 우리가 아는 애니메이션은 플레이타임을 정하고 콘티대로 만들기 때문에 모든 장면을 미 리 알고 개발한다. 따라서 비실시간 렌더링이 가능하다.
  • 13. 앞에 리얼타임이 붙는 이유 • 반면 게임은 유져 입력을 받고 캐릭터가 움직이기 때문에 어떤 행동을 할 지 미리알 수 없 다. 플레이 타임 또한 유저가 포기하지 않는 한 계속된다. 따라서 게임은 장면을 실시간으로 렌더링하고 화면에 보여주는 리얼타임 렌더링을 적용한다.
  • 14. 이제 본격적으로 렌더링으로 들어가보기 전에… 한가지 알아야 할 것이 있다. 바로 모델링이다. 모델이 없으면 화면에 보여줄 게 없다.
  • 15. 모델의 구성요소 폴리곤 메쉬는 모델의 형상을 나타낸다. 텍스쳐는 모델에 입힐 색상이다. • 모델은 폴리곤 메쉬와 텍스쳐로 구성된다.
  • 16. 골격(SKELETON)도 필요하다 • 폴리곤 메쉬에 골격을 입히는 작업을 리깅이라 한다. 캐릭터에 움직임을 넣기 위해선 리깅이 필수적이다.
  • 17. LEVEL OF DETAIL • LOD는 모델의 디테일 수준을 말하며 게임의 퀄리티의 컴퓨터 성능을 고려하여 적절한 수 준으로 조절 한다.
  • 18. 모델의 저장 모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다. • 여기서 등장하는 것이 바로 버텍스(VERTEX)이다. 버텍스는 모델을 구성하는 최소한의 단위를 뜻한다.  버텍스 구성 요소  위치  노말 벡터  텍스쳐 좌표
  • 19. 모델의 저장 모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다. • 그러나 위치 정보(버텍스)만으로는 폴리곤 메쉬를 만들 수 없다. 각 점을 연결시키는 선정 보를 가지고 있어야 컴퓨터는 폴리곤 메쉬를 인식할 수 있다.  버텍스 구성 요소  위치  노말 벡터  텍스쳐 좌표
  • 20. 버텍스를 이용한 데이터 저장 방법 • 따라서 버텍스를 담는 버텍스를 버퍼에 삼각형을 연결하는 순으로 버텍스를 채워넣는다.  이를 NON-INDEXED TRIANGLE LIST라 부른다.
  • 21. 버텍스를 이용한 데이터 저장 방법 • NON-INDEXED TRIANGLE LIST  그러나 이 방법은 중복되는 데이터가 많아 비효율적이다. 중복 발생 중복 발생
  • 22. 모델의 저장 모델링을 완료되면 컴퓨터가 읽을 수 있는 형태로 저장해야 한다. • 이 중복 문제를 해결하기 위해 등장한 것이 인덱스 버퍼이다. 버텍스 버퍼의 인덱스를 이용해 각 점들을 이어준다.
  • 23. 버텍스와 인덱스를 이용한 저장방법 • INDEXED TRIANGLE LIST • VERTEX는 VERTEX BUFFER에 오직 하나만 저장된다. • 삼각형 하나당 3개의 인덱스가 인덱스 버퍼에 저장된다. 이제 인덱스를 가지고 삼각형을 연결한다.
  • 24. 삼각형 연결 규칙 • 참고로 위의 두 방법 모두 시계 방향 혹은 반시계 방향 순으로 선을 잇는다. • 이를 삼각형을 감는 방향이라 말하며 이것은 후에 뒷면 제거 단계에서 사용된다. 1 2 3 1 2 3
  • 25. 삼각형 연결 규칙 • 참고로 위의 두 방법 모두 시계 방향 혹은 반시계 방향 순으로 선을 잇는다. 1 2 3 1 2 3
  • 26. 모델 내보내기(EXPORTING) • 모델링 프로그램과 그래픽스 API의 좌표계가 다르기 때문에 주의해서 EXPORTING해야 한다.
  • 27. 맥스에서 OPENGL로 내보내기 • OPENGL로 내보낼 땐 YZ축 대칭 이동시켜야 한다.
  • 29. 맥스에서 DIRECTX로 내보내기 • YZ축 대칭 이동(MAX → OPENGL)에서 Z좌표 부호를 변경하면 된다.
  • 30. 맥스에서 DIRECTX로 내보내기 • 그러나 렌더링 결과를 보면 앞면이 제거되는 문제가 생긴다. 앞면이 컬링된다!
  • 31. 컬링 문제가 발생하는 이유 • DIRECTX는 왼손좌표계이므로 시계 방향으로 감긴 삼각형을 정면으로 판별한다. • 따라서 뒷면 제거 설정을 D3DCULL_CCW(기본)에서 D3DCULL_CW로 바꾸면 된다.
  • 32. 드디어 렌더링에 대해 알아보자 • 렌더링은 CPU가 아닌 GPU에 의해서 수행된다. CPU 데이터 VRAM GPU 렌더링
  • 33. 드디어 렌더링에 대해 알아보자 • 이때 CPU와 GPU는 메모리를 공유하지 않고 서로 다른 메모리를 사용하기 때문에 CPU에 서 모델 데이터를 로드한 후 VRAM으로 보낸다. CPU 데이터 VRAM GPU 렌더링 데이터 이동 매우 느리므로 주의!
  • 34. 렌더링이 GPU에서 수행되는 이유 • 데이터 이동에 따른 시간 낭비에도 불구하고 왜 GPU에서 렌더링을 수행할까? • GPU가 CPU에 비해 병렬 작업이 월등히 유리하게 설계되었기 때문이다. CPU는 커다란 코어를 2~8개 넣지만 GPU는 작은 코어를 수백개씩 넣는다.
  • 35. 렌더링이 GPU에서 수행되는 이유 • 픽셀 단위의 래스터 이미지는 퀄리티가 높아질수록 픽셀의 개수도 많아진다. 따라서 픽셀을 한번에 하나씩 채우기 보단 한번에 여러 픽셀을 채우는 것이 가능한 GPU에서 수행하 는 게 훨씬 빠르다.
  • 36. 장면이 화면에 표시되는 과정 • 장면이 화면에 표시되는 과정은 다음과 같다. 백버퍼 초기화 데이터 설정 렌더링 화면 표시 1. 장면을 아무것도 그려지지 않은 상태로 초기화한다. 4. 장면이 화면에 보여진다. 3. 장면의 객체들를 렌더링한다. 2. 렌더링에 필요한 데이터를 설정한다.
  • 37. 백버퍼 • 렌더링의 출력(OUTPUT)을 백버퍼(BACK BUFFER)라 한다. 백버퍼 초기화 데이터 설정 렌더링 화면 표시 버퍼(BUFFER)는 컴퓨터의 주기억장치와 주변 장치 사이에서 데이터 를 주고 받을 때 정보를 기억해 두고 사용할 수 있는 공간을 말한다. 즉, 백버퍼는 래스터 이미지가 데이터화하며 저장된 형태라고 생각 하면 된다. 백버퍼의 데이터는 화면 표시 단계에서 이미지 형태로 변화하여 화면에 표시된다.
  • 38. 백버퍼라 불리는 이유 • 사실 렌더링 작업에는 두가지 버퍼를 이용한다. 이것을 더블 버퍼링이라 한다. • 화면에 보여지는 것을 프론트 버퍼(FRONT BUFFER)라고 한다. • 이전 슬라이드의 렌더링 작업이 진행되고 있는 것을 백 버퍼(BACK BUFFER)라고 한다.
  • 39. 버퍼를 하나만 사용하지 않는 이유 • 버퍼가 하나인 상태로 렌더링 과정을 진행하면 이전 장면과 현재 장면이 섞이게 된다. 이 를 테어링(TEARING)이라고 한다. 기존 화면 새 화면 더블 버퍼링 적용 전 화면 전환
  • 41. 버퍼를 하나만 사용하지 않는 이유 • 이중 버퍼링을 사용하면 테어링을 방지할 수 있다. 추가적으로 삼중 버퍼링을 사용하기도 한다. 기존 화면 오프 스크린 새화면교체 더블 버퍼링 적용 후 화면 전환
  • 42. 렌더링 과정 • 지금부터 GPU에서 장면의 객체를 어떤 과정을 거쳐 그리는지 살펴보자. 렌더링 렌더링 구간의 과정을 단계별로 묶은 것을 렌더링 파이프라인이라 한다.
  • 43. 렌더링 파이프라인 • 렌더링 파이프라인은 버텍스 처리 단계, 래스터화 단계, 프래그먼트 처리 단계, 출력병합 단계로 이루어진다.
  • 44. 렌더링 파이프라인 • 이중 버텍스 처리 단계와 프래그먼트 처리 단계는 프로그래밍이 가능하고 래스터라이재 이션과 출력병합 단계는 하드웨어가 직접 처리한다. 프로그래머가 처리 하드웨어가 처리하드웨어가 처리
  • 45. 버텍스 처리 • 버텍스 처리 단계에서는 모델의 공간을 변환한다. • 프로그래머는 버텍스 쉐이더(VERTEX SHADER)에서 이 작업을 처리한다.
  • 46. 아핀(AFFINE) 변환 • 3차원 그래픽스에서 공간 변환을 할 때 사용되는 변환을 아핀변환이라 한다. • 아핀변환은 다음의 3가지 기능이 가능하다.  이동변환(TRANSLATION): 객체의 위치를 이동시킨다.  회전변환(ROTATION): 객체를 기준축을 중심으로 회전시킨다.  스케일링(SCALING): X, Y, Z 축을 기준으로 비율에 따라 객체의 크기를 조절한다.
  • 47. WORLD TRANSFORM • 객체 공간(OBJECT SPACE)에 있는 객체를 게임 월드 공간으로 배치하는 것을 WORLD TRANSFROM이라 한다.
  • 48. 아핀 변환을 이용한 월드 변환 예 • 스케일링을 통해 구의 반지름이 2배가 되었다.
  • 49. 아핀 변환을 이용한 월드 변환 예 • 회전 변환은 X, Y, Z 중 어느 축으로 회전할 지에 따라 아래의 행렬 공식을 이용해 회전행렬 을 구할 수 있다. x축 회전 행렬 y축 회전 행렬 z축 회전 행렬
  • 50. 아핀 변환을 이용한 월드 변환 예 • 주전자는 Y축을 기준으로 90도 회전했으므로 아래와 같이 회전 행렬을 구할 수 있다.
  • 51. 아핀 변환을 이용한 월드 변환 예 • 주전자는 회전 후 X 방향으로 7만큼 이동하므로 이동 행렬은 아래와 같다.
  • 52. 아핀 변환을 이용한 월드 변환 예 • 보통 회전과 이동을 하나로 결합한 행렬을 사용하는 것이 편리하다.
  • 53. VIEW TRANSFORM • 게임 월드 공간에 있는 객체들을 뷰공간으로 변환하는 것을 뷰변환이라 한다. • 유저가 바라보는 시점으로 바뀌는 것이라 생각하면 이해하기 쉽다.  EYE : 카메라 위치  AT : 카메라가 바라보는 방향  UP : 카메라 윗 방향 벡터
  • 54. VIEW FRUSTUM • VIEW FRUSTUM은 카메라를 통해 볼 수 있는 가시영역의 범위를 의미한다. (가시영역의 모 든 범위를 다 보여주는 것은 불가능한데다 비효율적이다.)  FOVY, ASPECT, N, F으로 프러스텀을 정의할 수 있다.
  • 55. PROJECTION TRANSFORM • 마지막으로 PERSPECTIVE PROJECTION TRANSFORM은 뷰공간에서 원근법이 적용된 공간으 로 변환한다. 따라서 같은 객체라도 멀리 있으면 작게 보이고, 가까이 있으면 크게 보인다. 투영 공간 혹은 클립 공간이라 부른다.
  • 56. PROJECTION TRANSFORM • 오른손 좌표계(OPENGL 해당)를 사용할 경우 Z좌표의 부호를 변경해서 왼손좌표계로 바꿔 줘야 한다. 투영 매트릭스 이유는 래스터화 단계에서 하드웨어는 왼손 좌표계를 사용하기 때문!! Z좌표 부호 변경
  • 57. 투영 변환 행렬 유도 • VIEW TRANSFORM 유도 tan(fovy/2) = 1/-z 이다. 따라서 z = -cot(fovy/2)가 된다. 1 -z
  • 58. 투영 변환 행렬 유도 • VIEW TRANSFORM 유도 같은 직선을 지나는 임의의 점 y,z와 y’,z’는 아래와 같은 비례식이 성립한다.
  • 59. 투영 변환 행렬 유도 종횡비를 이미 알고 있으므로 fovx 대신 fovy에 대한 식으로 바꿀수 있다.
  • 60. 투영 변환 행렬 유도 3번째 줄의 z와 z’ 성분으로만 이루어져 있으므로 x,y 성분은 0이다. -z를 곱한다. 이 둘은 동일한 카테시안 좌표를 가지고 있다. 이제 x’, y’, z’를 알고있으므로 이를 동차 좌표계로 표시하면 아래의 식과 같다. 행렬화
  • 61. 투영 변환 행렬 유도 가까운 평면과 먼 평면의 z 값은 0과 -1이다.
  • 62. 래스터화(RASTERIZATION) • 버텍스 처리 단계에서 공간 변환된 버텍스는 래스터화 단계에서 삼각형으로 조립되고 래 스터로 변형된다. 이 구간은 프로그래머가 아닌 하드웨어가 처리한다.
  • 63. 래스터화 단계 • 맨 처음 래스터에 대하여 설명하였다. 바로 래스터화 단계를 설명하기 위해서 였다. 래 스터화 단계란 점, 선, 면으로 이루어진 폴리곤 메쉬를 래스터로 변형시키는 단계라 생 각하면 이해하기 쉽다.
  • 64. 래스터화 단계의 작업 • 래스터화 단계를 세부적으로 나누면 다음과 같다. • 프리미티브 어셈블리 : 버텍스를 삼각형으로 조립한다. • 클리핑 : 클립 공간의 육면체 범위를 벗어나는 폴리곤을 제거한다. • 원근나눗셈 : 𝜔로 X,Y,Z를 나누어 원근감을 적용한다. • 뒷면 제거 : 카메라 기준으로 뒷면의 폴리곤을 제거한다. • 뷰포트 변환 : 화면에 표시되는 스크린 공간으로 변환한다. • 스캔 컨버젼 : 삼각형을 래스터화(혹은 픽셀화)한 프래그먼트를 생성한다. viewport transform primitive assembly clipping perspective division back-face culling scan conversion
  • 65. PRIMITIVE ASSEMBLY • 버텍스 쉐이더에서 공간 변환을 한 버텍스를 PRIMITIVE ASSEMBLY 단계에서 삼각형으로 조 립한다.
  • 66. 클리핑 • 클리핑은 뷰프러스텀 바깥에 있는 폴리곤을 잘라낸다. 삼각형 𝑡1는 완전히 범위를 벗어나므로 버려진다. 삼각형 𝑡2는 범위 안에 있으므로 그대로 그려진다. 삼각형 𝑡3는 범위를 벗어난 부분만 제거되고 그려진다.
  • 67. 클리핑 • 클립 공간(CLIP SPACE)에서 클리핑이 진행된다. (뷰공간) (클립공간) 클리핑은 프러스텀(시야범위를 나타내는 모형)이 직 육면체로 된 클립공간에서 행해진다. 앞의 슬라이드 는 이해를 돕기위에 뷰공간을 기준으로 클리핑을 설 명하였다.
  • 68. 원근나눗셈(PERSPECTIVE DIVISION) • 위의 버텍스 처리 단계에서 투영 변환 후 원근감 적용한다고 말했다. • 그러나 실제 적용된 건 아니고 동차좌표계의 𝜔에 Z에대한 거리값이 곱해진다. • 이 값을 래스터화 단계에서 나누어 원근감이 적용된 좌표로 변형된다. 이를 원근 나눗셈 이라 한다. • 원근 나눗셈이 적용된 좌표를 정규화된 장치 좌표(NORMALIZED DEVICE COORDINATES) 혹 은 NDC라고 부른다. 투영 매트릭스 NDC
  • 69. 원근나눗셈(PERSPECTIVE DIVISION) • 실제 길이는 같지만 카메라로 부터 가까운 있는 점과 멀리 있는 점에 대해 원근 나눗셈을 적용 예이다.
  • 70. 뒷면 제거(BACK-FACE CULLING) • 카메라에 보이지 않는 뒷면(BACK FACE)을 제거 한다. 면의 노말 벡터와 카메라에서 면까지의 벡터의 외적이 0보다 크면 앞면, 작으면 뒷면이다. 하지만 이 방법을 사용하진 않는다.
  • 71. 뒷면 제거(BACK-FACE CULLING) • 행렬식을 이용하면 삼각형의 감는 방향을 알 수 있으므로 이를 통해 뒷면인지 판별한다. • 앞면인 경우 행렬식은 양수이며, 삼각형은 시계방향으로 감긴다. • 뒷면인 경우 행렬식은 음수이며, 삼각형은 반시계방향으로 감긴다. • 단, DIRECTX는 왼손좌표계이므로 뒷면이 시계방향이다.
  • 72. VIEWPORT TRANSFORM • 뷰포트 변환은 화면에 표시되는 컴퓨터 스크린 공간으로 이동시킨다. • 뷰포트 변환은 다음 슬라이드의 3가지 작업을 한다.
  • 73. VIEWPORT TRANSFORM • 첫번째로, 모니터 스크린에서 Y축 좌표는 반대이므로 Y축을 반전시킨다.
  • 74. VIEWPORT TRANSFORM • 두번째로, 모니터 스크린 속 보여지는 비율에 맞게 스케일링 한다.
  • 75. VIEWPORT TRANSFORM • 세번째로, 모니터 스크린 속 알맞은 위치로 이동시킨다.
  • 76. VIEWPORT TRANSFORM • 이전 슬라드의 세 가지 모두 적용된 행렬은 아래와 같다. 대부분의 경우 뷰포트는 윈도우 전체 영역을 차지 한다. 이 경우 MinX와 MinY는 모두 0이 된다. 또한 대개의 경우 MinZ와 MaxZ는 각각 0.0과 1.0으로 설정된다. 따라서 최종적인 식은 오른쪽처럼 단순해진다.
  • 77. SCAN CONVERSION • 버텍스를 삼각형으로 조립하고 스크린 공간으로 이동시켰으니 이제 래스터로 변형시키 는 일만 남았다. 바로 스캔 컨버젼에서 그 작업을 한다. 여기서 래스터화된 결과물을 프래 그먼트(FRAGMENT)라고 한다. 삼각형 프래그먼트
  • 78. SCAN CONVERSION • 래스터는 픽셀을 최소 단위로 가지는 2차원 그리드 형태의 데이터 집합이라고 위에서 설명하였다. 삼각형을 어떻게 픽셀 단위의 데이터로 변형 시킬 수 있을까? 바로 선형 보간을 이용한다.
  • 79. SCAN CONVERSION • 삼각형에는 3 개의 버텍스가 있고 이 버텍스에는 노말 벡터, 텍스쳐 좌표, 색상, 깊이 값 등 이 들어 있다. 이 값을 선형 보간하여 각 픽셀에다 값을 채우면 된다.
  • 80. SCAN CONVERSION • 색상 (RGB) 중에 R에 대한 선형 보간의 예 먼저 y축 좌표를 기준으로 삼각형의 선을 따라 보간한다.
  • 81. SCAN CONVERSION • 색상 (RGB) 중에 R에 대한 선형 보간의 예 그림에서는 오른쪽 선에 대한 보간만 나와있다. 다른 나머지 선들도 똑같은 작업을 한다.
  • 82. SCAN CONVERSION • 색상 (RGB) 중에 R에 대한 선형 보간의 예 이전 슬라이드에서 y축을 기준으로 선형 보간한 값을 x축을 기준으로 다시 선형 보간하여 각 픽셀의 위치에 대한 R 값을 계산한다. 이처럼 선형 보간이 x, y축을 기준으로 두단계로 수행되는 것을 겹선형 보간(bilinear interpolation)이라 한다.
  • 83. TOP-LEFT RULE • 변 위에 픽셀이 위치하면 위쪽 혹은 왼쪽변을 가진 삼각형이 소유권을 가지므로 해당 삼 각형의 버텍스를 가지고 선형보간한다.
  • 84. 프래그먼트 처리 • 래스터화 단계에서 생성된 프래그먼트의 속성은 노말 벡터, 텍스쳐 좌표, 색상(RGBA), 깊 이, ETC 등을 포함한다. 이 속성들을 이용하여, 프래그먼트 처리 단계에서 프래그먼트의 최 종 색을 결정한다. 이 프래그먼트 처리를 하는 쉐이더를 픽셀 쉐이더라고 한다.
  • 85. 프래그먼트 처리 • 프래그먼트 처리 단계에서 가장 중요한 것은 두가지이다. ① 텍스쳐링 : 모델링 과정에서 생성한 텍스쳐를 이 단계에서 입힌다. ② 조명 : 빛과 물체 사이의 상호작용을 추가한다.
  • 86. 텍스쳐링 • 앞에서 텍스쳐링은 프래그먼트(3차원 폴리곤 메쉬를 2차원 데이터로 변형한 형태)에 텍 스쳐를 입히는 것이라 설명하였다. • 그렇다면 어떻게 알맞은 위치에 텍스쳐를 입힐 수 있을까? • 바로 텍스쳐좌표를 이용하여 텍스쳐를 입힌다.
  • 87. 텍스쳐 좌표 • 2차원 이미지 텍스쳐의 요소 하나를 텍스쳐 엘리먼트(TEXTURE ELEMENT), 줄여서 텍셀이라 고 한다.(픽셀과 구분하기 위해 이름을 텍셀이라 한다.) • 각각의 텍셀은 2차원 배열 상의 자신의 위치를 나타내는 인덱스(TEXCEL ADDRESS)를 가지 고 있다.
  • 88. 텍스쳐 좌표 • 프래그먼트에는 텍셀 어드레스가 아닌 정규화된 텍스쳐 좌표(U, V)를 사용한다. • 텍셀 어드레스를 사용하면 같은 해상도를 가진 텍스쳐만 매핑할 수 있지만 텍스쳐 좌표를 사용하면 다른 해상도를 가진 다수의 이미지들의 텍스쳐 좌표를 변경하지 않고 표면에 부 착할 수 있다.
  • 89. SUARFACE PARAMETERIZATION • 텍스쳐 좌표는 모델링 단계에서 생성되는 데, 폴리곤 메쉬의 버텍스에 텍스쳐 좌표를 할 당하는 작업을 표면 파라미터화(SURFACE PARAMETERIZATION이라 한다. • 일반적으로 표면 파라미터화는 3차원 표면을 2차원 평면으로 펼친 후 좌표를 할당한다.
  • 90. 차트와 아틀라스 • 각각의 폴리곤 메쉬의 텍스쳐를 차트(CHART)라 하고 여러 차트를 하나의 텍스쳐 모은 것 을 아틀라스(ATLAS)라고 부른다. 차트 아틀라스
  • 91. 텍스쳐 좌표를 텍셀 주소로 변환하기 • 폴리곤 메쉬의 버텍스들이 가진 텍스쳐 좌표는 래스터화 단계의 스캔 변환 단계에서 보간 되어 각 프래그먼트에 할당되었다.
  • 92. 텍스쳐 좌표를 텍셀 주소로 변환하기 • 텍스쳐 좌표는 텍셀 주소로 변환하기 위해 아래의 식을 이용한다. t : 텍셀 주소 S: 텍스쳐 해상도 u, v : 텍스쳐 좌표
  • 93. 조명(LIGHTING OR ILLUMINATION) • 조명은 광원과 물체 사이의 상호작용을 처리하는 기술이다. • 장면의 사실성을 부과하기 위해서 프래그먼트 처리 단계에서 조명 효과를 계산하여 색상 에 반영한다. • 자세한 설명은 다음 발표 때 추가!
  • 94. 출력 병합(OUTPUT MERGE) • 픽셀 쉐이더에서 텍스쳐링과 조명 등을 통해 프래그먼트의 색을 구하였다. 출력 병합 단 계에서는 픽셀 쉐이더에서 구한 색을 화면에 보여줄 지 결정한다. 이 단계에서는 다음의 작업을 한다. • 깊이 테스트 : 깊이값을 비교하여 픽셀 버퍼에 저장할 지 결정한다. • 스텐실 테스트 : 스텐실 버퍼를 비교하여 픽셀 버퍼에 저장할 지 결정한다. • 알파 블렌딩 : 픽셀 버퍼의 픽셀과 프래그먼트의 색상을 혼합시킨다.
  • 95. 깊이 테스트 • 깊이 테스트는 프래그먼트의 깊이 값을 현재 픽셀 버퍼의 픽셀과 비교하여 작으면 프래그 먼트 색상과 깊이값으로 해당 픽셀의 속성을 갱신한다. 이를 Z 버퍼링(Z BUFFERING)이라고 도 한다.
  • 96. 깊이 테스트 • Z-버퍼링은 폴리곤을 그리는 순서에 독립적이다. 따라서 폴리곤을 그리는 순서를 임의로 바꿔도 결과는 항상 같다.
  • 97. Z 버퍼링의 단점 • Z 버퍼링은 파이프라인의 마지막 단계에서 수행된다. 이는 그려지는 프래그먼트 뿐만 아 니라 버려질 프래그먼트까지 색상을 전부 계산한다. 한마디로 매우 비효율적이다.
  • 98. 래스터화 단계 Z컬링 • Z 버퍼링의 문제를 해결하기 위해 프래그먼트 처리 단계 전에 래스터화 단계에서 깊이 테스트하여 프래그먼트를 선별할 수 있도록 개선되었다. HI-Z 와 EARLY-Z가 있다.
  • 99. 래스터화 단계 Z컬링 • HI-Z는 타일기반 컬링이지만 EARLY-Z는 픽셀기반 컬링이다. HI-Z가 먼저 진행된 후 EARLY-Z가 진행된다. • HI-Z는 별도의 버퍼를 사용 하지만 EARLY-Z는 깊이 버퍼를 그대로 사용한다.
  • 100. 래스터화 단계 Z컬링 • HI-Z와 EARLY-Z는 그래픽스 API(DIRECTX/OPENGL)에서 기본적으로 제공한다. • 앞에 있는 거부터 순서대로 그리면 자동으로 적용된다.
  • 101. EARLY-Z PASS • EARLY-Z 기능을 최대한 활용하고자 하는 목적으로 고안된 게 EARLY-Z PASS이다. • 투패스 알고리즘이기 때문에 사용하기 위해선 코드를 수정해야 한다. (소스 코드 참조) • EARLY-Z PASS는 두 번의 렌더링 과정을 거친다.  첫번째 패스는 컬러 버퍼는 채우지 않고 깊이 버퍼만 채운다.  두번째 패스는 통상적인 렌더링을 수행한다. • 일반적인 싱글패스 렌더링보다 빠르다. • 소스 코드 : HTTPS://SOFTWARE.INTEL.COM/EN-US/ARTICLES/EARLY-Z-REJECTION-SAMPLE
  • 102. 스텐실 테스트 • 스텐실 버퍼도 Z 버퍼 처럼 테스트를 해서 픽셀을 쓸지 안쓸지 결정해주는 버퍼이다. • 깊이 테스트는 Z 값을 기준으로 테스트하지만 스텐실 버퍼는 사용자가 기준을 정하여 테 스트한다. • 사용법은 DIRECTX 11 버전 용책 10장 참조.
  • 103. 알파 블렌딩 • 알파 블렌딩은 투명한 객체를 투현하기 위해 고안된 방법이다. • 픽셀 버퍼와 프래그먼트의 색을 혼합 시켜 투명한 객체로 착각하게 만든다.
  • 104. 알파 블렌딩 • 프래그먼트 색상의 알파 채널은 0과 1사이의 값을 가지고 있다. 0은 완전히 투명한 것을 의미하고 1은 완전히 불투명한것을 의미한다. • 색상의 혼합식은 아래와 같다. 𝑐 = 𝛼𝑐𝑓 + 1 − 𝛼 𝑐 𝑝
  • 105. 알파 블렌딩 주의사항 • 투명한 객체와 불투명한 객체를 구분없이 그릴 경우 투명한 객체의 깊이테스트에 의해 뒤에 있는 객체가 컬링되어 알파 블렌딩을 적용해도 뒤의 객체가 보이지 않는다. • 이 문제를 해결하기 위해서 렌더링 순서를 조절해야 한다. 유리 창
  • 106. 알파 블렌딩 렌더링 순서 • 첫번째로 불투명한 객체를 먼저 그리고 이후에 투명한 객체를 그린다. • 렌더 스테이트를 플래그를 이용하여 불투명과 투명 객체로 각각 설정하고 그려야 한다. • 투명한 객체들은 뒤에 있는 객체부터 그린다. • 이렇게 하면 아무런 문제없이 알파 블렌딩이 된다.