엘피오 개임게발 블로그

구글링해본 결과 

아웃라인그리는 방법은 네가지정도 찾았다.

1. 같은메쉬를 한번더 그려서 노말 뒤집은후 조금 부풀린다음 겹치기 (보편적)

제일 쉽고 자료가 많지만 메쉬를 한번 더 그리는것과 같은 연산이 들어감.

근데 내가 사용하는방법은 포스트 프로세싱을 사용한 씬 전체에 입히는 후처리방식이고.

이걸쓰면 아웃라인 그릴캐릭터의 매트리얼 인스턴스를 일일이 또 설정해주는 노가다를 해야되서 탈락.

(유니티처럼 매트리얼마다 쉐이더코드 공유하는방법 없나요 ㅠㅠ)

2.월드노말맵을 가져와서 좌표값 1씩 오프셋 준다음 외곽선그리기 (Vroid)

월드노말맵을 사용한다는말은 캐릭터가 움직일때 노말맵을 계속해서 재연산해줘야해서 

이것도 나름대로 무거워보임.

3. 씬뎁스로 외곽선 그리기. (언리얼피셜)

구현방식은 2번과 비슷하지만 월드노말맵보다 카메라와 오브젝트간의 거리를 사용하는

흑백으로 출력되는 순수 뎁스값만 사용방법도 괜찮은 방법이지만.

씬뎁스인만큼 카메라에서 거리가 멀어지면 외곽선이 지워지는 문제가 있어서 고민해봅시다.

4.윤곽선을 검출하는 sobel알고리즘 사용하기. (지금은 다 까먹은 학식때 배운 영상처리 알고리즘)

이게 제일 윤곽선이 깔끔하게 나오지만 제일 무거워보임.

특수한 상황 연출할때빼곤 픽셀연산에 for문을 사용하는건

다른 방식중에 그나마 가벼울때쓰는 매우 특수한경우인데.

뇌피셜로 머리굴려봤을때 이건 추가로 stencil 뎁스값도 써야해서 탈락.

5.하프램버트 * 그림자색깔.

길티기어에서 쓴 방법인데 이것도 간단해서 좋아보입니다.

언리얼 포스트프로세스에서 월드전체에 적용하는거랑 방식이 좀 달라서 어떻게 해야할지 고민중..

참고자료.

유니티 Vroid 툰쉐이딩 코드(코드저작권때문에 미첨부)

이전 포스트 유튜브

https://replay.unrealsummit.co.kr/data/usmp2016/pre002.pdf

https://www.parallelcube.com/2017/12/02/hlsl-introduction/

https://blog.felixkate.net/2017/01/19/toon-shading/

https://m.blog.naver.com/PostView.nhn?blogId=mnpshino&logNo=221541025516&proxyReferer=http%3A%2F%2Fm.facebook.com%2F

마둠파님의 블로그!

저도 붕괴처럼 해보고싶은데.. 맵 여러개 그려서 표현할만한 내공은 못됩니다 ㅠ

다 만들어보고 프로파일러 돌려보는게 제일 정석이겠지만 시간이 부족하니 뇌피셜 판단으로 끝.

언제 한번 그득하게 언리얼엔진이 어떻게 렌더링하는지 코드분석해보고 싶다.

그전에 다렉을 먼저 봐야한다는 벽부터 부숴야하는데

다른것도 하고싶은게 많고 시간이라는게 너무 유한해서 스텟찍기가 너무 힘들다.

혼자 고민하면서 아이디어를 짜내는거는 정말 제자리 걸음하는 일이다.

차라리 생각하는걸 멈추고 다른 일을 하는게 낫다.

에셋스토어에는 정말 다양한 아이디어의 플러그인과 모델링, 애니메이션들이 있다.

그걸보면 어? 이거 넣으면 재밌겠는데? 싶은 에셋들이 정말 많다.

도서관이나 서점도 그런이유로 종종 들르면 좋다.

https://rogerdudler.github.io/git-guide/index.ko.html

git 명령어는 리눅스나 윈도우 명령어를 다 알아먹는다 그래서 학식때 배운걸 복습하는 형식으로 정리

사실 그냥 터미널에 git만 쳐도 그냥 영어로 다 나오는데 그냥 쓰는거. 

cat (현재 디렉터리 조회) ls (파일찾기) grep(특정 문자열) .gitconfig 

내가 설정한 정보가 들어있는 gitconfig 파일을 찾아들어가서 내용물을 조회함. 

이미지를보면 내가 설정한 닉네임, 이메일 .

lfs(Large File Storage) 설정을 볼수있음.

