셰이더 그래프 - 간단한 개념, 사용법 기초

1. 셰이더란?

셰이더(Shader) == 예쁜 것!

정점위치나 픽셀색깔을 계산하는 함수

ex) 나뭇잎이 바람에 흔들리면 위치, 픽셀 색깔이 달라짐

 

2. 셰이더 그래프를 사용하려면?

프로젝트를 생성할 때

URP(Universial Rendeing PipeLine) 라는 항목이 있음

셰이더 그래프를 쓰기 위해서는 최소 URP 이상으로 생성!

Rendeing PipeLine : 3D 오브젝트를 2D 화면까지 표현하는 과정

 

3. 사용을 위해 알아두면 좋은 사전 지식

1) 버텍스 셰이더

Quad = 4개의 정점을 이어 이루어진 사각형이 있다고 하면

각 정점에는 위치 좌표, 면의 바깥쪽을 향하는 노말 벡터(파란 화살표), 탄젠트 벡터(빨간 화살표)

 

노말 벡터는 표면의 방향

탄젠트 벡터는 표면에 접하는 벡터

 

노말 벡터는 반사, 그림자 등 자세한 색의 표현을 위해 사용

노말 벡터로 세세한 색을 나타낸 각각의 픽셀은 노멀맵으로 텍스쳐 저장

 

이 텍스쳐를 표현할 때 필요한 것이 탄젠트 스페이스

탄젠트 스페이스는 3D 모델의 표면을 기준으로 한 로컬 좌표 공간

 

이 공간을 표현하기 위해 앞서 얘기한 두 벡터 외에 양질 벡터가 필요한데

노말, 탄젠트 벡터를 알면 이 둘에 수직인 양질 벡터는 산출할 수 있기에 셰이더 그래프에서는 둘을 필요로 함 

 

게임 화면에 들어가려면

카메라가 쿼드를 보고 있으며 인스펙터에서 보는 월드 좌표가 아닌 카메라로부터의 상대 좌표로 오브젝트를 인식

 

카메라의 near~far Plane 사이에 위치한 오브젝트만 볼 수 있음

>> 카메라와 오브젝트 간 거리를 인식하며 원근감 표현

 

01

카메라를 기준(원점)으로 상대좌표계를 잡으면

쿼드는 카메라에서 (0,0,-10)만큼 떨어진 상태

각 점은 쿼드 중앙으로부터 x,y축으로 각 방향 절대값 0.5씩 떨어진 상태

 

 

절단 좌표계 (유니티에서도 따로 건드릴 수 없기에 상세히 공부하지는 않음)

각 기기는 해상도가 다르기에

해당 쿼드가 있는 공간을 잘라 가상의 박스를 만들고 화면 크기에 맞게 2D 좌표로 조정

 

레스터라이저

3D를 2D 좌표로 조정하면서 각 픽셀마다 정점들을 보간한 위치,노말,탄젠트 등 정보를 지니고 있음

 

 

2) 프래그먼트(픽셀) 셰이더

픽셀에 접근하여 화면에 보여지는 각 픽셀의 색상 조절 가능

 

정점조립 >> 버텍스 셰이더(오브젝트, 월드, 뷰 좌표계까지) >> 래스터라이저 >> 프래그먼트(픽셀) 셰이더

여기까지가 RP(랜더링 파이프)

 

4. 셰이더 그래프 생성, 화면 구성

들어가기에 앞서,

해당 포스팅은 2022 LTS 버전으로 작성되었기에 이후 버전과는 메뉴 내용이 다를 수 있습니다.

1) 생성

셰이더는
Project 창 우클릭 >> Create >> Shader 혹은 Shader Graph 항목으로 생성 가능

unlit : 빛에 반응하지 않는 그래프
lit : 빛에 반응하는 그래프

셰이더 그래프에 들어가면 기본적으로 버텍스, 프랙그먼트와 여러 창이 출현합니다.

 

 

2) 메인 프리뷰

오른쪽 아래의 메인 프리뷰

만든 셰이더가 어떻게 작동하는지 미리보기 기능!

 

우클릭하면 구형, 실린더형 같은 유니티 기본형으로 간단히 볼 수도 있고

 

커스텀 매쉬도 불러올 수 있어서

작업하려는 모양 그대로 볼 수도 있어요

 

마우스 드래그로 회전, 스크롤로 확대/축소

 

 

3) 노드

화면 우클릭 >> Create Node >> 원하는 노드 검색하여 선택 >> 생성

 

 

간단한 색과 시간 변화의 조합

 

어떤 노드가 있는지 상세한 설명은 해당 포스팅에서 다루지 않습니다.

 

대략적으로 어떤 것인지 알려드리자면

노드는 Color, Add, Multiply, Sign, Time, Simple Noise 등 아주 많은 것이 있습니다.

 

값, 연산, 시간에 따라 변화 등

시각적 표현을 위해 이를 조합할 수 있게끔

노드끼리 좌우의 점으로 연결할 수 있습니다.

 

 

4) 프로퍼티

왼쪽에 셰이더 그래프 이름이 써진 박스의 + 버튼을 누르면 프로퍼티 추가 가능

해당 셰이더 그래프에서 사용하는 프로퍼티들을 한 곳에서 볼 수 있게 표시합니다.

 

생성한 노드에 우클릭 >> Convert To (~로 변환) >> Property

 

노드를 이렇게 프로퍼티로 변환하면

기존에 해당 노드에서 작업한 설정값 그대로 프로퍼티로 올라갑니다

 

예를 들어 흰색으로 설정한 Color 노드를 프로퍼티로 바꾸었다면

흰색의 값을 가진 Color 타입 프로퍼티가 됩니다.

 

 

