201513028 이아름 3주차

[201513028 이아름]

셰이더(shader)

버텍스 셰이더

: 버텍스 하나당 한번씩 색을 계산한다.

 버텍스에는 y, z 좌표, 색상, 텍스처, 조명 정보 를 가지고 있고

이런 정점의 정보값을 변화시켜서, 물체를 특별한 위치로 옮기거나,

텍스처를 바꾸거나, 색상을 바꾸는 등의 일을 할 수 있다.

픽셀 셰이더

: 각각 픽셀당 한번씩 색을 계산한다.

해상도가 높아지면 픽셀 부하도가 높아진다.

때문에 픽셀 셰이더는 최종적으로 픽셀이 어떻게 보일지를 결정하게 되는데,

픽셀 셰이더는 간단하게 언제나 같은 색을 출력하는 간단한 일에서부터, 텍스처로부터 색을 읽어오거나,

빛을 적용하는 것, 범프 매핑, 그림자, 반사광, 투명처리 등 복잡한 현상 등을 수행할 수 있다.

각각의 픽셀이 폴리곤에 딱 달라붙어 적용될 때

픽셀이 텍스쳐화 되는 것을 텍셀 이라고 한다.

이미지 디스플레이에 사용되는 픽셀이 모니터에 뿌려지는 점(dot)의 수라면

텍스처 매핑에 사용하는 이미지를 구성하는 각각의 요소가 텍셀이다.

한 픽셀당 단색으로 float4 의 칼라만 출력된다 (빨강보라밝은보라...

오직 한 픽셀만을 연산하기 때문에, 주변의 픽셀이나, 그리는 도형에 대한 정보를 알 수 없다.

Lerp (Linear Interpolation) : 선형보간

A와 B를 인자값(0~1) 에 따라 섞어준다.

텍스쳐를 부드럽게 전환시켜 줄 때 사용한다.

UV 란?

< DirectX 에서의 좌표와 OpenGL 에서의 좌표 >

DirectX와 OpenGL의 좌표 값이 다른데 언리얼에서는 DirectX 좌표를

유니티에서는 OpenGL 좌표를 사용한다.

UV에 이미지를 띄워 보자

픽셀 셰이더는 surface 라고 하며  surf를 사용한다

현재 void surf를 사용하는 것을 통해서 픽셀 셰이더를 다룬다는 것을 알 수 있다.

그래서 요로콤 텍스쳐를 받아서 확인을 해보면

잘 뜨는 걸 볼수 있다.

UV에 '*2' 씩 곱해 본다면 어떻게 될까?

좌표 값이 1 이상 넘어버리면 이미지를 나눠 버리는데

반복적으로 이미지가 깔리는 것을 'Tiling' 이라고 한다.

그렇다면 *0.5 곱하게 되면 반절이 되겠군..!

확인해 보자!

" 자폭스위ㅊ... "

오히려 '+1' 씩 더해 본다면 어떻게 될까?

으라라 그대로네?

(0.0) +1 더하면 1.1

(0.1) +1 = 1.2, (1.1) +1 = 2.2 

가 되기 때문에 위치만 바뀌게 되고

사진은 그대로 보이게 된다.

어느정도 UV의 개념을 알게 됐으니 눈으로 한번 보도록 하자!

UV = XY = RG 같다!

o.Emission = IN.uv_MainTex.r (혹은 x를 넣어도 된다.);

UV의 x(r) 좌표는  0 ~ 1 흐름으로 가기 때문에

가로방향으로 검정 ~ 흰색의 그라데이션이 보이게 된다.

그럼 y(g) 좌표는 아래에서 위로 검정에서 하얗게 변하는 것을 확인할 수 있다.

그렇다면 이런 짓도 가능하지 않을까?

대각선으로도 가능하다(개코딩중)

이제 여기서 RGB 컬러를 넣게 되면 어떻게 나올까?

float3 에 x 좌표는 아래에서 른쪽으로 갈수록 R색이 나오겠고

y 좌표는 위로 갈수록 G색이 나오겠지요?

확인 해보자

뙇! 언리얼에서는 반대로 빨강색이 위에서 흘러내리겠고

초록색이 왼쪽하단에서 올라

UV Animation

흘러가는 UV 만들어보기

UV 좌표를 이용해 물처럼 흐르는 애니메이션을 만들수 있다!

'_Time' 을 이용하면 되는데 내장변수기 때문에

딱히 변수선언을 할 필요없이 바로 사용하면 된다!(편리

IN.uv_MainTex 뒤에 _Time 만 더해 주면 되는데

_Time.z - 2배속

_Time.w - 3배속

_Time.x - 느림

세가지 종류가 있다.

x와 y 가 같이 움직이기 때문에 그 중간인 대각선으로 움직인다.

직선으로 한쪽 방향에만 움직이게 만들고 싶다면

x 혹은 y 좌표 값에만 _Time.y 되겠죠!

x와 y를 다른 값을 줘야하니 float2 를 사용한다.

위에서 아래로 움직이게 되었다!

가로세로로 움직이게 하고 싶다면 _Time 값과 앞에 +, - 를 주면 왼쪽이나 오른쪽으로 움직이겠죠

불 셰이더 만들어보기!

일단 우선 불 셰이더를 만들기 전, 알파가 들어갈 수 있는 환경부터 만들어주자

1) 가문 바꿔주기

: 알파를 사용하기 위해선 "Opaque" 를 "Transparent" 로 꼭 바꿔줘야 한다.

2) alpha:blend

