201413004 황혜경

[201413004 황혜경]

1강 정리

[셰이더(shader)란?]

1.역사(?)

-‘셰이더’는 1988년 픽사, 렌더맨 인터페이스 사양 버전 3.0부터 도입되기 시작
-프로그래머들이 만드는 모양이 영 시원찮아 보이던 그래픽들이 손수 나섰고, ‘그래픽 처리 장치(GPU)’의 ‘렌더링 파이프라인’을 그래픽도 프로그래밍 할 수 있게 만든 것이 셰이더

*그래픽 처리 장치(GPU)란?

-GPU(그래픽 처리 장치, Graphics Processing Unit)
-그래픽 연산 속도 향상을 위해 설계된 하드웨어
-중앙 처리 장치(CPU)가 처리하던 기능 중 그래픽 부분을 대신 처리해줌 →CPU의 부담을 줄이고 그래픽 처리 능력을 최대화

*파이프라인이란?

파이프라인

-한 데이터 처리 단계의 출력이 다음 단계의 입력으로 이어지는 형태로 연결되는 구조
-여러 단계가 동시에, 병렬적으로 수행 가능 →작업의 효율성을 꾀할 수 있음
-각 단계 사이의 입출력을 중계하기 위한 버퍼 사용 가능

렌더링 파이프라인(rendering pipeline)

-3차원 이미지를 2차원 ‘래스터’ 이미지로 표현하기 위한 파이프라인 형태의 단계적 방법
-고정기능 파이프라인 구조, 셰이더 지원X

그래픽스 파이프라인(graphics pipeline)

-3차원 이미지를 2차원 래스터 이미지로 표현하기 위한 파이프라인 형태의 단계적 방법
-프로그래머블 파이프라인 구조로 렌더링 파이프라인 + 셰이더

파이프라인 관련 글 출처 http://blog.naver.com/hvl814/220633947266
(더 궁금하면 들어가보세오오옹~)

2.정의

-소프트웨어 명령의 집합
-그래픽 하드웨어 렌더링 효과를 계산, 즉 화면에 출력될 픽셀의 위치와 색상을 계산하는 함수를 제어하는 것

3.종류

픽셀셰이더

-화면에 출력 될 픽셀들의 색을 계산 →최종적으로 픽셀이 어떻게 보일지를 결정

버텍스셰이더(vertex shaders, 정점 셰이더)

-3D 물체를 구성하는 정점들의 위치를 화면좌표로 변환하는 시키는 역할을 수행

지오메트리 셰이더

-점이나, 선, 삼각형 등의 도형을 생성
-도형 정보는 ‘레스터라이즈’를 거친 뒤 픽셀 셰이더를 통과하게 됨

*레스터라이즈란?

-화면에 그림을 그리기 위해 픽셀이 어느 위치에 몇 개를 그려야 하는지 알아내고 그려주는 장치

[디지털 텍스쳐 포맷 이론]

1.데이터의 단위, ‘bit'

-컴퓨터는 모든 정보를 0과 1로밖에 처리하지 못함

*비트(bit)란?

-컴퓨터가 표현하는 데이터의 최소단위
-2진수 값(0,1) 하나를 저장할 수 있는 메모리의 크기를 뜻하는 단위

2 = 1bit
256 = 8bit = 1byte
1024byte = 1Kbyte
1024Kbyte = 1M

2.Color와 bit수의 관계

3.bit의 발전

1bit(2^1=2색)

-0, 1
-1pixel당 2가지 값을 나타낼 수 있음
-초창기의 컴퓨터와 핸드폰 화면에 쓰임 →2가지 색밖에 표현을 할 수 없어 셀로판지로 색을 표현했는데, 시력 보호에 좋다는 초록색을 씀

2bit(2^2=4색)

-00, 01, 10, 11
-4gray 컬러

4bit(2^4=16색)

