간만에 써보는 군요.
오늘은 마지막회로 텍스쳐 블랜딩입니다.
흔히 지형을 그리고 풀인지 맨땅인지 붓으로 그릴 때 사용하는 쉐이더 입니다. =)
사용자 삽입 이미지

이런거 데슈~
(인기가 지지리도 없었기 땜시... 그리고 공부의 한계를 느끼게 되어서... 등등등의 이유입니다.)
먼저 Open Source Bumpmap을 만들어 주는 툴을 구해봅시다.
저는 Crazy Bump보다는 njob이 사용하기 쉽고 괜찮더군요.
다운로드후 설치하세요!.
이제 구글에서 Ground Texture라는 검색어로 바닥면 2개를 찾아 다운로드 합니다.
사용자 삽입 이미지
사용자 삽입 이미지

마지막으로 Asset Store에서 "Simple Vertex Painter"를 찾아 다운로드/Import합니다.
이제 SSE를 열어서 다음과 같이 노다가 합니다. ㅜㅡ
사용자 삽입 이미지

Node가 복잡하긴 하지만, 곱하기에 곱하기, 곱하기 들어가서 그렇지 큰 어려움은 없을 것입니다.
간단히 말해서 _BendMark의 범위만큼 지워주거나 생성해주는 로직입니다. =)
Setting 부분은 다음과 같이... =)
사용자 삽입 이미지

저장하고 Export합니다.
귀찮으신 분들은 첨부로 그려진 Node파일을 받으세염 =)
* 저는 가끔 이렇게 친절하기도 합니다. =)
사용자 삽입 이미지

이제 유니티 4.2부터 들어간 Quad Plane을 하나 만듭니다. 폴리곤 2개짜리의 아주 작은 용량의 Plane입니다.
사용자 삽입 이미지

사용자 삽입 이미지

Texture를 Drag해서 집어 넣습니다.
사용자 삽입 이미지

쉐이더를 방금 Export한 Vertex Blend로 합니다.
사용자 삽입 이미지

Texture가 사라졌지만, 걱정마세요 =)
이제 njob을 실행해, 2개의 Texture로 Bump를 만들차례입니다.
일반 텍스쳐를 Height맵으로 만든뒤에...
사용자 삽입 이미지

Height맵을 Bump로 만들면 끄읏!
사용자 삽입 이미지

사용자 삽입 이미지

이렇게 만들고 Mask로 사용할 이미지도 한장 저장해두세요. (Height 맵입니다.)
사용자 삽입 이미지

텍스쳐를 각각의 항목에 맞게 넣어 주세요.
사용자 삽입 이미지

이제 Windows에서 Vertex Painer를 열어 다음과 같이 테스트해봅시다.
사용자 삽입 이미지

컬러를 White로 바꾸면, 다시 채울 수 있습니다.
사용자 삽입 이미지

유니티 쉐이더 왠만하면 사서하세요! =)
만든다는 부분보다는 개념을 알려 드리는 차원에서 진행했습니다. =)
쉐이더 파일 다운로드 :
2013/08/19 16:15 2013/08/19 16:15
머리도 식힐 겸, 생각도 정리할 겸. 간만에 4편을 올리는 군염 =)
저희팀 디자이너인 도순씨가 강좌에 쓰라고 만들어준 재료가지고 요리를 하겠습니다.
(오늘은 도순씨 찬양 =))
압축파일을 푸시면 저희 게임에 사용하는 F-16전투기가 보일겁니다.
지난번 강좌에서는 Bump먹이고 High Light까지 줬었는데... 오늘은 Emission을 추가하고 때깔을 좀 뽑아 볼까 합니다.
* 첨부된 압축파일을 푸시고 Drag&Drop하면 임포트 완료.
사용자 삽입 이미지

우클릭하여 Sampler2D 클릭하고 이름은 "_MainTxt"로 합니다.
사용자 삽입 이미지

그리고 Function에서  Txt2D선택
사용자 삽입 이미지

이제 연결.
사용자 삽입 이미지

Diffuse Texture를 만든겁니다. Preview를 업데이트하면...
시커멓게 나오죠. 네네...
사용자 삽입 이미지

텍스쳐를 설정해줍니다.
사용자 삽입 이미지
텍스쳐를 설정하고서야 제대로 나오는 군욤 =)
사용자 삽입 이미지

이제 울툴불퉁한 Bump한번 먹여 봅시다.
다시 에디터로 돌아가서...
Texture중 시퍼렁넘을 잡고 Inspector에서 설정을 Normal Map으로 변경해줍니다.
사용자 삽입 이미지

