Search Unity

Unity는 2018.1 버전에서 셰이더를 시각적으로 빌드할 수 있는 새로운 셰이더 그래프(Shader Graph) 툴을 도입했으며, 최근에는 새롭고 유용한 기능을 여러 개 추가했습니다. Unity 2018.2와 신규 데모 프로젝트를 다운로드하여 새로운 기능을 체험해보세요!

Unity 2018.2에서 셰이더 그래프에 새롭게 추가된 기능은 다음과 같습니다.

  • HDRP 지원
  • 버텍스 포지션
  • 프로퍼티 레퍼런스 이름
  • 그래프 경로 변경
  • 신규 노드: 그레디언트, 텍스처 2D 배열, 텍스처 3D 등

데모 프로젝트 사용

이제 샘플 프로젝트를 자세히 살펴보면서, 셰이더 그래프를 사용하여 나뭇잎을 나타내는 씬을 어떻게 만드는지 알아보겠습니다. 먼저 여기에서 샘플 프로젝트를 다운로드하세요. GitHub에 익숙하지 않다면 프로젝트의 ZIP 아카이브를 다운로드할 수 있습니다.

Unity의 새로운 템플릿 프로젝트처럼, 이 프로젝트에도 Unity가 사용하는 툴에 관한 문서를 빠르게 참조할 수 있는 Readme 파일이 포함되어 있습니다.

프로젝트는 생생한 나뭇잎을 만들 수 있는 샘플 그래프 및 환경 셰이더와 함께 제공되며, 두 렌더 파이프라인을 전환하는 기술을 보여주는 데모도 포함됩니다. Readme 인스펙터에는 LWRP(Lightweight Render Pipeline, 경량 렌더 파이프라인)와 HDRP(High Definition Render Pipeline, 고해상도 렌더 파이프라인)를 전환할 수 있는 버튼이 있습니다. 이는 에셋을 제작하고 파이프라인 간 호환성을 테스트하기 위해 제공되는 기능으로, 제작 시에는 하나의 렌더 파이프라인만 사용할 것을 권장합니다.

‘에셋(Assets)’ > ‘씬(Scenes)’ 폴더에서 샘플 씬을 찾아 시작해보세요. 이어지는 섹션에서는 이 데모 프로젝트에 포함된 일부 그래프에 대해 알아보겠습니다.

스탠다드 셰이더 그래프

Unity의 스탠다드 표면 셰이더가 도움이 되었나요? 그렇다면 셰이더 그래프를 사용하여 직접 스탠다드 표면 셰이더를 만들어보세요! 데모 프로젝트의 에셋(Assets)/셰이더(Shaders)/ 폴더에서 예시 그래프를 확인할 수 있습니다.

예시 그래프의 프로퍼티는 스탠다드 표면 셰이더의 프로퍼티 옵션과 거의 동일합니다. 예시 그래프는 HDRP의  패킹된 마스크 맵용 텍스처 포맷을 따르며, 프로젝트에 필요한 사항에 따라 그래프를 커스터마이즈할 수도 있습니다.

이 프로젝트의 스탠다드 셰이더는 다음과 같은 고유한 특성을 포함합니다.

  • 마스터(Master) 노드 설정에서 양면(Two-Sided) 렌더링 활성화됨
  • 새로운 정면(Is Front-Face) 노드를 사용하여 후면 노멀 플립 가능
  • 알파 채널에 월드 포지션 기반의 디더링 마스크 포함

단순한 초목 그래프

이 프로젝트에는 단순한 초목 그래프도 포함되어 있습니다. 이 그래프는 단순한 버텍스 애니메이션이 포함된 스탠다드 셰이더로, 매우 단순하게 앞뒤로 흔들리는 동작과 작은 움직임을 생성하여 배리에이션을 만들어냅니다.

이러한 애니메이션은 버텍스 컬러로 제어됩니다. 기본 애니메이션에서는 검정색-빨간색의 범주를 포함하는 단순한 그레디언트를 사용하여, 나뭇잎의 끝부분만 애니메이션화되고 맨 아랫부분은 지면에 고정되도록 합니다. 보다 복잡한 애니메이션에는 더 복합적인 컬러를 적용해야 합니다.

사실적인 나뭇잎 애니메이션에는 곡선(Wave)이 포함되어야 합니다. 이 그래프에는 시각적 효과를 위한 리매핑 값과 시간을 입력하여 도출된 사인(Sine) 곡선이 사용됩니다. 검정색 선은 기본 사인 곡선을, 빨간색 선은 리매핑된 사인 곡선을 나타냅니다.

