Unity 검색

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

2019년 2월 12일 엔진 & 플랫폼 | 6 분 소요
공유

Is this article helpful for you?

Thank you for your feedback!

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

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

이 콘텐츠는 Targeting Cookies 카테고리를 수락해야만 동영상을 시청할 수 있도록 허용하는 타사 제공업체에서 호스팅합니다. 이러한 제공업체의 비디오를 보려면 쿠키 환경 설정에서 Targeting Cookies 카테고리를 수락하시기 바랍니다.

셰이더 그래프 및 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 슬롯에 출력을 연결합니다.

2019년 2월 12일 엔진 & 플랫폼 | 6 분 소요

Is this article helpful for you?

Thank you for your feedback!