-0000~1111
-‘팔레트’가 사용되기 시작
-보다 다양한 색을 표현하기 위해 ‘디더링 기법(Dithering, 병치혼합)’을 사용

*팔레트란?

-bit자체에는 색 정보가 없기에 색 정보를 팔레트에 담음
-8bit 칼라까지는 팔레트를 사용하여 색을 표현

*디더링 기법(Dithering, 병치혼합)이란?

(왼쪽이 디더링기법을 사용함)

-제한된 색상의 픽셀을 병치시켜 멀리서 보면 마치 혼합된 색으로 보이는 기법
-점묘법과 동일한 방법

8bit(2^8=256색)

-00000000~11111111
-‘팔레트 애니메이션’이 등장 →ex) 스타1
-색을 0부터 255까지의 숫자값으로 표현

*팔레트 애니메이션이란?

-그림에 손을 대지 않고 팔레트의 색만 변화시키는 애니메이션

16bit(2^16=65,536색)

-0000000000000000~1111111111111111
-‘RGB’개념이 등장, 팔레트는 사라짐
-4:4:4:4로 알파에도 4를 분배해 투명도를 줄 수 있음
-하이컬러라 불리긴 했지만, 아직도 그라데이션에 선이 보일 정도의 부족함이 있었음

*RGB란?

-하나의 픽셀 안에 Red, Green, Blue의 세 가지 서브픽셀이 존재하고, 이를 조절해 컬러를 표현
-16bit를 5bit, ‘6bit’, 5bit로 나누어 각각 R(ed),G(reen),B(lue)로 나타냄(16bit를 565칼라라고 표현하기도)

R = 2^5 = 32가지,
G = 2^6 = 64가지,
B = 2^5 = 32가지               (32*64*32 = 65536)가지의 색을 표현할 수 있게 됨

*G에 1비트가 더 많은 이유

-사람의 눈은 녹색을 더 민감하게 인식하기 때문

24bit(2^24=16,777,216색)

-0000000000000000000000000~1111111111111111111111111
-24bit를 8bit씩 나누어 각각 RGB 채널을 나타냄(256*256*256 = 16,777,216)
-R8 G8 B8, 트루 컬러라고 표현
- TGA(알파X)

32bit(2^32=4,294,967,296색)

-000000000000000000000000000000000~111111111111111111111111111111111
-32bit를 8bit씩 나누어 각각 RGB채널과 알파(A)채널 표현(256*256*256*256=4,294,967,296)
-R8 G8 B8 A8. 딥 컬러라고 표현
-알파로 인해 투명도까지 조절 가능

*64비트 이상

HDR(High Dynamic Range)

-채널당 16bit

-사람의 눈과 유사하게 영상을 보여주는 기술

-밝기를 1,000니트까지 구현

-밝기가 다른 사진을 연속 촬영 후, 밝고 어두운 부분이 모두 잘 나온 한 장의 사진으로 합성하는 기법

TIF

-채널당 16bit, 32bit를 지원하는 초고화질 기법
-비슷한 개념으로 RAW 파일, HDR
-용량이 큼
-채널당 16비트나 32비트 이미지를 만들어버릴 경우, TIFF 등의 특수한 확장자로만 저장되고, 편집 기능 제한됨
-인쇄용 원본 / Displacement Map / Lightmap 등 고급 정보가 필요한 곳에서 사용

[FLOAT]

1.FLOAT란?

-프로그래밍에서 계산할 때 단위, 부동 소수점(소수점 아래 6번째까지 유효)
-bit수에 따라 색상을 표현하는 채널당 수치가 달라지는데, 이를 통일하여 표현하고자 프로그래머 측에서 해당 색상의 수치값을 %값=소수 형태값으로 표현
-색상을 float으로 계산할 때 3개의 float를 이용하여 나타냄. (float,float,float)

2.float으로 색상을 표현하기 (예제)