lfs는 나중에 알아보고 지금은 그냥 쓰는법만 정리.

git은 협업+버전관리용으로 만든거라 여러사람이 한프로젝트를 만지므로

누가 코드를 어떻게 변경했는지 diff로 다나온다.

그래서 내 닉네임과 이메일을 등록해야하는데

 git config --glober user.name 닉네임

 git config --glober user.email 이메일 

이렇게 설정한다. 

월드노말베이스 아웃라인을 만들려고했는데 

오늘 안좋은일이 있어서 공부가 손에안잡혔습니다 그래서 그냥 알고있는거를 복습+노가다했습니다.

브라우저창에서 임포트한 vroid의 스켈레탈 메쉬창을 열고.

다음과같이 본이름과 본이 표시되도록 설정합니다.

두 메쉬의 본을 서로 일치시켜줘야합니다. 

vroid는 T포즈지만 언리얼 마네킹은 A포즈네요.

upperArm을 z축으로 45도 내려서 A포즈를 만들어줍니다.

그리고 포즈변경  -> 현재포즈 사용을 누릅니다.

리타깃 매니저로가서 

다음과같이 

인간형 릭으로 설정 -> 각 본마다 맞는뼈에 매칭시켜줘야합니다 (상당히 노가다)

또한 고급표시로 들어가서 손가락, 트위스트본도 똑같이 매핑시켜준후 

제발 꼭 저장을 해줍니다. 나중에 그러면 다른 vroid를 가져와서도 저 매핑파일만 로드해주면 됩니다.

댓글 남겨주시면 매핑파일 보내드리겠습니다.

자 그리고 마네킹의 애니메이션을 가지고 오고싶으니 리타게팅창을 엽니다.

자 그리고 이렇게 하면.

마네킹의 애니메이션이 제대로 실행되지 않을겁니다.

동그라미친것과 같이 본이 전부 뒤틀려있을거에요.

원인은 두가지입니다.

1.본 매칭이 정확하게 안되어있다.

2.애니메이션을 받는 본이아닌 것까지 다 애니메이션이 들어가버렸다.

루트부터 시작해서 여러개의 뼈들이 자식으로 나뉘어져있는것을 볼수있는데.

애니메이션은 캐릭터의 뼈가 기준이고 그것을 움직이므로서 실행됩니다.

애니메이션이 필요없는 본들이 애니메이션 때문에 위치가 이리저리 바뀌는것이죠.

예를들면 손의 좌표가 애니메이션에 의해 바뀌는데 손만 적용되야할것이 손가락까지 다 들어가버리는겁니다.

그러니 뒤틀리는 본들을 다 저렇게 스켈레톤으로 설정해서 부모본의 좌표를 그대로 따라가도록  해줘야합니다.

손가락뼈도 다 포함해서요.

잘 된거같긴한데 주먹쥐어야하는데도 엄지손가락이 계속 따봉을 하고있네요 ㅠㅠ

자세히 보니까 vroid의 본과 마네킹의 엄지손가락 본의 개수가 다릅니다 ㅠㅠ 

이부분은 맥스로 뜯어다가 손부분만 따로 애니메이션 블렌드 넣어줘서 해결해야겠습니다 

손꾸락 주먹쥐는건 실패했지만 대략적인 애니메이션은 잘 따라오네요 

지금까지 구현한 라이팅은 순수하게 빛을 받는것만 계산하기때문에

포인트라이트에 색을 입혀줘도 먹질 않습니다

때문에 저는 색깔을 입혀주고 싶었어요 

주석달았으니 글로 쓰는 것보다  이해하기 쉬울거라 생각합니다.

이해안되면 핀만 따로 빼다가 연결해서 하나하나 과정 보시면 됩니다.

RGB 모두 잘 영향을 받는것을 확인할 수있습니다.

이정도면 충분히 가볍고 원하는 때깔은 나오는것 같습니다 

https://www.youtube.com/watch?v=5u-pyWSpoxw&t=30s

이것을 참고해서 만들었습니다만 

뜯어보니 안에있는 노드 구성이 엄청 복잡하고 필요없는 기능까지 많이들어있어서 무겁습니다.

필요한 기능만 추려서 만들었어요.

다행히 노드정리 정말 잘되있어서 분석하는데

오래걸리지 않았습니다 

저같은 이것저것하는거 좋아하는 제너럴리스트는 반반속성이라서 

이런싸움이 안나게 조절가능하는게 없는장점중에 하나인듯합니다ㅜ

(포토샵키기 귀찮아서 그림판으로) 

어디 이런 잡부 데려갈 회사 없습니까 ㅠㅠ 

