[💬] 데이터주의) 101 - #2 URP / Shader Graph (1)

[정공개발자(firetruck4545)]

이미 쉐이더 그래프에 대해 알고있다면 이 글을 안보셔도 무방합니다.

이번엔 URP 그리고 Shader Graph의 기초에 대해 아라보자.

사실 거창한걸 가르치는건 아니니깐 걱정하지 마라.

나같은 좆밥도 쓸줄 아니깐 더 똑똑한 님들은 더 잘 쓰겠지.

저번에도 이야기 했지만 이것과 관련해 쓸 내용이 너무나도 많기 때문에 여러 파트에 걸쳐 알아볼 것인데.

첫 파트에선 대략적인 설명, 세팅 방법, 그리고 간단히 Shader Graph 기초에 대해 알아보자.

그리고 영어 할줄 알면 이딴글 처 보는것보다 구글링을 하거나 관련 유튜브 검색해서 강의/소개 영상 보는게 훨신 유익하다.

특히 한국 유튜버가 만든 두시간 짜리 Shader Graph 노드 설명 영상도 있던데 그거 너무 좋더라.

#설명

먼저 URP에 대해 설명하겠다.

URP란 Universal Render Pipeline의 약자라고 방금 구글링해서 알아냈다.

나같은 좆밥들은 그냥 대충 쉐이더와 빛과 렌더링 관련 처리에 필요한 거라고 이해하자

이 표현은 완전 틀린 말이지만 어차피 내가 알려줄 수 있는건 그 딱 정도 수준이다.

나머지는 알아서 구글링하시길

Shader Graph는 쉐이더를 텍스트로 스크립트를 작성하는게 아니라 시각적으로 제작할 수 있는 기능이다.

이렇게 만든 쉐이더 그래프는 URP를 사용해 표현 할 수 있다.

보통 여러 노드들의 조합을 통해 텍스쳐를 가공을 한뒤 그걸 최종 결과에 집어넣는 식으로 한다.

#세팅

유니티 새로운 프로젝트에서 URP를 고른다.

사실 기존 일반적인 2D프로젝트도 URP를 전환 가능하다.

그건 구글링 링크를 써줄테니 알아서 하자.

unity urp 적용 - Google 검색

잠깐!!!!!!!!!!!!!!! 직접 한번 해보니 밑의 과정을 수행 하는 것보다 기존 2D프로젝트에 urp 추가하는 방법이 더 편하더라 ㅅㅂ

그걸 글을 다 쓰고나서 알았엉

그러면 이렇게 샘플 씬이 있을텐데

저번에도 이야기 했지만 당분간 모든 강의는 2D 기준으로 진행 할것이므로 싹다 날려주자.

카메라를 제외한 모든걸 지우고, 

카메라에서 Environment - Background Type을 SolidColor로 바꾸고

씬 화면의 스카이 박스를 꺼주면 우리가 2D 프로젝트를 막 만들었을때랑 똑같이 보인다.

Create -> Rendering -> Univer 어쩌구 -> 2D 어쩌구 선택

그러면 파일 하나가 만들어지는데 일단 놔두고

Settings에 있는 UniversalRP-HighQuality를 클릭 - RenderList에 있는 곳에다가 아까 만든걸 집어 넣는다.

참고로 아까도 이야기 했지만 2D만 할꺼라서 3D를 ㅈ도 신경쓰지 않을꺼다.

게임이 3D일 경우 그냥 프로젝트 생성이후 아무것도 건들이지 마라

디폴트로 이 프로젝트의 렌더 파이프가 UniversalRP-HighQuality로 되어 있으므로 세팅은 거의 끝났다.

상단의 Window -> Package Manager를 누른다.

2D 관련 패키지를 패키지 매니저에서 설치해주자

나는 저 4개만 필요할것 같아서 저것들만 설치했다.

이렇게 보니깐 그냥 2D 프로젝트에 URP를 적용하는게 더 빠르고 쉽겠다.

시발

#Shader Graph 기초

쉐이더 그래프는 Create -> Shader -> Universal Ren어쩌구 에 가면 4가지 선택지가 있다.

참고로 버전마다 보이는게 다르다.

우린 2D만 할꺼니깐 Sprite가 붙은것만 보도록 하자.

쉐이더 그래프는 보통 Lit과 Unlit으로 나누어지게 된다.

Lit으로 하면 오브젝트에 빛을 주면 조명연산을 하고

Unlit이면 빛이 있더라도(혹은 없더라도) 그것에 대한 조명연산을 하지 않는다.

나는 보통 오브젝트가 스스로 빛을 내야 하는 경우 Unlit, 그렇지 아니면 Lit으로 만듬.

예시로 만들 쉐이더는 빛을 내는 배리어이기 때문에 나는 Unlit을 고르겠당

만들어진 쉐이더 그래프를 누르고 우클릭 -> Create -> Material을 누르면

즉시 그 쉐이더를 이용한 Material을 만들수 있다.

그러면 네모난 스프라이트를 만들어서 거기에 방금 만든 쉐이더의 메터리얼을 적용시켜보자.

