[📜일지] 페어리 테일즈 #36, 셰이더 그래프 및 노멀 맵

[태보미코(taebomico)]

의외로 이틀만에 개발일지를 작성하는 태보미코야오.

이번에 파티클 에셋을 하나 구매해보았는데 너무 이쁜 것이야오.

이쁜 이유는 화려한 아트도 있지만 역시 빛이라고 생각해오.

이전에 빌드해서 폰에서 실행해보았을 때에는

플래그십 모델이라서 성능이 좋긴 했겠지만 일단은 잘 돌아가는 것이였어오.

그래서 라이트2D 때문에 모바일에서 무거우면 어쩌지? 이런 걱정하지말고

최대한 활용해서 만들어보자는 생각이 들게 된 것이야오 !

긴 글에 앞서 결과물먼저 확인해보도록 해오.

개별 라이트

중요한 오브젝트와 그 외 오브젝트에 별도 빛 적용 ( 같은 소트 레이어)

이펙트 빛은 두 종류의 오브젝트 모두 받음

노멀맵

빛을 입체적으로 받음.

조금은 입체적인 느낌의 나무

사실 파티클 구매해서 사용해본 것 외에도 이런 생각을 하게 된 이유가 하나 더 있음.

바로 어둑어둑한 스테이지에서도 플레이어가 피해야 할 오브젝트나

NPC, 캐릭터 등은 눈에 잘 보여야하는데 똑같이 빛을 받게하면 어두운 것.

그래서 생각해본 방법이 이런 중요한 오브젝트의 글로벌 라이트와 이 외 글로벌 라이트를 나누어보자 였어오.

하지만 문제점은 라이트 2D 레이어는 스프라이트 sort 레이어와 동일하다는 것.

따라서 중요한 오브젝트, 덜 중요한 오브젝트 둘 다 오브젝트 레이어에서 보이는 순서를 정렬해주는지라

라이트 레이어를 나누어 줄 수 없는 문제가 발생함.

이를 해결하기 위한 방법을 모색해본 결과,

셰이더를 따로 작성해주는 방법이 가장 좋은 것 같다는 생각이 들음.

즉 중요한 오브젝트 용 머티리얼, 이 외 용도의 머티리얼 2 종류를 사용하고

중요한 오브젝트용 글로벌 라이트(ex. 플레이어, NPC, 피해야 할 오브젝트),

그 외 오브젝트용 글로벌 라이트(ex. 배경, 장식 오브젝트),

마지막으로 모든 오브젝트에게 적용되는 이펙트용 라이트 (ex. 레이저, 탄막 등에서 발생하는 빛)

세 종류의 라이트를 사용하기로 결정.

와 ! 이렇게 개발하는게 맞는 걸까? 배보다 배꼽이 커지는게 아닐까?

라는 생각이 들긴 하지만... 경험해보며 실력을 쌓는게 아닐까...?

셰이더 그래프

먼저 셰이더 그래프를 처음 만져보았기도 하고 머티리얼 또한 만져본 적이 없기 때문에

그동안 작성해 온 개발일지 중에 가장 빈약한 지식으로 구현하였다는 점 양해바람.

따라서 설명해주고 싶지만 힘들 것 같고 알게 된 정보만 몇가지 이야기하겠음.

중요한 오브젝트 용도의 셰이더 그래프 작성

1. 셰이더 그래프 생성

프로젝트 창에서 우클릭 후 사진의 경로를 따라가면 됨.

2021.3.11버전 기준 요런 화면이 보일 텐데

작성하고자 하는 것은 Sprite Custom Lit Shader Graph.

Lit는 빛을 받는 친구, Unlit는 빛을 받지 않는 친구.

2. 창 열기

생성하고 더블클릭 시 요런 창이 뜨는데

잘 모르겠고 우리에게 필요한 것은 Fragment쪽 친구들.

Base Color는 텍스쳐 색상 보여주는 듯 하고

Sprite Mask는 그 마스크 기능 아닐까 싶고 부분부분 투명화 같은 것 만들 때 쓰는듯.