제가 덕질하고있는 프린세스커넥트라는 게임의 모션캡쳐

애니메이션(?) 입니다

이것처럼 만들려면 어떻게 해야할까 엄청 고민했습니다.

아무래도 만화같은것들은 머리카락에 가려지는 눈썹을 왠만하면 

표시해주는게 더 이쁘거든요.

처음에 그냥 뎁스값주고 겹쳐졌을때 lerp로 알파값 적당히 

조절해줘서 섞으면 되겠지 하고 시도했는데 

캐릭터 메쉬두개띄우고 겹친다음에

머리메쉬랑 얼굴메쉬를 서로 없애는것부터 시작해서

 온갖 삽질을 다해보다가 어찌어찌 비슷하게 만들기는했으나 

캐릭터를 보이는데에만 집중한 콘텐츠 에만 쓸 수 있다는 

사용처가 제한되어있는 것이 단점이었습니다.

Z버퍼 뎁스값을 조절해서 통과해보이게 하고싶었으나 

쉬운일이 아니더라구요.

보통 눈썹은 얼굴메쉬랑  한꺼번에 붙어있도록 모델링되어있고 

얼굴 자체에다가 뎁스값을 넣어버리면 얼굴이 머리카락을

먹어버리는 문제도 있었습니다. 

구현은 그냥 저 눈썹 머티리얼만 따로뺴서 뎁스계산을 안한다고 설정해줘서 했습니다 ㅠㅠ 

이거는 그냥 구라치는거라 생각하므로 자랑만 하겠습니다 

유니티였으면 이런 꼼수 안쓰고 될거같다는 생각이 들었습니다. (하일 유니티드라)

전 포스팅에서 이야기했던대로 

얼굴 정상으로 돌려주고 시작합니다.

보시다싶이 우리가 현실적으로 받는빛은 만화에서 나오는 명암처럼 멋지게 안나옵니다.

더 과장되고 왜곡되야해요.

(우선 저 옷의 그림자는 dot으로 구현한것이니 안쓸거니까 지워줍시다.)

앞에 포인트 라이트 하나를 얼짱각도에 맞춰서 놔줍니다.

영상하는 친구가 뭐든간에 조명 세개는 써야 이쁘다고 말해줬던것이 생각나네요

대부분 실무에서도 포인트라이트가 아니더라도 저렴한 라이트를 이런식으로 놔줘서 보이게 할겁니다.(뇌피셜)

이것만으로는 뭔가 저는 부족합니다.

Vroid에서 어떤식으로 쉐이더 코드를 짜줬는지 궁금해서 베껴보기로 했습니다.

림라이트 + 저 머리부분은 빛의 영향을 안받도록 이미션맵 해줬네요.

요부분을 뜯어봐여.

rimLighting를 써줬네요 저거 설명 하려면 또 엄청 글 길어지니까 

림라이팅에 대해서는 한글로 구글에 쳐보면 좋은자료 많습니다. 

이미션은 특별한게 없네요 그냥 노드 짰던거 그대로 두면 됩니다.

보니까 lerp하면서 계속 col에다 합쳐주는 형식으로 결과물을 내더라구요. 

저거 기준으로 함 만들어봅니다.

다음과 같이 노드를 짜줍니다.

림라이트는 프레넬(Fresnel) 공식을 써서 만듭니다. 

위에 코드보시면 rimUV라 쓰고 dot연산쓰고 있는거 보이는데..

제가 알고있는 것보다 뭔가 더 복잡하게 림라이트를 구현해놨더라구요.

저거 분석하기 귀찮으니 그냥 잘 알려져있는걸 씁시다.

근데 언리얼에서 fresnel을 만들어놨어요! 우와! 킹리얼!

저 모델에는 앞머리는 add 뒷머리는 lerp로 한겁니다.

add는 그냥 더하는것에비해 lerp는 두개를 입력받아서 사잇값을 출력하는 것이므로 어둡게 나옵니다.

add가 더 싸고 이쁘게 나오니까 add 쓰는걸로 결정

머리카락과 얼굴에 림라이트를 적용한 모습입니다.

유니티에서 그려지는거하곤 좀 많이 다른모습이지만 

저는 제가 만든게 더 맘에듭니다 힣ㅎ

문득 생각난건데 .

눈동자는 빛을 흡수하는게 맞기때문에 다음과같이 노드를 짜서 수정해줍시다.

추가로 앞머리 림라이팅이 너무 하얗고 넓어서 떡진머리같으니까 노란색으로 해줍니다.

