스터디 노트

Surface Shader는

복잡한 연산이 많이 생략되어 있어 초보자가 사용하기 좋음

다양한 환경(모바일,pc, 라이트맵 유무, 조명이 픽셀 라이팅인 경우, 버텍스 라이팅인 경우 등등)에

맞게 각각의 쉐이더가 제작되어야 하는데

Surface Shader는 자동으로 제작해주어서 실무에서 간편하게 사용가능 (물론 최적화 필요) 

쉐이더 Properties - 익스펙터에서 입력할 수있는 항목을 만들 수 있는 부분

자주 쓰는 인터페이스

Range

슬라이더바 만들기

_Brightness ("change Brightness!", Range(0, 1)) = 0.5

* _Brightness : 기능의 변수명

* "change Brightness!" : 인스펙터에 나타나는 글자

* Range(0, 1) : 슬라이더 값을 0.0~ 1.0 사이로 설정

* 0.5 : 쉐이더 처음 만들어졌을 때 초기값

Float

입력 값이 슬라이더 방식이 아닌 직접 값을 입력해야 함

_TestFloat ("Test Float!", Float) = 0.5

Color

R, G, B, A 4자리 숫자 입력 가능 (float4)

_TestColor ("Test Color!", Color) = (1,1,1,1)

Vector

float4를 직접 숫자로 입력 가능\

_TestVector ("Test Vector!", Vector) = (1,1,1,1)

tex2D

2D 텍스쳐를 받는 인터페이스를 만들어줌

텍스쳐는 UV 좌표와 함께 계산되어야 float4로 출력 가능함

아직 UV와 계산되지 않은 텍스쳐는 색상(float4)로 나타낼 수 없는데 이때까지는 sampler라고 부름

_TestTexture ("Test Texture!", 2D) = "white" {}

* {} 는 옵션

유니티 쉐이더는 ShaderLab 이라고 불리는 자체 스크립트 언어를 이용함

ShaderLab을 이용한 제작 방식은 크게 세 가지로 나뉨

1. ShaderLab으로만 작성

  - 매우 가볍고 하드웨어 호환성 좋음

  - 기능이 부족하여 고급 효과 구현 어려움

2. Surface Shader로 작성

  - ShaderLab 스크립트와 함께 CG 쉐이더 코드 사용

  - 기본적인 조명 코드와 버텍스 쉐이더의 복잡한 부분은 스크립트로 자동처리

  - 픽셀 쉐이더 부분만 간편하게 작성할 수도 있음

  - 최적화에 다소 무리있음

  - 일정 수준 이상의 고급 기법 구현 어려움

3. Vertex & Fragment Shader로 작성

  - ShaderLab 스크립트와 함께 CG 쉐이더 코드 사용

  - 자동으로 처리해주는 부분이 별로 없음

  - CG 쉐이더 방식으로 버텍스의 좌표 변환부터 제대로 처리해야 작동함

  - 수동으로 제어할 수 있어서 최적화, 고급 기법 표현시 좋음

참고 : 테크니컬 아티스트를 위한 유니티 쉐이더 스타트업

쉐이더(Shader)

3D 컴퓨터 그래픽에서 최종적으로 화면에 출력하는 픽셀의 색을 정해주는 함수

렌더링 파이프라인 (렌더링 순서)

1. 오브젝트 데이터 받아오기

  - 그래픽 카드가 버텍스(정점)로 이루어진 물체 데이터 값을 받아옴 

  - 버텍스는 버텍스의 Index number, position, normal, color 등의 정보를 갖고 있음

2. 버텍스 쉐이더 (Vertex Shader)

  - 버텍스의 위치 값 변환이 이루어짐

1. 로컬 좌표
2. 월드 좌표계 변환 (월드 변환 행렬 곱하기)
3. 카메라 중심점으로부터 좌표 계산. Orthographic Projection(카메라 행렬 곱하기)
4. 원근감 부여 (Projection 행렬 곱하기) Perspective 프로젝션일 경우에만 일어남

3. 래스터라이져 (Rasterizer)

  - 좌표를 조정한 버텍스들을 픽셀 단위로 변환하는 과정

4.픽셀쉐이더(Pixel Shader) / 프레그먼트 쉐이더(Fragment Shader)

  - 픽셀에 조명, 텍스쳐, 그림자, 특수효과 등을 연산하여 최종 픽셀 색상을 결정함

모니터 색은 가산혼합으로 만들어짐

* 가산혼합 - RGB로 이루어진 색을 더할수록 밝아짐

* 컬러 모니터는 RGB로 구성된 3개의 서브픽셀로 이루어져 있음 (설계에 따라 아닌 경우도 있음)

R(100%) G(100%) B(100%) => 흰색

R(0%) G(0%) B(0%) => 검은색

R(50%) G(50%) B(50%) => 회색

R(0%) G(0%) B(100%) => 파란색

컬러를 Float 단위로 나타내기

100%를 1, 50%를 0.5, 0%를 0으로 나타냄

R(100%) G(50%) B(0%) => Float3(1.0, 0.5, 0.0)

컬러 연산

덧셈

float3(0.5, 0.5, 0.5) + float3(0.5, 0.5, 0.5) = float3(1,1,1)

뺄셈

float3(1, 1, 0) + float3(1, 0.5, 0) = float3(0 ,0.5, 0)

곱셈

float3(0.5, 0.5, 0.5) * float3(0.5, 0.5, 0.5) = float3(0.25, 0.25, 0.25)

나눗셈은 상대적으로 계산이 느리고 곱셈 연산으로 대치 가능해서 잘 안씀

값이 0 이하 1이상일 경우 =>  숫자 값은 유지되어도, 0 미만, 1 초과의 값은 모니터에서 표현할 수 없음

float3(1, 1, 0) + float3(1, 0, 0) = float3(2, 1, 0) => 숫자만 2로 존재할 뿐, 실제로 보이는 건 (1, 1, 0) 

float3(1, 0, 0) - float3(0, 0, 1) = float3(1, 0, -1) => 숫자만 -1로 존재할 뿐, 실제로 보이는 건 (1, 0, 0) 

컬러 반전(Invert)

1에서 어떤 색을 빼면 그 색이 반점됨

빨간색을 반전하면 하늘색이 됨

1 - float3(1, 0, 0) = float3(0, 1, 1)