-Float3(1.0,1.0,1.0) = 24bit (255,255,255) -> 흰색
-Float3(0.0,0.0,0.0) = 24bit (0,0,0) => 검정
-Float4(0.5,0.5,0.5,0.5) = 32bit (128,128,128,128) -> 회색 반투명

3.Unity shader에서 사용하는 단위

-Float : 32비트
-Half = float/2 : 16비트
-Fixed : 11비트

--------------------------------------------------

[게임 전용 텍스쳐 포맷]

1.DDS

DDS를 사용하는 이유

'DirectX'와 'openGL'이 돌아감

*DirectX란?

-마이크로소프트에서 만든 게임기능을 강화시킨 응용 프로그램 인터페이스

-하드웨어를 직접 컨트롤

-서로 다른 하드웨어를 통일하는 기준

-사용 셰이딩 언어 : HLSL

*openGL이란?

-실리콘 그래픽스에서 만든 3차원 그래픽 응용 프로그램 인터페이스

-오픈소스로 모든 운영체제에서 가능

-사용 셰이딩 언어 : GLSL

DDS의 특징

-최소한의 용량으로 최대한의 효과를 얻기위한 이미지 압축 형식(일반적으로 손실 포맷 사용)

-픽셀 포맷(TGA파일을 많이 쓰는 이유? psd는 프로그래머들이 보기 힘들고, 작업하는 원본이 무거워짐)

DXT1 RGB - R5G6B5 (알파 미존재)

DXT5 ARGB - A8R5G6B5 (알파 존재)

→색을 표현하는 공간을 줄여서 알파를 표현, 알파를 포함하거나 하지 않거나 용량은 같음

-압축 방식, DirectX의 텍스처와 1 : 1로 대응 →DirectX를 지원하는 모든 그래픽 카드는 그래픽 리소스가 더욱 빠르게 출력됨

-짝수로 깨지기때문에 2의 승수(512*512, 1024*1024 등등) 사이즈만 가능

-Mipmap/Cubemap 등 게임을 위한 기술 쓸 수 있음

-마이크로소프트에서 만든 게 단점, 윈도우 pc, Xbox에서밖에 안 돌아감(맥은 하드웨어를 같이 씀)

2.유니티 텍스처 포맷

-DDS와 같음

-압축 포맷을 사용, 어떤 포맷을 넣어도 자체 압축함(용량이 커지지 않아 TGA를 넣는 게 나음)

3.Desktop 텍스처 포맷

-RGB Compressed DXT1과 RGBA Compressed DXT5를 주로 사용

-DXT1은 알파를 지원하지 않고, DXT5는 알파를 지원함

-알파만 있는 8비트 형식도 가끔 사용

-졸작에서 쓸 수 있는 포맷

4.IOS 텍스처 포맷

-RGB Compressed PVRTC와 RGBA Compressed PVRTC를 주로 사용

-RGB알파를 지원하지 않고, RGBA는 알파를 지원함

5.Android 텍스처 포맷

-여러 사에서 많들기 때문에 적용하는 것도 속도도 버그의 종류도 다 다름 (☆버☆그☆파☆티☆)

-그나마 공통적 파일 포맷이 있는데...

RGB Compressed ETC 4 bits

-어느 안드로이드에서 다 돌아감

-치명적 단점! 알파값이 없음

RGBA 16 bit

-알파값이 있음

-치명적 단점! 용량이 어마어마해지고 엄청 깨짐

RGB Compressed ETC2 4 bits

-최근에는 이 ETC2를 사용하면 됨(갤럭시노트 3 이상 호환)

-유니티5.3부터 기본적으로 확장자가 ETC2 생김

[유니티 셰이더]

1.셰이더 언어

HLSL(High Level Shader Language)

-마이크로소프트사의 DirectX에 사용되는 셰이딩 언어

GLSL(OpenGL Shading Language)

-openGL사의 C언어를 기초로한 상위 레벨 셰이딩 언어

CG(C for Graphics)

-nvidia사에서 개발한 셰이딩 언어

2.유니티 셰이더