프로퍼티는 왜 쓰는가?

 

public 변수에 값을 담아놓고 쓰는 것과 비슷한 원리라 보시면 됩니다.

인스펙터에서 값 수정 가능하다는 장점이 생깁니다.

 

이건 만든 셰이더를 적용하는 단계에서 보여드리겠습니다.

 

프로퍼티의 이름도 바꿀 수 있습니다.

 

프로퍼티를 화면으로 드래그 앤 드롭하면 복사하여 생성할 수 있습니다.

 

 

5) 그래프 인스펙터

다음 공부에 앞서,

셰이더 그래프 오른쪽 위에 있던 그래픽 인스펙터를

보기 좋게 왼쪽 프로퍼티 창 옆으로 옮겼습니다. 

 

인스펙터는 프로퍼티, 노드 등 항목을 선택하면 정보 출현 및 수정 가능

참조(Reference) 이름은 앞에 _ (언더바)가 붙습니다.

시작 스크립트에서 해당 형식으로 사용하기에 이건 지켜주어야 문제가 생기지 않을 것입니다.

친숙해지기 전까지는 _이름 그대로 쓰도록 하겠습니다.

 

에디터에서의 인스펙터와 동일하다 생각하면 됩니다.

 

6) 만든 셰이더 출력 (색상)

색상을 만들었는데 프리뷰는 그대로 있습니다.

 

노드의 오른쪽에 Out(4) 라고 적힌 점이 있네요

해당 노드의 Color 색상을 구성하는 4가지 값을 저 점에서 내보낸다는 의미입니다

 

위에서 개념 부분을 공부하며

버텍스, 프래그먼트 셰이더에 대한 얘기를 했었지요

 

버텍스는 정점, 노말 벡터, 탄젠트 벡터를 통해 색을 자연스럽게 환경에 맞게 표현하기 위한 파라미터들이 들어가며

프래그먼트는 픽셀의 색깔에 관여할 파라미터들이 들어갑니다.

 

그러니 Color 노드의 색을 그대로 오브젝트에 표현해보기 위해

점을 드래그하여 옆의 프래그먼트 >> Base Color(3)에서 마우스 버튼을 놓았습니다.

그러면 메인 프리뷰에 제가 설정한 색이 짠 하고 나타납니다.

 

3은 RGB 아니면 HSV와 같은 색을 표현하기 위한 3가지의 파라미터를 받는다는 뜻인데

Color타입의 4번째 파라미터 Alpha. 투명도에 해당하는 값은 받지 않네요.

 

 

첫 포스팅부터 노드와 프로퍼티를 조합하며 달리면 건강에 해롭습니다.

여러분들과 저의 건강을 위해 이번엔 여기서 마무리하고 적용 단계로 넘어가 보도록 하겠습니다.

 

Exposed에 체크하면 에디터의 인스펙터에 해당 프로퍼티가 출현

 

다음 설명을 위해 이 연두색을 프로퍼티로 만들었습니다.

 

상단의 셰이더 그래프 이름에 * 가 들어와 있으면 변경 사항이 있다는 알림이니

Cntl+s 를 눌러 작성한 셰이더 그래프를 저장합니다

 

 

5. 머티리얼

 

1) 머티리얼이 왜 여기서 나와?

 

유니티 개발의 기초를 배울 때 3D 오브젝트들의 표면의 색상, 재질 등을 표현하기 위해 머티리얼을 쓰고는 했습니다.

 

지금까지 설명해온 셰이더와 설명이 겹치지 않냐고요?

그렇습니다.

우리가 물체의 색상을 표현하기 위해 사용하던 머티리얼은

이미 셰이더를 포함하고 있었기에 그 기능이 가능했던 것입니다.

 

2) 커스텀 셰이더를 사용하는 머티리얼 생성

그렇기에 셰이더를 통해 이를 포함한 머티리얼을 생성하게 할 수도 있습니다.

 

만든 셰이더에 우클릭 >> Create >> Material

해당 셰이더를 사용하는 머티리얼 생성

 

 

머티리얼을 눌러 인스펙터를 보면,
셰이더를 다른 것으로 바꾸어 적용 가능하기도 하고

아까 만들었던 프로퍼티도 인스펙터에서 볼 수 있습니다.

 

 

Color 프로퍼티의 색상은 기본으로 연두색으로 들어오나

인스펙터에서 색상값을 바꾸어 원하는 색으로 바꿀 수 있게 만들 수도 있습니다.

 

 

마치며,

여기까지는 셰이더 그래프 기초 중에 기초만

제가 이해한 그대로 최대한 쉽게 다뤘습니다.

 

다음 포스팅부터는 프로퍼티, 노드에 대한 각종 옵션 설명부터 해서

이를 활용한 몇가지 효과까지 만들어보도록 하겠습니다.

 

 

<< 참고자료 >>

1. 전체적으로 해당 영상을 보면서 공부하였어요.

기초부터 차근차근 알찬 내용이니 길다고 주저하지 마시고 한번 쭉 보시는 걸 추천합니다

 

다만, 최근 버전의 에디터와는 메뉴가 좀 다른 부분이 있지만 크게 지장이 있을 정도는 아닙니다.

https://youtu.be/KnueAgpUL3Y?si=QGxdIbYAP8OSN3Ck

 

 

2. 탄젠트 벡터가 무엇인지 궁금하여 찾아본 게시글!

본문은 아주 간단한 부분만 참조하였으니 자세한 정보가 필요하시면 방문해보시길 추천드려요

https://rhksgml78.tistory.com/312

[Graphics] 노멀 매핑(Normal Mapping) & 탄젠트 스페이스(Tangent Space)