알파는 그 부분의 투명도 따라서 보여지는? 그런 느낌이고

노멀은 그 노멀맵 할때 그것.

3. 필요한 것 생성

좌측에 +버튼을 누르고 텍스쳐 2D로 두가지 생성해주기.

노멀 맵 사용안하면 노멀맵은 안써도 되는데

호기심에 사용해보게 되었음.

MainTex는 우리가 사용하는 스프라이트가 자동으로 연결되고

NormalMap은 아래 사진의 스프라이트 에디터에서 세컨더리 텍스쳐에 자동으로 연결됨.

이름이 다를 경우 아마 레퍼런스가 달라져 연결안될테니 따로 세팅해줘야할듯.

4. 생성한 친구 세팅

노멀 맵은 모드를 노멀맵으로 해주기.

5. 생성한 친구 사용하기.

드래그 하면 꺼낼 수 있게 됨.

6. 연결

내용이 너무 길어지는 듯 해 중간 과정은 생략하고 결과물.

우클릭 하고 노드 생성해주면 되므로 딱히 어려운 것은 없음.

각 노드를 설명해주자면,

2D 라이트 텍스쳐 노드 : 라이트 2D의 빛을 받아서 적용시키기 위해 사용

아래 값으로 Effect Tex 0부터 3까지 있는데 이것은

URP 세팅할 때 renderer 2d의 라이트 블렌드 스타일 4개를 의미함.

3가지 빛을 사용할 예정이기 때문에

이펙트는 말 그대로 이펙트 빛,

메이저는 중요 오브젝트를 비출 빛,

마이너는 그 외 오브젝트를 비출 빛으로 설정.

Space Position 노드 : 화면상의 위치?를 적용하도록 하는 것 같음. 없으면 엉뚱한 곳에 빛이 받아짐.

Multiply 노드 : 곱셈, 내 텍스쳐와 빛 받은 텍스쳐 곱해서 빛이 적용되게 함.

현재 메이저 오브젝트 셰이더를 만드는 중이므로 1번 메이저 빛과 곱해줌.

Add 노드 : 이펙트로 사용되는 0번 빛과 위 곱해진 값을 더해주어 빛을 더해줌.

똑같이 곱하지 않는 이유는 이펙트 빛이 안비춰지면 0이므로 곱해줄 시 어두워짐.

노멀은 그냥 노멀로 연결해주면 되고

알파는 처음 텍스쳐의 알파값을 넣어주면 됨.

7. 머티리얼 생성

이제 셰이더 그래프를 우클릭 후 크리에이트 > 머티리얼 해주면

해당 셰이더 그래프가 적용된 머티리얼이 나오고

이것을 필요한 오브젝트에 넣어주면 됨.

추가적으로 그 외 오브젝트용 셰이더는 라이트 텍스쳐 2번을 이용하면 되므로 동일한 방식으로 하나 더 생성.

8. 결과물

각 오브젝트에 만든 머티리얼을 넣어주고 라이트를 비춰보면?

똑같이 타겟 소팅 레이어가 오브젝트이고 배경의 꽃과 플레이어가 오브젝트인 상태에서,

메이저 블렌드 스타일인 빛과 마이너 블렌드 스타일인 빛이 따로 적용되는 것을 확인 할 수 있음.

이펙트의 빛도 위에 잘 적용되는 것을 확인할 수 있고,

혹여나 이펙트가 겹쳐져서 너무 밝아보일 경우 알파블렌드로 설정해주면 더해지지 않으므로 괜찮을 듯 함.

자세히 보면 빛이 살짝 입체적으로 적용되는 것을 확인할 수 있는데,

셰이더 그래프 사용해보며 노멀맵이 궁금해서 적용해보게 되었음.

노멀 맵

노멀 맵은 저렴한 비용으로 입체적으로 보이기 위해 사용하는 것.

실제로 3D 폴리곤으로 움푹 패인 것이 아니지만,

