[Unity] Shader Graph 기초 / UI

내용 정리

쉐이더 구성
-블랙보드
-그래프 인스펙터
-메인 프리뷰

색상, 색상 연산
기타 등등

 

---

쉐이더 그래프를 구경해봅시다.

 

 

 

이전 쉐이더는 코딩으로 제작하였으나 Unity 2018.1 이후버전 부터 HDRP,URP에서 사용할 수 있게 되었습니다.

HDRP? URP?

HDRP ( High Definition Render Pipeline)

URP (Universal Render Pipeline)

스크립터블 렌더 파이프라인. 렌더 파이프라인은 말 그대로 렌더링의 처리 과정을 뜻하며,

유니티에서 더 좋은 품질의 성능, 그래픽을 보여주기 위해 제작되었습니다.

대충 넘어갑시다 오늘 할건 쉐이더 그래프니까

 

---

프로젝트를 새로 생성할 때 파이프라인을 선택할 수 있습니다.

저희는 URP를 이용합니다. 프로젝트명과 위치를 정하고 새 프로젝트를 만들어 줍시다.

 

 

 

 

이제 바로 쉐이더 그래프를 만들어 봅니다. 

1. Project 윈도우에서 +버튼 또는 우클릭으로 생성할 수 있습니다.

종류는 일단 Lit Shader Graph

 

 

 

2. 생성한 쉐이더를 적용할 머티리얼도 만들어 줍시다.

팁:  쉐이더 위에서 우클릭한 후 머티리얼을 생성하면 이름과 적용 쉐이더 선택한 쉐이더로 자동 설정됩니다.

 

 

3. GameObject > 3DObject > 큐브나 아무거나 만들어서 바로 볼 수 있도록 적용까지 해둡니다.

 

아래 3가지는 쉐이더를 뜯고씹기 전에 늘 준비해 둡시다. 
1. 쉐이더 생성
2. 머티리얼 생성
3. 오브젝트에 적용 

 

더블 클릭, 또는 Inspector창에서 Open Shader Editor를 이용해 쉐이더 에디터를 열어봅시다.

 

 

---

Shader Graph 살펴보기

 

인터페이스 구성을 보면 여러 창과 버튼을 볼 수 있습니다.

 

새 노드는 스페이스바, 우클릭 후 Create Node를 통해 만들 수 있습니다.

좌측 파란 박스 내 버튼은 세이브, 우측 파란 박스 내 버튼들은 쉐이더 내 창들을 비활성화 하는데 사용합니다.

 

 

 

1. Blackboard

Porperties라고 부르기도 합니다. 블랙보드에서는 쉐이더 에디터 밖에서도 값을 수정할 수 있는 인터페이스를 제작할 수 있습니다.

시험삼아 float하나를 만들어볼까요. +버튼 또는 생성한 노드를 아래 방법으로 가져오고 저장합니다.

 

 

 

이제 씬으로 돌아와 적용한 머티리얼을 확인하면?

float이 덩그러니 있습니다. 값을 변경해도 아무런 변화는 없습니다. 이 float값은 어디로도 출력하고 있지 않으니까요.

 

 

Float 이란?

프로그래밍에서 계산할 때의 단위
32bit=4바이트
Float: 부동 소수점 (0.0 이런 거)
소수점 아래 6번째까지 유효하다.
 
색상을 표현할 때는 RGB를 float3(0.0,0.0,0.0)으로 표현.(24bit)
알파 값을 포함하면 RGBA를 float4(1.0,1.0,1.0,1.0)로 표현한다.(32bit)
 
Vexter로도 부른다! (Vecter2, Vecter3 등)

 

2. Graph Inspector

그래프와 노드의 설정을 관리할 수 있습니다. 

노드 설정은 노드를 선택할 경우 나타납니다.

 

Universal 하위 목록을 보면 Lit등 빛연산의 여부, 워크플로우를 메탈, 스페큘러 중 선택할 수 있게 되어있습니다.

그 외에도 알파, 투 사이드 등도 여기서 설정할 수 있습니다.

 

 

 

Graph Inspector에서 위의 블랙보드 내에 있던 인터페이스 설정을 확인할 수 있습니다.

 

이름은 float으로 되어있으나 레퍼런스에서는 괴상한 벡터1 어쩌구저쩌구로 되어있죠. 코드를 수정 할 경우 Reference명을 통해 해당 변수를 찾기 때문에 이름은 용도에 알맞게 수정하는 것을 잊지 맙시다.

 

플머를 위해 이름을 잘 지정해 줍시다. 위의 이름은 Reference와 같게 하면 플머가 찾기 쉬울 것이며, 엔진 기능에 미숙한 사람을 위해 쉬운 이름을 지정해줘도 될 겁니다. 케바케

 

• Default- 초기값입니다.
• Mode- 인터페이스 모드를 결정합니다.(거의 Default, Slider만 사용함)
  • Default- 기본
  • Slider- 0~1 사이의 숫자를 슬라이더로 이용할 수 있습니다.
  • Integer- 정수만 사용 가능 (하다는데 소수점까지 다 나옵니다.)
  • Enum- 사용할 수 없음 (따로 사용하는 곳이 있다고 함)

 

 

3. Main Preview

제작한 쉐이더를 미리볼 수 있습니다. 마우스로 돌려 볼 수도 있고, 우클릭 후 오브젝트 형태를 변경할 수 도 있습니다.

 

 

4. Master Stack

쉐이더의 최종 결과를 출력하는데 사용합니다. 베이스 컬러, 노말, 메탈릭 등등 각 값에 지정해주면 됩니다.

Vertex와 Fragment 컨텍스트로 나눠져있는데 Vertex쪽은 나중에 사용하게 될 때 다시보기로 합시다.

 

---

색상 연산

 

가장 먼저 출력해볼 것은 색상입니다. 눈에 가장 잘 보이는 거

기존에 출력되고 있는 색상을 변경할 수도 있고,

 

 

블랙보드에서 컬러를 만들어 연결해 줄 수도 있겠죠.

 

 

다음에는 숫자를 이용한 색상 연산을 해봅시다. 

그전에 '색상=숫자'를 이해하고 갑니다.

 

색상을 나타낼 때 가산 혼합 방식을 사용하는데

R float3(1,0,0)

G float3(0,1,0)

B float3(0,0,1)

 

검정 flaot(0,0,0)

흰색 float(1,1,1)

 

이런식으로 RGB를 섞어 다양한 색을 내는 거죠.

노란색을 내고 싶다면?

Y float3(1,1,0) 이런식으로 할 수 있습니다.

 

 

float1=그레이 컬러

float2=RG (뒤의 값이 버려짐)

float3=RGB

float4=RGBA(알파까지)

 

이제 쉐이더 그래프를 다시 봤을 때 컬러 뒤의 (4),(3)의 뜻을 이해할 수 있습니다.

각각 float4, float3의 값이 들어간다는겁니다.

 

---

 

그럼 float3(1,0,0)에 0.5를 곱하면 어떻게 될까요? 

곱할 때는 Multiplt 노드를 사용합니다.

 

 

 

1*0.5= 0.5

0*0.5= 0

 

그러므로 float(0.5,0,0) 어두운 빨간색이 나오게 되는 겁니다.

 

---

+ 프로퍼티로 내보내지 않은 값은?

 

 

 

밖에서는 수정할 수 없지만 내부에서는 그대로 적용됩니다.

0.5를 곱한 상태이니 무슨 색상값을 넣어도 0.5만큼 어두워집니다.