[📜일지] 너님도 할수있는 카툰셰이더 만들기(장문주의,스압)

[NeetKin..(tab9999)]

본인도 공부중인 뉴비임으로 틀린 부분이나 구조가 이상한 부분이 있을수 있음??

그냥 섭셰더 쓰다가 새로 셰이더그래프를 공부하게 되면서 그냥 공부만 하면 심심할거같아서 종종 쓰려고함.

참고하면 좋은 링크

수치는 텍스쳐 재외하고 다 하드코딩으로 때려박았음으로 적절하게 인스팩터로 빼시면될듯

언릿 셰이더임으로 똑같이 만들려면 언릿으로 생성할것.

이름없는 자캐님 출연 협조 감사합니다.

이 셰이더는 모바일용 카툰렌더링 셰이더임.

장점은 가벼움, 적당한 퀄리티 라고 개인적으로 생각중.

단점으로는 실시간 그림자를 그려주지 않음.

실시간 그림자를 받고싶으면 따로 짜줘야함.

그부분은 나중에 글 올리겠음.

해당 셰이더 구조를 보면 7부분으로 나눌수 있음.

라이트, 라이팅연산, 하위표면산란(SSS), 스팩큘러, 림라이트, 텍스쳐.

그리고 마지막으로 계산한 값을 블렌드 해주는 부분까지 총7개임

라이트는 기본적으로 램버트 연산을 함.

디럭셔널 라이트 백터를(1) 해당 오브젝트의 표면 노멀 백터랑(2) 내적연산(3) 을 짝짝꿍해서 만드는 가장 기본적인 라이팅 기법인데

자세하게 알고싶으면 인터넷 검색 ㄱㄱ

라이트 백터(1) 는 기본적으로 노드가 없음으로 커스텀노드로 때려박아줘야 함.

아웃풋을 백터3로 만든다음에 이름을 Result 로 수정하고 아래 코드를 복붙

#if SHADERGRAPH_PREVIEW //프리뷰 화면일때

Result = half3(0.5, 0.5, 0); //라이트 백터는 X = 0.5, Y=0.5, Z=0 이다.

#else //프리뷰 화면이 아니면

Light light = GetMainLight(); //Light(정의된 함수로 라이트 데이터를 받아옴.)에 light변수를 선언, 메인 라이트 정보를 받아옴.

Result = light.direction; //Result 는 위 선언한 light변수의 디렉션 값을 받아옴.

#endif // 아 ㅋㅋ 끝이라구~

만일 노드 색이 핑크색이 되었을경우 버그가 난것임으로 화이팅.

표면 노멀 백터(2) 는, 노멀백터 노드를 받아오는데 중요한것은 '스페이스'를 '월드'로 설정하는것임.

그 이유는 노드를 바로 출력해보면 알수 있는데, 회전시켜보면 월드 스페이스는 색(노멀값)이 오브젝트랑 따로놀고,

오브젝트(로컬) 스페이스는 오브젝트에 고정되어 있다는것을 알수있음.

월드스페이스 는 글로벌 좌표계 기준 XYZ좌표커서 컬러와 색이 같은것을 확인할수 있음.

니가 수고하는구나 이름없는 자작캐릭터여

반대로 오브젝트(로컬) 스페이스는 로컬 좌표계 기준임으로 주의가 필요함. 확인해보면 로컬 기준 좌표계 색이 일치함을 확인할수 있음.

두 노드가 정상적으로 준비되었으면 dot노드에 둘을 연결해주면

따란~ 당신은 기본적인 렘버트 라이팅을 구현했습니다~!

짝짝짝.

렘버트 라이팅은 사용할때가 참 많음으로 공부해두면 좋음.

다음은 카툰 렌더링의 중요한부분인 빛을 양분하는것임.

어려운듯 쉬움으로 그냥 따라해보자! 말은 쉬워요

정말 간단함. 우선 커스텀노드(1) 을 만들고, half 램버트 라이트를 만들어주자.

커스텀노드(1)은 인풋에 'a' 아웃풋에 'b' 를 각각 만들어주면 된다. (설마 짤 보는데도 백터3로 안만들겠어?)

그리고 복붙하면된다.

b = a*0.5+0.5; // 'b'는 'a' 곱하귀 0.5 둬하기 0.5 임. 설마 이것도 모름?

이게 꾀 신박한 공식인데, 기본적으로 램버트 라이트는 값이 밝은부분이 1이고 어두운부분이 -1인데,

이걸 밝은부분이 1이고 어두운부분이 0인 계산하기 완전 편한 짱짱맨 라이트로 만들어줌.

이렇게 만든걸 싸인(2) 노드에 값을 0.5 주면 반토막 난(높이가 최소, 최대값이 -0.5, 0.5 인 곡선) 싸인값이 나오는데

이걸 위에서 만든 노드(1) 와 같이 스무스 스톱(3) 에 연결 시켜주면 정확히 반갈죽이된 라이트가 만들어진것을 확인할수 있음.