터뷸런스(Turbulence) 곡선은 기본 사인 곡선을 수정한 버전으로 곡선의 진폭 대신 속도를 변경합니다. 터뷸런스 곡선은 무작위로 깜박임 값을 제공하며, 이 값을 사용하면 기본 곡선에 약간 펄럭거리는 효과를 더할 수 있습니다. 여기에 추가된 파란색 선은 표준 사인 곡선과 터뷸런스 곡선 간의 차이를 나타냅니다.

이제 두 곡선을 더하고 원하는 버텍스 컬러(위의 초목에서 본 빨간색 페인팅)를 곱한 다음, 곡선을 오브젝트 포지션에 추가하여 버텍스 오프셋을 생성합니다. 이 데모에서는 X축에서만 오프셋을 생성하지만, 모든 방향 또는 모든 축에서 동시에 오프셋을 생성할 수도 있습니다. 최종 결과물을 마스터 노드의 포지션(Position) 슬롯에 적용하면 바람에 흔들리는 나뭇잎을 나타내는 단순한 애니메이션이 만들어집니다.

복잡한 초목 그래프

이 프로젝트에는 복잡한 초목 그래프도 포함되어 있습니다. 이 모션은 Nvidia의 GPU Gems 3에 수록된 티아고  소사(Tiago Sousa)의 상세한 안내서를 기반으로 합니다. 이 안내서에는 시스템의 수학적인 원리에 관한 상세한 분석이 포함되어 있습니다. 여기서는 애플리케이션의 간략한 개요를 소개하도록 하겠습니다.

이러한 시스템은 나무처럼 비교적 큰 초목의 표현에 적합합니다. 또한 나무 전체가 바람에 흔들리는 큰 웨이브 모션과 나뭇가지처럼 작은 오브젝트의 움직임을 위한 배리에이션뿐 아니라, 나뭇잎이 팔락거리는 미세한 동작도 구현합니다. 각 단계는 메시에 적용된 버텍스 컬러로 제어됩니다. 빨간색은 나뭇잎의 미세한 흔들림을 포함하는 메시 부분을 결정하므로 나뭇잎의 가장자리에 적용하는 것이 적합합니다. 초록색은 나뭇가지들이 동시에 흔들리지 않도록 시간 배리에이션을 추가합니다. 파란색은 나뭇가지가 돋아난 몸통 부분 및 바람의 영향을 가장 많이 받는 부분을 결정합니다. 아래는 맨 아랫부분부터 단순한 검정색-파란색 그레디언트를 적용한 모습입니다.

각 단계를 합치면 바람에 나뭇잎이 움직이는 모습을 구현할 수 있습니다.

그래프를 살펴보면 알아차릴 수 있을 것입니다. 다행히 이 과정은 보이는 것처럼 복잡하지 않습니다. 그럼 과정을 좀 더 세부적으로 나누어서 몸통 단계, 나뭇가지 단계와 나뭇잎 단계를 살펴볼까요?

위 그림은 시스템의 기본 몸통 단계를 나타낸 것으로, 단순한 초목 그래프에 사용된 터뷸런스와 같은 노드로 시작합니다. 바람이 부는 방향에 대해 보다 세밀하게 제어하기 위해 곡선과 방향(Direction) 프로퍼티를 곱합니다. 여기서도 단순한 초목 그래프처럼 배리에이션이 포함된 리매핑 사인 곡선이 사용됩니다. 그런 다음 터뷸런스와 기본 곡선을 더합니다.

위 그림은 두 번째 단계인 나뭇가지의 움직임을 나타낸 것입니다. 먼저 몸통 단계의 움직임을 단일 벡터값으로 격리합니다. 그런 다음 곡선과 파란색 버텍스 컬러 채널을 곱하여 ‘나뭇가지’로 지정할 메시 부분을 정합니다. 그런 다음 곡선의 세기(진폭)를 낮추고 움직임을 더 빠르게 합니다. 그러면 큰 움직임에 기반하되 이보다 훨씬 작게 흔들리는 곡선을 여러 개 생성할 수 있습니다. 나뭇가지의 나머지 부분은 값을 더 부드러운 그레디언트로 다듬어주면 됩니다. 좋은 결과물이 나올 것 같네요!