그럼 회색 네모가 뜬다.

엥? 왜 흰색도 아니고 회색이지? 싶을수 있는데 고것은 이제 만들었던 쉐이더 그래프를 더블 클릭해보라

그러면 쉐이더 그래프를 수정하는 창이 뜰것이다.

원하는데에다가 붙혀주자 나는 유니티 레이아웃을 2 by 3로 해놓고 씬탭 옆에 바로 스위칭 되도록 뒀다.

(Fragment 위에는 쉐이더의 정점을 설정할수 있는 Vertex가 있는데 그것은 따로 다른 글에서 설명할 생각이다.)

회색이 뜨는 이유는 Base Color에 회색이 들어가 있어서 그렇다.

하지만 만약 우리가 이 색깔을 바꾼다 할지라도 단지 이미지에 어떤 단색을 입히는가가 될것이다.

우리가 원하는건 '스프라이트 렌더러의 스프라이트의 텍스쳐'를 '가공'한 뒤에 그것을 출력하는것 이므로

먼저 스프라이트 렌더러의 스프라이트의 텍스쳐를 가져올 필요가 있다.

우선 오른쪽 프로퍼티에 Texture 2D를 추가해주자

그리고 이름을 _MainTex라고 해주자

여기서 프로퍼티란 보통 쉐이더로 매터리얼을 만들때 매터리얼에서 수정할수 있는 변수..?를 의미하지만

이 _MainTex에선 Sprite Renderer의 Sprite를 가져오는데 쓸것이다.

사실 이름이 _MainTex인지는 중요하지 않다

중요한건 Reference가 _MainTex로 되어 있느냐가 중요하다!

Reference를 _MainTex로 바꿔주기 않으면 스프라이트 렌더러의 스프라이트를 가져오지 않는다.

그러므로 Reference를 _MainTex로 바꿔주자.

참고로 여기에 Default 텍스쳐를 입혀주면 텍스쳐가 쉐이더 그래프 과정에서 어떤식으로 변화하는지 확인하기 수월하다.

나는 여기에 검은외각선의 하얀 육각형들이 타일링 되어있는 스프라이트를 사용하겠다.

다 했으면 프로퍼티 창에서 _MainTex를 드래그 드랍해서 노드를 만들어보자.

그리고 오른쪽 빨간 점을 눌러 드래그 드랍으로 노드를 생성하자

생성할 노드는 Sample Texture 2D (Texture)다.

Sample Texture 2D는 적용된 텍스쳐의 모습을 확인할수 있으며 또한 특정 색만을 추출 할수도 있다.

모든 노드는 왼쪽이 인풋값, 오른쪽이 아웃풋 값을 의미한다.

_MainTex에서 드래그 드랍해서 생성하니 자동으로 Sample Texture 2D의 Texture 인풋 값으로 _MainTex가 들어간 모습을 확인할수있다.

그러면 아웃풋 값인 RBGA를 Base Color에 넣어주고, 다른 아웃풋인 R(빨강)를 Alpha에 넣어주자.

사실 빨강이 아니라 초록이나 파랑이나 상관은 없다.

중요한 점은 해당 색을 0~1의 숫자로 표현할때 검정색 부분은 0, 하얀색 부분은 1을 가질것이다.

그리고 그것을 기반으로 투명값을 설정하게 될경우 검정색 부분은 0이므로 완전 투명, 하얀색 부분은 1이므로 완전 불투명으로 표현될것이다.

나는 이것이 쉐이더 그래프에서 중요한 부분중 하나라 생각한다.

참고로 RBGA는 Vector4고, Base Color는 벡터3로 이 둘은 다른 클래스지만 알아서 캐스트되므로 걱정하지 말자. (캐스트 될때 연결 선의 색깔이 블렌딩 되는게 예쁘당)

단색 네모 스프라이트 위에 아까 만든 쉐이더 그래프의 매터리얼을 가진 육각타일 스프라이트를 올렸을때

분명 이미지에는 외각선이 검은색으로 되어있으나 제대로 투명처리가 된것을 확인할수 있드아.

시발! 아직 쓸게 많은데 이것만 쓰는데 벌써 한시간 정도 지난것 같다.

다음 글에서는 쉐이더 그래프를 이용해 위짤의 배리어를 만드는 방법을 설명할 것이다.

어떻게 만드는지 미리 알고 싶은 사람은 가공의 대략적인 과정을 맨 위에 쉐이더 그래프 설명할때 쓴 이미지에 넣어놨으니 참고하면 될것 같다.

나같은 좆밥이 다음 글을 올릴 때까지 기다리지 말고 알아서 유튜브 보거나 구글링 해서 공부하자.

질문은 받겠지만, 나도 잘 모른다. 그냥 구글링해라.

[익명(222.106)]

이런 고퀄글은 갤에만 쓰지말고 개인 블로그에도 써라 뭐 이미 그러고 있겠지만

[02020202(jyoug2)]

[익명(118.241)]

개고수

[중2병걸린중학생(nekoo)]

[kimgilsu(j8230091)]

사랑해요 - dc App

[무능한나나(hmg6435573)]