다음포스팅은 저기다가 아웃라인 (외곽선)을 넣어보고 눈썹을 가리는 머리카락을

반투명으로해서 눈썹이 보이도록 해볼까합니다.

아웃라인은 같은 메쉬를 두번 그리는 거라 무거워져서 어짜피 안쓸거지만 그냥 공부하는거 정리하는겸 해볼거에요.

1. 언리얼 에디터상에서 좌측 탭에서 포스트 프로세스 볼륨을 가져옵니다.

2. 디테일에서 unbound를 체크해줍니다. (볼륨안에서만 되는것이 아닌 글로벌로 설정하는것입니다.)

3.임의의 머테리얼을 만들어서 오른쪽클릭 -> sceneTexture 를 생성하고.

디테일을 다음과같이 설정해줍니다.

씬텍스쳐가 뭔지 간단하게 설명하자면

현재 화면에 렌더링되고있는 장면 자체를 텍스쳐로 취급하는겁니다.

예를들어 씬텍스쳐: 디퓨즈맵이 뭐냐면 

이렇게 빛의 영향을 받는물체의 순수 텍스쳐를 반환합니다.

얼굴은 언릿이니까 까맣게 나오는게 당연하구요.

이런겁니다.

마스크가 뭐냐면.

텍스쳐의 RGB의 한채널의 색상만 출력하겠다는 겁니다. 

저는 처음볼때 이런생각했습니다 R이면 빨간색은 출력해야되는거 아니야? 했는데.

사실 그런의미가아니라

R채널(빨간색)의 채도만큼 흑(0)~백(1)으로 출력하겠다는 겁니다.

그러니 어떤색을 마스킹하던 흑백으로나오는것은 똑같습니다.

위 이미지는 포스트프로세스 볼륨에 렌더링되고있는 그냥 원래 렌더링텍스쳐와 디퓨즈를 나눈 결과입니다.

순수 텍스쳐를 제외하고 그림자만이 저렇게 남게됩니다.

그리고 이제 ramp텍스쳐가 필요하니 만들어 봅시다.

  포토샵에서 다음과같은 사이즈로 만듭니다.

이렇게 색상이 나누어진 빼뺴로를 만들어서 언리얼에 드래그해서 임포트합니다.

그리고 다음과같이 타일링 설정을 합니다.

wrap., clamp , mirror 세개가있는데.

저거 뜻이 뭐냐면 저 이미지를 바탕화면으로 설정했을때.

이렇게 이미지에 비해 공간이 클시 x축은 어떻게 Y축은 어떻게 하겠냐는겁니다.

wrap은 위처럼 그냥 반복해서 타일링해서 채우겠다는 것이고

clamp는 부족한만큼 모짜렐라 치즈마냥 쭈우욱 늘려서 채우겠다는것이며

mirror은 좌우대칭으로 타일링해서 채우겠다는겁니다.

그리고 SRGB의 체크를꺼줍니다.

 이제 이 램프텍스쳐를 사용합니다.

다음과같이 노드를 짭니다.

포스트프로세싱0은 0번 볼륨의 렌더링텍스쳐를 가져오고 거기서 디퓨즈컬러를 나누면 

렌더링되고있는 씬의 순수 그림자만 남습니다.

마스크를 씌운이유는 RGB 3벡터변수말고 하나의 스칼라값을 사용해야하며

클램프를 사용하는 이유는 uv는 기본적으로 0~1까지의 좌표를 사용하기때문입니다.

입력받은 uv좌표를 기준으로 텍스쳐좌표의 색깔을 그리는데 사용합니다. 

사실 저는 처음에 uv좌표에 대해 이해하는게 쉽지가 않았어요 TexCoord에 대해서 알아보고 옵시다.

https://cafe.naver.com/unrealenginekr/26327

오셀롯님이 작성해주신 글입니다

그러면 다음과같이 그려지게되는데.

회색부분이 그림자가 드리우는 부분이라고 볼수 있습니다.

이대로는 사용하기 어렵죠.

그러니까 여기다가 디퓨즈맵을 한번 곱해줍니다.

이제 뭔가 만화그림자같이 만들어졌죠?

저 까만 얼굴 계속보니까 무섭네요.  다음포스팅에서 원래대로 돌리겠습니다ㅎ 

다음에는 그림자 들어오는걸 예쁘게 조금더 다듬어주고 빛의방향을 내가 보는 방향으로 바꿔주는 내용에

대해 포스팅 하겠습니다. 

GDC에서 발표한 길티기어 툰쉐이딩그냥 한번 봐봐여

https://www.youtube.com/watch?time_continue=1717&v=yhGjCzxJV3E