다시 Shader Editor로 돌아와서 위에서 한것처럼 Sampler2D를 추가하고 이름을 "_Normal"로 설정한뒤에 이번에는 Tet2DNormal을 추가합니다.
사용자 삽입 이미지

다시 이어줍시다.
사용자 삽입 이미지
당연히 Normal Texture를 넣어줘야 겠지요?
사용자 삽입 이미지
변화는 아직 보이지 않네요.
사용자 삽입 이미지

이 시점에서 때깔을 올려 줄 HighLight 설정이 들어갑니다.
Range와 Color를 하나씩 추가해주고, 각각 "_GlossPower", "_HighLightColor"로 정의합니다.
사용자 삽입 이미지


아래는 연결해 놓은 모습니다.
사용자 삽입 이미지

이제 Input 값으로 조금 가지고 놀아 볼까요?
사용자 삽입 이미지

작을때는 빛의 반사가 큽니다.
사용자 삽입 이미지

클때는 빛의 반사가 작습니다.
사용자 삽입 이미지

하지만, 아직도 조금 부족해 보입니다.
Emission이 빠지다 보니... 엔진 부위같이 자체 발광되는 면적이 없습니다.
F-16전투기의 야간 비행사진을 보면... 대충 캐노피, 공기흡입구, 엔진 노즐부분이 발광된다는 사실을 알 수 있습니다.
사용자 삽입 이미지

이제 마지막으로 Emission을 만들어 보죠.
이건 쉽게 만드실수 있겠죠? 일단 이렇게 만든 다음에...
사용자 삽입 이미지
연결을 하고...
사용자 삽입 이미지

텍스쳐를 설정하면...
사용자 삽입 이미지

Emission Power로 값을 변경할 수 있습니다.
값이 크면 밝다.
사용자 삽입 이미지

작으면 어둡다.
사용자 삽입 이미지

그런데 조금 부족합니다.
색이 허옇다보니... ㅋㅋㅋ
Multiply를 하나 추가하고 Color를 추가해서 색을 바꿀 수 있도록 해보죠.
EmissionPower를 잠시 다른곳으로 보내고 Color를 하나 추가해서 "_EmissionColor"라고 정의한후 대체해둡니다.
사용자 삽입 이미지

Multiply를 하나 만들어서 다음과 같이 연결합니다.
사용자 삽입 이미지

이제 테스트.
사용자 삽입 이미지

사용자 삽입 이미지

마지막으로 RimLight입니다. (이건 자세한 설명을 생략한다... 숙제!)
사용자 삽입 이미지

마지막으로 RimLight의 결과물입니다.
사용자 삽입 이미지

초보가 초보라서 다는 모르겠지만... 대충 이까지 포프님의 강좌를 따라온 것 같네요.
다음은 포프님의 UV강좌를 따라가 보겠습니다. =)
고생하셨어요.

2013/04/20 02:17 2013/04/20 02:17
오늘은 포프님의 2번째 예제인 transparent를 구현해볼겁니다. (http://www.gamedevforever.com/59)
사용할 텍스쳐는...
사용자 삽입 이미지
대충 지운 아담과 이브의 팬티입입니다. =)
물론 취향에 따라... ㅡㅡ;;



어제와 같이 Sampled2D를 하나 생성합니다.
사용자 삽입 이미지
NodeName을 설정하구요...

사용자 삽입 이미지
Inputs탭에서 Unity에 Import한 텍스쳐를 설정합니다.

사용자 삽입 이미지
이제 연결하면...

사용자 삽입 이미지
아래의 그림과 같이 보일겁니다.

사용자 삽입 이미지
Master를 가만히 보니 Alpha가 보이는 군욤!

이녀석을 A에 연결하면 뭔가 될 것도 같습니다!!!
사용자 삽입 이미지
그리고 Preview를 업댓하면...

사용자 삽입 이미지
바뀌는게 없습니다! 정말입니다.

뭔가 빠진게 분명합니다. Alpha가 먹지 않는다니... 비밀은 바로 Setting에서의 설정입니다.


Default Setting에서는 다음과 같습니다.
사용자 삽입 이미지

다음과 같은 부분을 수정해주세욤.
사용자 삽입 이미지
이제 Preview를 눌러보면...
사용자 삽입 이미지
깔끔한 투명캄사!!

하지만, 포프님의 예제와는 조금 다릅니다.
포프님의 투명 예제는 전체가 반투명인데 비해서 이녀석은 그냥 투명이거든요...


검은색선인 Node위에 마우스를 올려놓고 "우클릭!"하시면 Node가 삭제됩니다. A와 연결된 Node를 삭제하고...
사용자 삽입 이미지
(이거 몰라서 처음에 엄청 혜맸다능... 마우스 우클릭하면 노드 삭제됩니당..)