노멀 맵을 이용해서 움푹 패인 것처럼 만들어줆.

어떻게 하느냐 설명하자면, 노멀 맵은 말 그대로 빛이 반사되는 법선 벡터의 맵? 같은 것인데

이것으로 해당 텍스쳐의 위치에서 빛이 어느정도 반사될지를 표현하는 느낌.

컴퓨터 그래픽스를 a+받았지만 솔직히 너무 어려워서 모르겠음.

적용한 사진은 다음과 같음.

나무가 약간 입체적으로 그림자 지는 느낌이 듦.

자동으로 노멀 맵을 만들어주는 툴을 이용해서

정확하지는 않지만 없는 것보다 느낌이 있지 않나? 싶어서 일단은 적용해볼 예정.

셰이더 그래프 사용해보면서 시도해본 것인데 나름 수확인듯 !

노멀 맵을 생성하는 방법으로는 여러가지가 있겠지만

2D 기준으로는 포토샵의 필터>3D>노멀 맵 생성하기를 하거나

무료 소프트웨어 중 Laigter 이용하기, 이 외 유료 소프트웨어 이용하기 등이 있음.

https://www.youtube.com/watch?v=ZJRqupAr9kY

PSB파일에 적용하는 방법은 말로 설명하기보다는

https://youtu.be/b2bIh8WPsi4?t=416

공식 영상 마지막 타임스탬프 확인하기.

이게 잘 하고 있는 건가 싶긴 하지만...

일단은 세부적으로 조정도 안하고 대충 적용해봤는데 이쁜 것이야오.

현재 남은 문제점으로는 이펙트 빛을 더해주다보니 빛 색이 너무 강하게 들어가서 별로인 느낌이 있다는 점.

이건 멀티플라이로 바꾸고 최솟값을 1로 클램프해주면 되지 않을까 개발일지 작성하며 생각이 들어서

테스트 해줄 예정.

=> 테스트 결과 괜찮긴 한데 스프라이트 색과 빛의 색에 따라 빛을 받는지 잘 티가 안나는 경우가 있어서 고민해봐야할듯.

노멀 맵을 이쁘게 만들 방법을 고민해봐야 되겠다?

폰으로 테스트 해보았을 때 잘 돌아갈까?

이제 안심하고 탄막이랑 레이저 이펙트 이쁘게 만들 수 있는 것이야오 !

입체적으로 빛에 반응하는 알라우네 !

+++ 강도를 강하게 한 짤

[익명(119.194)]

아니 갓겜에 조명빨이 더해졌다니!?!? 이건 사기야!! ㅋㅋㅋㅋㅋㅋ

[태보미(taebomi)]

[익명(220.126)]

게임이 점점 무시무시해지네 신인가?

[태보미(taebomi)]

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[태보미(taebomi)]

[익명(218.233)]

도트에서 노멀맵+라이트 사용은 효과 대비 비용이 너무 크다. 조그만 도트 스프라이트에서 눈에 보이는 차이점이 미미하거니와, 노멀맵 제작비용 또한 만만치 않고, 라이팅으로인한 성능 저하가 발생한다. 경험상.. 단순히 Additive Blending Shader + 라이트 모양 스프라이트를 사용하는게 효과적으로 보임.. 아님 말구..

[태보미(taebomi)]

말씀하신 방법도 좋은 것 같아오 ! 감사한 것이야오. 사실 저도 비용적인 문제에서 고민을 했는데 모바일에서 원신도 하고있는데 굳이 이것저것 생각해야 할까 싶은 생각도 들고, 일단은 낭만을 따라가보려고 생각중이야오 !

[익명(121.165)]

혹시 셰이더 그래프 렌더타입을 프로퍼티로 사용가능하냐 런타임에 opaque 에서 transparent로 변경하려는데 - dc App

[태보미(taebomi)]

아쉽게도 저는 뉴비인지라 잘 모르겠어오... 질문 글 올려보시면 좋을 것 같아오 !

[익명(med300)]

개추

[태보미(taebomi)]