스무스 스톱(3)노드는 재미있는것이,참조하고있는(IN) 값의 최소값(Edge1) 과 최대값(Edge2) 의 사이를 스무스하게 보간해주는 역할을 함.

즉 최소값(Edge1) 과 최대값(Edge2) 의 값이 같으면 그 사이의 보간이 일어날수 없음으로 반갈죽이 되어버림

다시말해 위 처럼 사인값으로 반갈죽 안해주고 그냥 같은 숫자 두개 넣어줘도 똑같이 반갈죽됨

하지만 사인곡선 쓰는게 좋아오 오호홓

여기서 잠깐! half 램버트 라이트란?

간단하게 설명하면, 하프라이프 만들때 쓴 라이팅이다 이말이야.

아 알렉스 말고 삼편 안나오냐고...

자 우리가 이렇게 어렵게 만든 카툰 라이팅에 색을 넣어줘야겠지유?

럴프노드(1) 는 엄청 자주쓰는 노드중에 하나임. 니이가 0의 값과 1의 값 사이(T)에 원하는 택스쳐나 컬러(A),(B) 를 리니어하게 섞어주고싶으면 꼭 써야되는 노드야?

이래도 안쓸꺼야?

진짜 안쓸꺼야?

아무튼 위 짤대로 적절하게 베이스가될 텍스쳐나 값을 맨 마지막 노드(T)에 넣고, 어두운값에 섞어줄 값(A) 과 밝은값에 섞어줄 값(B) 을 넣으면 끝.

내가 설명을 너무 어렵게 한거같은데 간단히 말하면 A랑 B를 T로 마스킹 하겠단거임.

간단하지? 간단한가?

무튼 위에 만든것 까지 출력해보면 아래처럼 나옴.

뭔가 많이 심심하다.

그런 당신을 위해 준비했습니다. 리이이이임 라이트으으으으으.

뭐요?

림 라이트는 디게 간단하다. 코드로 짜려면 무려 라이트를 계산한것과 같이 뷰 노멀과 월드 노멀을 짝짝꿍 해줘야 하지만,

무려 셰이더 그래프는 노드에 있다! 1따봉 드립니다.

프레넬 이팩트 노드(1) 를 생성한뒤 아까 위에서 설명한것처럼 스무스스톱 노드로 반갈죽(vector 0.5 사인 아님) 시켜주면 깔끔하게 카툰스타일의 림 라이트가 나온다.

(위 짤은 멀티플라이로 값을 곱해주는데, 컬러를 적용시키는것 외에는 아무런 일도 하지 않음으로 안해도 되오) 

2번 항목의 노드들임. 이곳이 하는일은 림라이트를 그림자가 지는 부분에 그려주지 않게 마스킹을 해주는 것임.

간단하지만 중요한노드(2) 이 처음나오는곳이기도 함.

식은 간단함. 멀티플라이로 처음에 만든 램버트 라이트를 곱해줌.

그러면 1번노드 처럼 예쁘게 잘라줄수 있음. 문제는 이렇게 자르면 최소값인 부분을 -1을 곱해줌으로 값이 음수로 바뀌어서 색반전이 일어나게됨.

이것을 처리해줄 너굴맨이 바로 2번인! 클램프 노드 임. 이 노드님께서 하시는일은 바로! 0과1 사이를 초과하는값을(min, max 값을 조절함으로 범위를 바꿀수 있다.)

버려주는 갓갓노드임.

이 노드가 없다면 너님은 과거에 그래왔듯이 if문으로 해결해야됨.

이 얼마나 무시무시한 생각이 아닐수 없겠니?

3번노드인 pow는 거듭제곱인데, 해당역할은 림 라이트의 범위 조절임. 숫자가 높을수록 작아짐.

4번노드인 멀티플라이는 림 라이트의 강도를 정해주는역할임. 클램프(2)노드를 이 뒤에 안단 이유는 림 라이트가 1을 초과한 값이 될수 있어야 하기 때문임.

포스트 프로세싱의 Bloom 효과는 기본적으로 1을 초과하는 값으로 효과를 주기때문에 블룸 효과를 먹이고싶은 사람은 텍스쳐를 1을 초과한값으로 해주면 블링블링해질거임.

아니면 HDR쓰지던지 ㅎㅎ

아래는 림라이트 결과임.

그래도 아직 심심하다.

물론, 텍스쳐가 없다는것도 한몫을 하지만, 잘만든 셰이더는 그 자채도 블링블링하니 이쁘다. 그러므로 좀더 블링블링하게 만들어보자.

다음으로 할것은 하위표면산란(SSS) 효과다.

하위표면 산란은 간한하게 말해서 니 라이트 켜서 손을 가까이 대고 보면 손이 붉으스름해지는것을 알수있는데,

