Search Unity

셰이더 그래프를 사용하여 인터랙티브 버텍스 효과 생성

, 2월 12, 2019

유니티는 셰이더 그래프(Shader Graph)경량 렌더 파이프라인(Lightweight Render Pipeline)을 사용하여 원하는 버텍스 효과를 구현할 수 있도록 이 두 가지 기능으로 버텍스의 위치를 인터랙티브하게 이동하는 예시를 제작해보았습니다. 이 게시물에서는 이 예시를 어떻게 제작했는지 그 과정을 보여드립니다. 셰이더 그래프의 셰이더, 예제 씬, 3D 게임 키트에서 가져온 게임 에셋 예시 몇 가지가 포함된 데모 프로젝트를 다운로드하여 직접 따라해 보세요.

아래 비디오 예시에서 보듯이 구체에는 스페이스바를 누르면 활성화되는 셰이더 기반 변위(displacement) 효과가 적용되어 있습니다. 이 효과는 게임에서 게임플레이 이벤트로 할당할 수 있습니다. 이 게시물에서는 셰이더 그래프 패키지를 사용하여 이 셰이더를 생성하고 스페이스바를 눌러 실행시키는 트리거를 통합하는 방법에 대해 살펴보겠습니다. 셰이더 그래프에서 효과를 구현하고, 다른 C# 스크립트에서 해당 효과와 상호작용하는 방법을 이해하는 데 도움이 되길 바랍니다. 데모 프로젝트에는 셰이더, 셰이더를 제어하는 스크립트, 사전 설정된 LWRP(경량 스크립터블 렌더 파이프라인) 에셋, 작업 시작에 사용할 수 있는 예제 씬이 포함되어 있습니다. 텍스트 설명이 아닌 동영상 튜토리얼을 보려면 유니티의 유튜브 채널을 확인해 보세요.

셰이더 그래프 LWRP 패키지 설치

먼저, 셰이더 그래프 및 경량 렌더 파이프라인을 설치하는 방법부터 살펴보겠습니다. Package Manager를 열고 경량 RP 패키지를 선택하여 설치합니다. 이렇게 하면 올바른 셰이더 그래프 버전이 자동으로 설치됩니다.

경량 RP를 설치한 후에는 프로젝트에 새 파이프라인 에셋을 만들어야 합니다. Create->Rendering->Lightweight Render Pipeline Asset을 선택합니다.

그런 다음 Edit->Project Settings->Graphics로 이동하고 Scriptable Render Pipeline Settings 필드에 LightweightRenderPipelineAsset을 끌어다 놓으면 이 파이프라인 에셋을 활성화할 수 있습니다. 다운로드한 에셋을 사용하여 따라해 보는 경우 이 단계의 설정이 이미 완료되어 있습니다.

이제 경량 렌더 파이프라인이 설치되었으므로 새 셰이더 그래프 생성에 대해 알아볼 수 있습니다. Create->Shader->PBR Graph를 선택하여 프로젝트에서 새 그래프를 생성해 보겠습니다. PBR 그래프를 사용하면 Unity의 PBR 시스템으로부터 입력을 가져올 수 있는 새 셰이더를 생성할 수 있으므로 셰이더에서 그림자 및 반사와 같은 기능을 사용할 수 있습니다. 이 셰이더를 생성한 다음, 새 머티리얼에 해당 셰이더를 추가하고 해당 머티리얼을 구체에 끌어다 놓아 예제 씬의 구체에 해당 머티리얼을 연결합니다.

셰이더 그래프로 버텍스 이동 효과 구현

이 효과를 구현하기 위해 PBR Master 출력 노드에서 출력 포지션을 변경하여 메시에서 노멀을 따라 버텍스의 위치를 이동해 보겠습니다. 각 버텍스의 기본 오브젝트 포지션에서 Add 노드를 연결하여 변위를 줄 것입니다. 기본 오브젝트 포지션에 Normal Vector를 추가하면 모든 버텍스가 돌출되어 구체가 더 크게 보이게 됩니다. 이 변위에 변화를 주기 위해 Simple Noise 노드를 사용하여 이 노멀 벡터 변위를 준무작위로 Multiply에 연결합니다.

Save Asset을 클릭하면 이제 구체가 Simple Noise에 따라 버텍스의 위치가 이동된 것을 씬 뷰에서 확인할 수 있습니다.