다음은 애니메이션에 빠르게 흔들리는 동작을 더하는 나뭇잎 단계입니다. 먼저 메시 버텍스 컬러의 빨간색 채널과 초록색 채널을 사용하여 빠르게 흔들려야 하는 끝부분을 지정합니다. 초록색 채널을 통해 동작에 배리에이션을 줄 수 있습니다. 초록색 값이 높게 지정된 영역은 초록색 값이 낮게 지정된 영역보다 움직임이 더 강렬해집니다. 빨간색 채널에서는 강하게 흔들리는 메시 부분을 지정할 수 있습니다. 일반적으로 이것은 나무 메시 상의 나뭇잎 카드(leaf cards) 가장자리에 사용됩니다.

이제 모든 단계를 더하기만 하면 됩니다! 나뭇잎 단계를 나뭇가지 단계에 더한 결과를 기본 몸통 단계에 더하면 복합적인 바람 효과가 완성됩니다.

이 프로젝트의 자세한 작업 내용은 에셋(Assets) 폴더의 예시 콘텐츠를 확인하시기 바랍니다. 일부 스크립트에는 여러분이 직접 프로젝트를 시작하는 데 도움이 되는 추가 ReadMe 파일이 포함되어 있습니다.

셰이더 그래프에 관한 예시 콘텐츠를 더 보고 싶으시다면 앤디 터치(Andy Touch)의 셰이더 그래프 예시 라이브러리를 참조하세요.

셰이더 그래프에 대한 의견을 공유하려면 포럼을 이용하세요. 다음 블로그 소식도 기대해 주세요!

23 코멘트

코멘트 구독

코멘트를 달 수 없습니다.

  1. I regularly visit your site and find a lot of interesting information.
    Not only good posts but also great comments.
    Thank you and look forward to your page growing stronger.
    https://carhampt.com

  2. Shader Graph is awesome. Will you guys add Vertex ID support? For now, it seems it is not possible to distinguish between different vertices.

  3. This looks a very interesting article – I’ll need to sit down and take time looking into this – Thanks very much!

  4. Thanks for this article, I made a good shader for vegetation, and created my nodes, including SSS.
    https://forum.unity.com/threads/nodes-for-shader-graph.543519/#post-3584384

    1. Amazing Job Andrey!

  5. There needs to be a way to visually group nodes together (not resulting in shader code at the end.) And you need to be able to add comments. Bigger graphs can get quite messy and you totally get lost without any commenting feature.

    1. Hey Maik,

      You can create subshaders which you can use to group nodes together and if you don’t use them simply not reference them. For the comments, I agree and that is something coming.

      1. I’ve tried using a subgraph, but ran into a problem that I couldn’t work around. Mainly, the subgraph returns basically a Vector4, but the Position port on the PBR master node expects a Vector3. I wasn’t able to connect both together. Then I tried splitting the Vector4 into its subcomponents, then combining RGB together into a new Vector3, and still the Position port wouldn’t accept the connection (it would grey out when dragging the edge.) I don’t have a clue why.

      2. Also, it looks like subgraphs can only return exactly one data type, which is quite cumbersome. I don’t want to deal with a Vector4 if my subgraph returns a Vector3. It doesn’t make sense.

  6. Wait, hold up. Where is that translucent effect came from? i don’t think you can change HDRP surface type in shadergraph yet??!!!

  7. Is there any way to write all that in code in the same/similar way as with surface shaders?
    I really find shader graphs too much overcomplicated and hard to follow. Many parts of those huge graphs could be put in a couple of lines in code.

  8. Thanks for delivering a tutorial about how to switch between renderpipelines.
    But in my opinion it needs too many steps/scripts/assets/prefabs/profiles etc. and should be much more userfriendly.
    Hopefully this will change when coming out of beta…..

  9. How to use the SSS Profile into a Shader Graph? I think we need that support asap.

  10. Ashley Hooper

    8월 7, 2018 6:34 오후

    @Tufan Aydin

    That should just be a rim shader, I don’t see why shader graph couldn’t make that as it’s pretty standard.

  11. Ciro Continisio

    8월 7, 2018 5:17 오후

    Amazing post, Alex! As somebody who’s experimenting a lot with ShaderGraph and trying to use it to the next level, this kind of advanced info is great. Thanks for the tips!

  12. For artists who don’t know how to start to build shaders visually, (since ShaderGraph is new), I recommend looking for “UDK shader” on Youtube.

  13. Thanks for the examples, it will be handy for artists like me who don’t know how to start doing their own modification of a standard shader.

  14. Please answer me. Can Shader Graph do now Toon shader with Outline? Can we make Outline shader like in cartoons?

    1. Yes, you can get that effect. See this example, the Rim effect can be a good starting point.

  15. Isaac Surfraz

    8월 7, 2018 2:50 오후

    nice! great post!