Unity 2018.2 버전에는 메시를 조정하고 애니메이션화할 수 있는 '버텍스 포지션(Vertex Position)이 셰이더 그래프에 추가되어 있습니다. 이 블로그 게시물에서는 직접 버텍스 애니메이션 셰이더를 만드는 방법과, 바람, 물과 같이 일반적으로 자주 사용하는 셰이더를 예로 들어 보여드리겠습니다.
셰이더 그래프를 처음 사용하시는 분은 팀 쿠퍼(Tim Cooper)의 블로그 게시물 또는 유니티의 YouTube 채널에 게시된 앤디 터치(Andy Touch)의 '셰이더 그래프 소개(영문)' 세션에서 주요 기능에 대해 확인할 수 있습니다.
이 씬에는 텍스처나 애니메이션 에셋이 사용되지 않았습니다. 모두 셰이더 그래프를 사용하여 색을 입히고, 애니메이션하였습니다.
셰이더는 씬 에셋이 표현되는 모습을 상당 부분 조정할 수 있는 막강한 렌더링 파이프라인 도구입니다. 일련의 입력 작업과 조작을 통해 표면 컬러, 텍스처부터, 메시의 버텍스 포지션까지 에셋의 다양한 렌더링 프로퍼티에 변화를 주는 셰이더를 만들 수 있습니다. 또한 프로퍼티를 모두 조합하여 풍부하고 정교한 애니메이션을 만들 수 있습니다. 이 블로그 게시물에서는 버텍스 애니메이션을 시작하는 방법, 마스크 및 프로퍼티 사용의 개념을 소개하고, 마지막으로 '무인도(Desert Island)' 씬에 셰이더를 만든 방법을 설명해드리겠습니다.
GitHub에서 저장소(Repository)를 클로닝(clone)하거나 GitHub의 .Zip 파일을 다운로드하여 예제 프로젝트를 받으세요.
무인도 씬 샘플 프로젝트를 다운로드하여 셰이더를 테스트해보고 직접 체험해 보세요. 이 프로젝트에는 셰이더 그래프 작업에 필요한 모든 항목이 포함되어 있습니다. 이 프로젝트는 Unity 2018.2 버전 이상에서 실행해 주세요.
무인도 씬에 포함된 셰이더는 모두 커스터마이징을 고려하여 제작되었으므로 Inspector에서 원하는 대로 셰이더 값을 조작해볼 수 있습니다. 물론 오브젝트마다 값을 기본값으로 되돌려주는 프리셋 파일이 있습니다.
이 작업은 CC-BY(Creative Commons Attribution) 4.0 국제 라이선스에 따라 허가되었습니다.
프로젝트에서 셰이더 그래프를 사용하기 위한 요건은 다음과 같습니다.
셰이더 그래프를 설치하려면 프로젝트를 2018.2 이상으로 생성하거나 업데이트하고, 'Window' > 'Package Manager' > 'All'로 이동한 다음, 목록에서 'Shader Graph'를 찾아 'Install'을 클릭합니다.
Scene 뷰에서 머티리얼이 애니메이션되지 않는 경우 'Animated Materials'를 선택했는지 확인합니다.
Making something fancy with Shader Graph?
You can preview Animated Materials by clicking the little picture drop down at the top left of the scene view #UnityTips #Unity3D pic.twitter.com/AwxQ5jj2Sg— John O'Reilly ? (@John_O_Really) July 17, 2018
복잡한 공식을 사용하여 움직임을 부여하기 전에 움직일 것이 무엇인지부터 파악해야 합니다.
씬의 메시에는 다음과 같은 네 가지 유형의 공간이 있습니다.
효과를 적용할 Space는 Position 노드의 드롭다운에서 선택할 수 있습니다.
효과를 적용할 축은 Split 노드를 사용하여 선택할 수 있습니다.
Split 노드는 4개 채널로 출력되며, 첫 3개 채널은 Transform 축(R=X, G=Y, B=Z)에 해당합니다. 위의 예시에서는 오브젝트의 y축을 분할하여 1을 더했습니다. 그 결과 오브젝트가 축에서 1만큼 위로 이동했습니다.
경우에 따라 월드 공간에서 오브젝트를 이동해야 할 수도 있습니다. 이 경우 Position 노드에서 World를 선택한 다음, Transform 노드를 사용하여 출력을 다시 오브젝트 공간으로 전환합니다.
위에서 메시를 이동하는 방법에 대해 알아보았습니다. 이제 효과를 제한하는 방법을 살펴보도록 하겠습니다.
Lerp와 같은 노드를 사용하면 두 값을 블렌딩할 수 있습니다. T 입력은 Lerp의 제어값입니다. T 입력값이 0(검정색으로 표현됨)이면 A 채널이, T 입력값이 1(흰색으로 표현됨)이면 B 채널이 사용됩니다. 아래의 예시에서는 슬라이더로 두 입력값을 블렌딩했습니다. 아래의 모든 예시를 슬라이더 대신 사용할 수 있습니다.
흑백 텍스처에는 정교한 높낮이 정보를 가지고 있는데 이를 사용하여 평평한 격자 메시를 픽셀 단위로 밀어내어 디테일을 표현할 수 있습니다. 위의 예시를 보면 흰색 부분은 메시를 높이 방향으로 최대치까지 밀어내는 반면, 검정색 부분은 메시 포지션에 아무런 영향을 미치지 않는다는 점을 확인할 수 있습니다. 검정색 부분의 값이 0이기 때문에, 메시 포지션에 0을 추가해도 움직임이 없는 것입니다.
버텍스 포지션이 포함된 텍스처를 사용하려면 일반적인 Sample Texture 2D 노드가 아닌 Sample Texture 2D LOD 노드를 사용해야 합니다. 텍스처는 고유의 셰이프가 있거나 어느 정도의 디테일 감쇠가 있는 마스크가 필요한 경우 특히 유용합니다.
UV 마스크는 텍스처 마스크와 비슷하지만, 언랩된 UV 공간에서 효과를 적용할 메시 부분을 선택할 수 있습니다. 위의 스크린샷에서는 UV의 u축을 사용하여 왼쪽에서 오른쪽 방향으로 그레디언트를 만들었습니다. 그레디언트에 오프셋을 적용하려면 Add 노드를 사용하세요. 강도를 높이려면 Multiply 노드를, 감쇠를 늘리려면 Power 노드를 사용하면 됩니다.
각 버텍스에는 버텍스 컬러라고 하는 Vector3 정보가 저장되어 있습니다. 폴리브러시(Polybrush) 패키지를 사용하면 에디터 내에서 버텍스 컬러를 직접 페인트할 수 있습니다. 또는 3ds Max, Maya, Blender, 3D Coat나 Modo와 같은 3D 모델링 소프트웨어를 사용하여 버텍스 컬러를 지정할 수도 있습니다. 참고로 대부분의 3D 모델링 소프트웨어는 기본으로 각 버텍스에 최대치의 RGB 값이 지정된 상태로 모델을 익스포트합니다.
위의 스크린샷에서는 Vertex Colour 노드가 빨간색(R) 채널로 분할된 다음 Lerp 노드의 T 채널에 연결되어 마스크로 기능합니다. Lerp 노드의 A 채널은 입력값이 0인 경우, B 채널은 입력값이 1인 경우 사용됩니다. 실제로 버텍스에 빨간색 버텍스 컬러가 지정된 경우 위의 설정은 y축에 1만 추가합니다.
Normal Vector 노드를 사용하면 메시 면의 방향에 따라 입력값을 마스킹할 수 있습니다. Split 노드를 사용하면 효과를 적용할 축을 선택할 수 있습니다(R=X, G=Y, B=Z). 위의 스크린샷에서는 위쪽을 바라보는 면에만 양의 값이 지정되도록 y축을 사용하여 마스킹했습니다. 이 과정에서 반드시 Clamp 노드를 사용하여 0~1의 범위를 벗어나는 값은 0 또는 1로 잘라냅니다(0 이하의 값은 0으로, 1 이상의 값은 1로).
이 노드들을 사용하여 오브젝트가 y축에서 월드 포지션 0보다 위쪽에 위치하는 경우 입력값을 마스킹할 수 있습니다.
셰이더를 만들 때 원하는 효과를 얻을 수 있는 적절한 입력값을 찾기가 어려울 수 있습니다. 이러한 어려움을 해결하고 향후 프리팹과 프리셋을 통한 커스터마이징을 원한다면 프로퍼티를 사용해야 합니다.
프로퍼티를 사용하면 셰이더가 컴파일된 후 셰이더 값을 수정할 수 있습니다. 프로퍼티를 만들려면 '+' 표시를 클릭합니다(오른쪽 이미지 참조). 다음의 여섯 가지 프로퍼티가 있습니다.
깃발 셰이더는 깃발을 오브젝트 공간 사인(sine) 곡선을 따라 좌우로 움직이게 하고, UV 마스크를 사용하여 깃발의 좌측은 고정합니다.
바람 셰이더는 월드 공간 Gradient Noise를 단일 축 상에서 이동시켜 잎사귀와 풀을 부드럽게 밀고 당깁니다.
이 셰이더에서는 오브젝트의 축에 생성된 사인 곡선을 사용하여 물고기가 꿈틀거리며 헤엄치는 모습을 표현할 수 있습니다. 그런 다음 물고기의 머리 부분을 마스킹하여 움직이지 않게 합니다.
마지막으로 파도 셰이더입니다! 이 셰이더는 스케일과 각도가 서로 다른 3개의 사인 곡선을 사용하여 메시의 상단을 오프셋합니다. 3개의 사인 곡선은 파도의 최고점과 최저점의 컬러를 생성하는 데에도 사용됩니다.
셰이더 그래프 사용 방법을 알아보려면 먼저 앤디 터치(Andy Touch)의 GDC 세션(영문)을 확인할 것을 권장합니다. 다양한 셰이더 그래프 예시는 앤디의 GitHub 예시 라이브러리(영문)를 참조하세요.
모든 노드에 관한 설명(영문) 등 셰이더 그래프에 관한 상세 정보가 포함된 문서는 GitHub의 셰이더 그래프 개발자 위키(영문)를 참조하세요. 유니티의 그래픽스 실험 기능 프리뷰(영문) 포럼에서 관련 주제에 참여해 보세요! 마지막으로 셰이더 그래프를 이용하여 멋진 작품을 만드셨다면 꼭 공유해 주시기 바랍니다. 언제든 @John_O_Really로 트윗 보내주시기 바랍니다.