하지만 Simple Noise가 UV 공간을 기반으로 샘플링되었으므로 변위에 경계 부분이 표시됩니다. UV 공간이 아닌 Simple Noise용 오브젝트 공간을 사용하여 경계 부분을 수정하려면 Object로 설정된 Position 노드를 추가하면 됩니다.

맥동 효과(pulsation effect)를 생성하기 위해 Simple Noise 노드로 보내기 전에 Time 노드에 추가하여 이 Position 출력을 스크롤하겠습니다. Time 노드에서 Multiply를 사용하여 스크롤 속도를 변경할 수도 있습니다.

C#에서 셰이더 그래프 프로퍼티 제어

변위를 제어하기 위해 셰이더 그래프에 새 셰이더 프로퍼티가 제공됩니다. 셰이더 프로퍼티를 사용하면 인스펙터에 입력된 값 또는 이 경우와 같이 자체 C# 스크립트를 통해 셰이더에 입력값을 제공할 수 있습니다. 이름이 Amount이고 Reference가 _Amount로 변경된 새 Vector1 프로퍼티를 만들어 보겠습니다. 레퍼런스 필드는 문자열 이름이며 스크립트에서 이 이름을 사용하여 변위에 액세스하고 이를 변경합니다. 이 필드를 변경하지 않으면 자동으로 생성된 값이 사용됩니다. 문자열이 정확히 일치하지 않으면 스크립트를 통해 프로퍼티를 관리할 수 없으므로 대문자 사용을 포함하여 두 문자열이 일치하는지 다시 한 번 확인해야 합니다.

노멀 벡터에 Multiply를 적용하기 전에 Simple Noise와 함께 Multiply 노드의 이 Amount 셰이더 프로퍼티를 사용합니다. 그러면 벡터 포지션에 적용되기 전에 노이즈를 확대/축소할 수 있습니다. 이제 Amount 변수로 메시에서 각 버텍스가 변위되는 정도를 제어할 수 있습니다.

이 Amount 변수를 제어하기 위해 DisplacementControl이라는 C# 스크립트를 생성하여 DisplacementSphere 게임 오브젝트에 연결했습니다. 이 스크립트는 MeshRenderer 컴포넌트에 할당된 머티리얼에서 생성한 프로퍼티와 인터랙션을 통해 _Amount 변수를 제어합니다. MeshRenderere 컴포넌트에 대한 레퍼런스를 변수 meshRender에 저장하고 새 float 변수인 displacementAmount를 선언합니다.

displacementAmount 변수를 0으로 감소 보간하기 위해 Update 함수에 간단한 Lerp를 사용합니다. 그런 다음 셰이더 변수 _Amount를 displacementAmount 변수에 저장된 값으로 설정합니다. 그러면 셰이더 그래프의 _Amount 변수가 업데이트되어 시간이 지나면서 점차 0으로 평탄화(smooth)됩니다.

Unity 기본값인 “Jump” 입력 축(기본적으로 스페이스바에 할당됨)이 사용되고 있어 스페이스바를 누르면 displacementAmount 값이 1로 설정됩니다.

이제 씬에서 플레이 모드에 진입할 때 스페이스바를 누르면 displacementAmount가 값 1로 설정된 후 천천히 0으로 다시 보간되는 것을 확인할 수 있습니다.

셰이더 그래프로 Voronoi 글로우 이펙트 생성

조작 가능한 글로우 이펙트를 생성하기 위해 PBR Master 노드의 Emission으로 출력합니다. Voronoi Noise 노드를 사용하는데 이를 Color 노드와 함께 Multiply 노드에 연결합니다. 이렇게 하면 어두운 점과 함께 글로우 이펙트가 살짝 조정됩니다. 그런 다음, 다른 Color 노드를 기본 컬러로 하여 Lerp 노드를 사용하고 T 입력에서 Amount 변수를 사용합니다. 이렇게 하면 Amount 변수를 사용하여 기본 Color 노드와 Voronoi Noise 컬러 노드 간을 블렌딩할 수 있습니다.

그런 다음, 이전과 비슷한 설정을 사용하여 글로우를 스크롤합니다. Object로 설정된 Position 노드를 사용하여 Time 노드에 추가한 다음 Voronoi Noise 노드의 UV 슬롯에 출력을 연결합니다.