다시 빈곳을 우클릭해서 Multiply 를 하나 만듭니다.
사용자 삽입 이미지
Operation 밑에 있는 녀석이니까... 아무래도 뭔가를 연산하는 녀석이겠죠? (진실은.. 그냥 곱하기 연산자입니다. ㅡㅡ;;)

뭐 암튼 일케 만든뒤에....
사용자 삽입 이미지
Preview를 보면...
사용자 삽입 이미지
뭔가 된것 같기도 하고 아닌것 같기도하고... 뭐 어쨌든 우리가 원하는 대로 되어가는 것 같습니다.
Multiply에도 Arg1, Arg2가 필요한데 하나가 없는것도 찜찜하고 Arg2에 들어갈 녀석을 다음과 같이 만듭니다.
사용자 삽입 이미지
오른쪽 Node탭에서 "_Alpha"라고 이름을 정해준뒤 Add를 클릭
사용자 삽입 이미지
다음과 같이 연결합니다.
사용자 삽입 이미지
Inputs 탭을 보면 다음과 같이 변해 있죠.
사용자 삽입 이미지
Preview클릭!
사용자 삽입 이미지
Inputs탭에 있는 _Alpha값을 슬라이더로 조정해보면,
사용자 삽입 이미지
사용자 삽입 이미지
텍스쳐 자체의 투명도가 조정되는게 보일겁니다.
이것으로 포프님의 예제와 동일하게 결과를 얻었습니다!

다시한번 포프님 만쉐! ㅜㅡ
2013/03/30 10:19 2013/03/30 10:19
원래 강좌는 "Shader FX"강좌입니다.
(출처 : http://www.gamedevforever.com/15)


저는 쉐이더 쪽은 왕 문외한이기 땜시 위의 예제를 따라서 한 강좌씩 따라가보려합니다. =)

Unity3D에서는 Free로 풀린 Strumpy Shader Editor가 있습니다.

Windows에서 Asset Store로 가셔서 Import!
사용자 삽입 이미지


메뉴에서 Shader Editor를 클릭하여 보면...
사용자 삽입 이미지


복잡한 선들이 가득합니다.
사용자 삽입 이미지


우리가 따라할 강좌의 초반부는 "뻘갱이" 만들기 입니다. (출처 : http://www.gamedevforever.com/32)
에디터 하단에 있는 File > New Graph를 클릭! 하여 깨끗이 정리합니다.
사용자 삽입 이미지
다 됐다면 빈곳에 마우스 우클릭하면 영어들이... ㅡㅡ;;
여기서 속성을 뜻하는 Properties를 클릭하고 Color를 클릭!
사용자 삽입 이미지

그럼 벌써부터 시뻘건 넘이 뜨면서 Not Configured라고 뜹니다.
사용자 삽입 이미지

그러나, 걱정마십시오! 오른쪽에 이름만 넣어 주면 되니까요... ㅡㅡ;;
Node 탭에서 "SimpleRed"라고 입력하고 Add를 눌러주면...
사용자 삽입 이미지
짜잔!
사용자 삽입 이미지
아무일 없다는 듯이 바뀝니다.
이제 우리가 할 일은 Node를 이어 주는 겁니다.

Master의 Diffuse 오른쪽에 있는 작은 사각형을 클릭하고 Color의 RGBA라고 되어 있는 왼쪽의 작은 사각형으로 연결합니다.
사용자 삽입 이미지
사용자 삽입 이미지
아직도 오른쪽 탭의 "Setting"에는 붉은 글씨가 있을 텐데... "Setting을 클릭하고 Shader Name을 입력하면 끝!
(저는 Test로 입력했습니다.)
사용자 삽입 이미지
에디터 하단의 Preview를 클릭해서 Preview의 공이 어떻게 바뀌나 봅시다.
사용자 삽입 이미지
이제 Inputs에서 Color를 아래와 같이 변경하면...
사용자 삽입 이미지
짜잔!
사용자 삽입 이미지
실제 모델에 적용하기 위해서, File에 Export 어쩌구를 클릭하면 .shader 파일로 출력할 수 있습니다.
사용자 삽입 이미지
test.shader로 저장!
사용자 삽입 이미지


Project 탭에서 Material을 하나 생성하고 방금만든 Test쉐이더를 설정합니다.
사용자 삽입 이미지
사용자 삽입 이미지
이제 큐브에 적용해보면...
사용자 삽입 이미지
알흠다운 뻘갱이 큐브가 보이는 군염!

다음 강좌 역시 원작자이신 "포프"님의 예제로 진행해보겠슴돠 =)

포프님 만쉐!
2013/03/29 21:19 2013/03/29 21:19