총알보다 빠르신 빛 성님덜이 니 피부를 통과하면서 니 속에있는 피색을 띄개 되는거임.

암튼그럼.

대충 돌아다니는 짤을보면

이런 표현이 다 하위표면산란(SSS)라고 할수있음.

이제 알겠? 모르겠음 그냥 만드삼 ㅅㄱ

서브서피스 스캐터링으로 검색하면 좀더 알기 쉽게 정리된 것들이 많음 그거 보면 될듯.

우리가 만들것은 카툰렌더링 에서의 SSS임.

즉 카툰스타일의 일러스트같이 구현하면 된다는말인데, 대부분의 카툰스타일 일러스트에 들어가는 SSS의 경우에는 그림자 영역 밖을 침범하지 않음.

즉 편법으로 가볍게 만들수 있다 이말임.

조금 복잡해 보이지만 복잡하지 않음.

하프 램버트 라이트에 0.5~1 사이의 값을 뺀후(2) 0.5~1사이의 값을 곱해줌(3) 그리고 0.25의 값을 더해줌(4)

그후 카툰 반갈죽 라이트를 반전시킨 셰도우 부분만 그려줄 마스크를 만들어(1)

그리고 4번노드 에 1번노드를 멀티플라이 시켜주면(5)

따란~! 야매 하위 표면 산란 완성!

색은 위에서 했던것처럼 럴프 노드(7)로 색을 넣어주거나 멀티플라이어로 색을 넣어주면 끝.

설명하자면, 하프 램버트 라이트의 0값의 시작을 강제로 빼서(2) 위로 올려준 후, 더해서(4) 그대로 내려줌.

이러는 이유는 3번 노드는 사용하기 위해서인데, 5번 노드에 보이는 그라데이션 값의 중간값을 보간해주기 위해서 넣은것임.

심플하게 하고싶으면 3번노드를 빼도 상관없음.

5번노드는 마스크(1)로 하위표면 산란에 불필요한 그림자 밖의 값을 마스크처리해준 후, 멀티플라이로 최종강도를 조절해줌.

6번 노드는 정말정말정말 중요한 클램프노드로 설명했으니 자세한 설명은 생략한다.

7번노드는 위에서 그랬듯이 색을 적용시켜줌.

참 쉽죠?

대충 결과는

음 생각보다 별로임 ㅋㅋㅋㅋ 하지만 그냥 간다 ㅋㅋㅋㅋ

다음은 스팩큘러임 간단하면서 만드느라 짜증낫던것.

뷰 디렉션을 가져올때 따로 노멀라이즈 해줘야한다니... 왜 안되나 한참을 찾았네...

진짜 설명은 쉽다. 뷰 디렉션(월드스페이스)을 노멀라이즈(1)해준다음에 맨 처음에 작성한 라이팅 디렉션을 가져와서 둘이 더해준 후 노멀라이즈(2)

그후 노멀 백터(월드 스페이스) 를 하나 받아와서 2번노드와 내적을 계산해준후(3) 초과되는 음수값을 버려주고(4), 강도를 조절(5)

그리고 이것도 반갈죽 시켜준다.(6)

7번 설명은 생략한다.

이제 위에서 만든 것들을 이제 적절하게 노드를 연결시켜주면~

이제 마지막으로 텍스쳐를 넣어주면 됨.

원하는 텍스쳐를 인스팩터에서 가져온 후(2) 샘플텍스쳐2D 노드(3)에 UV좌표(1)와 텍스쳐를 연결시켜준 후.

4번노드는 중요!

노오오란 녀석들아...

잘보면 인풋 받는 부분의 색이 노란색이고 이름 옆에 (3) 이런식으로 숫자가 써져있다.

백터 1은 파란색

백터 2는 초록색

백터 3은 노란색

백터 4는 빨간색 이다.

기억해라 그리고 절때 백터1을 재외한 다른백터 규격끼리를 연결하지 말아줘...

제발... 제바아아알....

위 4번처럼 따로 백터3값으로 가져오면 된다.

XYZ는 RGB이니 그냥 순서대로 연결해주면 된다.

인스팩터에서 텍스쳐 받아오는법은

이렇게 +버튼 눌러서 만들어주면 머티리얼 인스팩터로 빠진다.

설마 모르는 흑우 없제?

마지막으로 라이팅 계산한것과 택스쳐를 멀티플라이로 블렌드해주면,

완성

게이덜 읽느라 고생했 ㅠㅠ

나는 쓰느라 고생했다.

앞으로 쓰면서 자주 연습해야할듯.

ㅅㄱ

[SexyM(hmg6435573)]

[익명(218.234)]

괴물

[NeetKing(tab9999)]

[익명(110.70)]

미안한뎅;;여케가 몬생긴거같다..내 고추가 반응을 안함 - dc App

[NeetKing(tab9999)]

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

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

[NeetKing(tab9999)]

[익명(58.227)]

이걸 이제봤네 잘쓰겠습니다 감사합니다