Time의 추가 레이어로 스크롤된 Simple Noise 노드를 사용하고 Noise 출력 두 가지에 Multiply를 설정하여 별도의 배리에이션 효과를 낼 수 있는 두 번째 글로우 레이어를 추가할 수도 있습니다. 이렇게 하면 시각적으로 흥미로운 두 번째 노이즈 레이어가 제공됩니다

이 글로우 이펙트는 Lerp 노드의 Amount 변수로 조정되므로 플레이 모드에서 스페이스바를 누를 때 구체가 두 가지 효과인 버텍스 변위와 글로우를 활성화한 다음 천천히 정상 상태로 돌아가는 것을 확인할 수 있습니다.

효과를 조금 더 추가하기 위해 DisplacementControl 스크립트에서 간단한 파티클 시스템도 연결했습니다.

최종 작업물은 아래 동영상에서 확인하실 수 있습니다.

위의 기능을 직접 사용해 보려는 분들을 위해 에셋, 메시, 셰이더, 예제 씬이 모두 포함되어 있는 전체 프로젝트를 제공해 드립니다. 프로젝트는 여기에서 다운로드하실 수 있습니다. 이 기능을 활용하여 멋진 결과물을 제작하시기 바랍니다.

 

Unity에 대해 자세히 알아보려면 학습 웹사이트에서 제공하는 교육 과정을 확인해보시길 권장드립니다. 기타 다양한 멋진 효과에 대해 알아보려면 Unity 에셋 스토어도 확인해 보세요.

20 코멘트

코멘트 구독

코멘트를 달 수 없습니다.

  1. I’ve just started to familiarize myself with Shader Graph and really like the workflow.

    I cannot find a way to add comments to the graph and maybe add an outline to parts of the graph to improve readability of the graph, is this available or planned for a future version?

    These are features that I do see in the node editor for Substance Designer e.g. but I’m missing here and converting parts to sub-graphs may not always solve this.

  2. Thank you so much! It’s amazing!

  3. Please make tutorial how to manipulate Visual effect graph with script and use trigger events with node.

  4. I’ve been doing vector displacement testing and have not found a way to mask the effect with a texture or Lerp.

  5. Mattheiu Brooks

    2월 17, 2019 1:15 오전

    Can this tutorial be done with HDRP instead of LW?

  6. Really appreciate this kind of post – Thanks!
    Had a brief look at the demo project and then set up my own solely via your text tutorial without needing to refer back to the demo. So the info vs. length balance is about right.

    The diagram appears to show the Amount being multiplied with the product of Simple and Normal rather than directly with Simple and preceding Normal in the chain as noted in the text. However, I don’t see any precedent issues with two consecutive mults, so either way seems equivalent – but I stand to be corrected.

  7. Any reason this is a downloadable zip rather than a Github repo like most of your other stuff?

  8. Great blog article, just what I like to see!
    Is there a timeline for when LWRP and HDRP (+ Shader Graph) will be out of experimental status and should be used in production?

  9. This blog is far too focused, please could you talk about PlasticSCM, holographic display and Cloud services?

    1. Glad you thought it was focused :)

  10. I just like this

    1. Thank you! Appreciate your comment.

  11. Yes! More blog posts like this, please! More Shader Graph, some VFX Graph, please keep them coming!

    1. We’re working on some more about various topics, glad you enjoyed this one!

  12. great , also when will refraction output be supported in shader graph as in shader forge and amplify shader ?

    1. Thank you!

      I got the following answers from some of the developers:

      For LWRP there is no “refraction output”. Refraction should be done manually and added to the desired material channels (we wont be adding these restrictive abstractions). HD Lit has refraction outputs as offsets. For us refraction is like distortion but driven by index of refraction and normal so we don’t expect the user to replace that, they can specify the IOR or thickness of the object. For distortion they can do what they want. Short version, this is very pipeline dependent and we think its implemented correctly for each already.

      1. awesome , thanks for clarification . and great work all around . I’m also a fan of your tutorials and videos x) big thanks

  13. praise the lord, the return of useful blog posts is here!

    1. Thanks Isaac! Glad you found it useful.

      1. Anthony Johnson

        2월 28, 2019 9:05 오전

        In the event that you snap to surface while in turn mode the item will snap the rotate purpose of the article to the surface. On the off chance that in focus mode the article will snap the closest vertices of the chose item to the surface.