: 알파를 받을 수 있도록 'alpha:blend' 를 입력한다.

두가지가 준비 완료되었다면

불 셰이더를 만들어 보자!

불의 일렁이는 느낌을 내기 위해서!

알파를 가지고 있는 불 텍스쳐 하나와

검은색과 흰색이 마구잡이로 섞인 노이즈 텍스쳐 하나, 총 두개를 준비한다.

불의 일렁임을 위해서 노이즈 텍스쳐(d)에 _Time.y 준다.

그걸 불 텍스쳐(c)에 먹이기 위해서 c 위에 둔다.

이미지 자체 사이즈가 크다보니 아래가 짤려서

나오는군..

조금 위로 올려보자.

수정하는 김에 d의 노이즈의 방향도 아래에서 위로 솓구치는 느낌으로

주기 위해 y 좌표 값에만 '-_Time' 을 주고

c 의 텍스쳐 x 좌표와 y 좌표 값을 조금 더해 이동을 해준다. 

위의 개념을 조금 활용하면

이런 불삼기둥도 만들 수 있다.

(삼겹살 먹고싶..)

버텍스 칼라

Vertex Color

버텍스가 가지고 있는 정보 값중에 칼라를 사용해보기.

준비물을 교수님께서 주신 이 파일을

맨 아래에 'Vertex Painter' 를 유니티로 끌어다 놓으면

요렇게 윈도우에 버텍스 컬러가 생긴걸 확인할 수 있다.

이것을 클릭해서 본격 작업에 들어가자!

R, G, B 컬러를 다 보이게 칠한 다음, 창 맨밑에

'SAVE NEW MESH' 를 눌러주자.

눌러주면 'New Mesh' 가 생기는데

이전 만들어놓은 플랜은 없애주고 'New Mesh'를 유니티 화면에 띄워준다.

옮기게 되면 마젠타가 나오는 경우가 있는데 무료 에셋이라.. 'New Mesh' 에서

Add Component => 'Mesh Collider' 를 따로 설정 해줘야한다.

해주지 않을 경우, 오브젝트를 선택된 상태에서 다시 버텍스 페인트를 켜도

'Collider!' 를 찾을 수 없다고 에러창이 뜬다.

코당 들어가기 전, 'HIDE VERTEX COLORS' 을 눌러서 확인해주자.

버텍스 컬러는 기본적으로 안보이기 때문에

Input 에서 color:COLOR (RGBA 니 당근 float4) 로 받아서 사용하면 된다.

Input 안에 있는건 함부로 사용할 수 없기에 꼭 IN. 를 써준다.

c 텍스쳐와 버텍스 컬러를 혼합해 보자.

혼합이 된다!

[버텍스 컬러의 각각의 RGB에 다른 텍스쳐를 입혀보자!]

먼저 텍스쳐를 넣을 인터페이스를 더 생성을 하고

노말맵을 넣을 인터페이스도 하나 생성을 해주자.

노말은 'BumpMap' 이라고도 하는데, 이 인터페이스를 넣게 되면

유니티가 자동으로 노말형으로 바뀌게 된다고 한다.

 똑같이 만들어 주고

lerp를 이용해 d 텍스쳐가 버텍스 컬러 R 부분만큼 입혀지는데

다시 'Albedo' 를 불러와 e 텍스쳐를 G 컬러에 입힌다.

이것을 반복..

한 마디로 상자안에 이미지를 넣고 다시 그 상자를

불러와 다른 이미지를 넣는 거라 할수 있다!

* 'lerp' 를 쓴 이유는 이전 텍스쳐를 유지한채 다른 텍스쳐를 입히기 위해서다!

각각의 텍스쳐가 버텍스 컬러 R, G, B에 입혀진걸 확인 할 수 있다.

+

노말을 입혀보자!

노말을 넣기 위해서 fixed3 를 사용, 그 이후 쓰는 방식은 텍스쳐와 비슷하다.

오류가 뜨는데 이건 shader 2.0 의 한계... 텍스쳐 장수가 초과되어서 그런거니

당황하지 말고

지웠던 '#pragma target 3.0' 을 다시 입력하면 해결된다.

노말맵을 넣을 때 주의할 점으로 텍스쳐 타입이 노말인 것을 확인한다.

노말 혼자서는 잘 보이지 않기 때문에

이전에 지웠던 'Metallic' 과 'Smomthness' 값을 입력해준다.

짜란~

요로콤 나온다!

[corps]

잘 정리했네