-(뜬금없지만) 유니티 좌표는 Open GL을 사용함 →z좌표가 위를 항함

(3D max는 DirectX를 사용 →x좌표가 위를 향하기때문에 파일을 옮기면 오브젝트가 누워있음)

-유니티 셰이더 문법은 'Shader lab(스크립트)'

*Shader lab

-(자체) 멀티 플렛폼을 위한 문법

-3가지 종류의 작성법이 일반적

Shader lab

-호환성이 좋고, 어디에나 적용 가능

-할 수 있는 것이 없음

Surface shader 

-가장 쉽고 멸티 플랫폼에 잘 대응됨

-프로그래머가 아니어도 배우기 쉬움

-Matrix 연산이 없음

-Visual Shader Editor와 개념적으로 비슷

-고급 기술은 뒤떨어지지만, 자동이라는 장점

Fragment Shader

-고급기법 적용 가능

-모두 일일이 짜야하는 단점

3.기본 문법

-구를 생성해 메테리얼을 넣어줌

-셰이더 파일 첫 생성시에 이름을 바꾸고 만듦(Why? 셰이더 파일은 생성 후 이름을 수정해도 목록에서는 그 전 이름으로 남아있음)

-구의 메테리얼 Custom에 들어가 셰이더 파일을 클릭함

-셰이더 파일을 더블 클릭 or 메테리얼 파일의 inspector창에서 오른쪽 마우스를 누르고 Edit Shader를 누르면 코딩할 수 있음

가볍게~ 코딩 문법

{} : 방의 개념

// : 주석, 메모로 사용, 유일하게 무엇이든 쓸 수 있는 구역

= : A=B, A에 B를 넣는다는 뜻

; : 마침표 역할, 스페이스바 엔터는 아무 뜻도 없기에 ;로 마무리 해야함

변수

함수

조건문 : if....

*여기서 잠깐, 파일 목차를 세부적으로 나누고 싶을 때엔?

 →

/로 폴더를 나누어 원하는 상위, 하위 폴더를 만들면

위처럼 설정이 가능함

4.Properties

-인터페이스, 껍대기를 만드는 방

- {중괄호} 안에 여러 정의를 함

간단한 인터페이스 코딩하기

이렇게 코딩을 하면

이런 식으로 인터페이스가 나옴

*셰이더가 적용되는 것을 깔끔하게 보고싶다면?

 

Skybox로 되어있는 부분 Color, Custom으로 맞추고

Ambient Color를 검정색으로 맞춰줌

5.컬러 조작

*(0.5, 0.5, 0.5) 회색을 가지고 연산을 해보면?

                           (같은 값을 더하기 전)                                                          (같은 값을 더한 후)

→회색과 회색을 더하니 흰색이 되었음

fixed3 Albedo

-11비트 디퓨즈

-빛의 영향을 받는 색상값(텍스쳐)

fixed3 Normal

-노말맵

fixed3 Emission

-11비트 빛

-스스로 발광하게함

half Metallic

-금속이거나 비금속

half Smoothness

-매끄러움 정도

half Occlusion

-구석진 곳의 빛 반사를 계산하는 값(음영)

half Alpha

-투명값

------------------------------------

윽...너모너모 힘이 들어버려

[corps]

헐 파이프라인 조사해서 정리한 것 좀 보시게나

[201413004 황혜경]

헉! 마왕 교수님(최용준 교수님)께서 파이프 라인이라는 것을 첫 수업 때 언급하셔서 더 관심을 가지고 조사 겸 공부해봤습니다. ㅠㅠ 좋게 봐주셔서 감사합니다. 다음번에는 더 나은 글 정리를 들고오도록 하겠습니다.

[corps]

그리고 정리 진짜 잘했네요

[201413004 황혜경]

과분한 칭찬 감사합니다. 칭찬 좀 소화시킬게요. 츄룹 냠냠 꿀꺽 ^0^ (양심리스)