유니티 그래프 그리기 - yuniti geulaepeu geuligi

유니티/shaderGraph

by NGVI 2021. 4. 28.

유니티 셰이더 그래프 예제 23, 인터랙티브 버텍스 효과, Unity ShaderGraph Interactive Vertex Effect

요번에는 인터렉티브 버택스 효과를 만들어 봅시다.

먼저 Lit 모델을 하나 만듭니다.

버택스를 조절시켜 표면이 지글거리를 효과를 만들어 볼 건데,

쉽게 생각하면 노말 방향으로 버택스를 조절시ᄏ면 얼추 되지 않을까란 상상을 하실 수 있습니다.

유니티 그래프 그리기 - yuniti geulaepeu geuligi
사용할 모델

먼저 그렇게 해봅시다.

노말 방향 대비 버택스 조정해보기, 노드 구성

유니티 그래프 그리기 - yuniti geulaepeu geuligi
노말을 기반으로 변위를 주고자 했던 아이디어

아래는 변화를 보기 위해 시간 값 기반 변화량 값을 만들어서 연결한 것이고 빨간 태두리 안이 버택스를 움직이는 로직입니다.

실행결과

유니티 그래프 그리기 - yuniti geulaepeu geuligi
먼가 불만족..

사실 지글대는 느낌도 없고, 그냥 커졌다 작아졌다 정도.

그리고 무엇보다 치명적인 것은 가운데 여러 부분에서 크랙이 생긴다는 점입니다.

다른 방법을 찾아봐야겠죠.

다음 아이디어는 포지션을 기반으로 노이즈를 생성해서 변화량을 만들어 봅시다.

노드 구성

유니티 그래프 그리기 - yuniti geulaepeu geuligi
포지션 기반의 변화량 생성

빨간 박스 내부의 값을 조절하며 효과를 봅시다.

실행결과

유니티 그래프 그리기 - yuniti geulaepeu geuligi
깨지는 부분없이 원하는 결과가 잘 나오는 느낌입니다.

여기서 추가로 

이전에 작업한 축기반 에니매이션 효과랑 연동시켜 보게 씁니다.

축 기반 에니매이션 효과 설명은 아래 링크 달아두겠습니다.

관련이 궁금하시면 해당 글을 좀 봐주시면 좋을 거 같고요

노드 구성

유니티 그래프 그리기 - yuniti geulaepeu geuligi
노드구성

빨간색 부분이 이번에 구성한 노드,

노란색 부분이 축 기반 애니메이션에서 구성한 노드

실행결과

유니티 그래프 그리기 - yuniti geulaepeu geuligi
적절히 믹스되어 동작된다.

관련링크

인터랙티브 버택스 효과 생성 자료

blogs.unity3d.com/kr/2019/02/12/creating-an-interactive-vertex-effect-using-shader-graph/?_ga=2.45854436.1501563505.1619174434-1944966699.1617204294

축기반 애니메이션 자료

유니티 셰이더 그래프 예제 22, 간단한 축 기반 에니매이션, Unity ShaderGraph Simple Animation base axis

유니티 셰이더 그래프 예제 22, 간단한 축 기반 에니매이션, Unity ShaderGraph Simple Animation base axis 이번에는 셰이더 그래프를 통해서 간단하게 에니매이션이라고 할까요? 그런 효과를 구현해 보도록

gdev.tistory.com

유니티 그래프 그리기 - yuniti geulaepeu geuligi

공부하는데 도움되셨으면 합니다.

감사합니다.

'유니티 > shaderGraph' 카테고리의 다른 글

유니티 셰이더 그래프 예제 25, 찢어진 깃발효과+에니매이션, Unity ShaderGraph tear flag animation  (0) 2021.04.29
유니티 셰이더 그래프 예제 24, 폭포 효과, Unity ShaderGraph WaterFall  (0) 2021.04.28
유니티 셰이더 그래프 예제 23, 인터랙티브 버텍스 효과, Unity ShaderGraph Interactive Vertex Effect  (0) 2021.04.28
유니티 셰이더 그래프 예제 22, 간단한 축 기반 에니매이션, Unity ShaderGraph Simple Animation base axis  (0) 2021.04.27
유니티 셰이더 그래프 예제 21, Triplanar 사용을 통해 메시에 텍스처 입혀보기 + snow 효과, Unity shaderGraph Triplanar + snow  (0) 2021.04.27
유니티 셰이더 그래프 예제 20, 파티클 모양 만들어보기, 둥근 모양, 알파 둥근, 표창 모양, 체크, rings, shatter, spiral 만들어보기  (0) 2021.04.27

관련글

댓글0


[Matlab / 매트랩] 강의 3번째

유니티 그래프 그리기 - yuniti geulaepeu geuligi

2차원 그래프 그리기 (2D graph)

우왕ㅋ 굿ㅋ 번개같은 업뎃입니다!!!!!!.............(은)는 훼이크고

사실을 금욜날 3강까지 업뎃할 예정이었습니다... 흐흑ㅠ 이미 한참 지나버렸네요 흐흑ㅠ

어찌되었건 은근슬쩍 넘어가서 이번부터는 그래프 그리는걸 한번 배워보도록 해요.

그래프는 2차원 그래프 그리기, 3차원 그래프 그리기, 도형 그리기 요렇게 3 파트로 나눠서 해볼까 하는데

오늘은 먼저 2차원 그래프 그리는 것 부터 해볼까 합니다.

유니티 그래프 그리기 - yuniti geulaepeu geuligi

요런 2차원 그래프도 표현이 당연히! 가능합니다.

후후 아름답군요. 엘레강스합니다.

위에 나온 그래프 중에서 가장 빈티나는(...) 2차원 그래프부터 그려보는 걸 한번 해볼까 하는데요.

그래프 그리는 순서는 다음과 같습니다.

1) x축 데이터 정하기(벡터로 표현).
2) y값을 x 값을 이용하여 나타내기.
3) plot명령어를 사용하여 그리기.
4) 추가적인 옵션(그래프 색, grid, x,y이름표 붙이기, 그래프 이름, 범례 표시 등등)

주로 제가 사용하는 방법은 위의 형식입니다. 물론 다른 방법도 있습니다만...! 하나하나 차근히 해보도록 해요.

일단 예를 한번 들어보겠습니다.

y=3*x 그래프를 그려보도록 하겠습니다.

1) x 데이터 지정하기(벡터로 표현)

그리고자 하는 x축 범위를 예를 들어 -3~3 까지 나타내고 싶다고 합시다.
이때 주의할 점은 x축 데이터를 벡터로 표현해야한다는 것입니다.

왜냐고요?

매트랩이 그래프를 그려주는 원리를 일단 설명을 해야 할 것 같네요.

매트랩이 2차원 그래프를 그리기 위해선 데이터가 2 세트가 필요합니다.

x 데이터와 그에 대응하는 y 데이터죠.

예를 들어 x = [ 1 2 3 4 5] 라는 데이터가 있고
y=[2 4 6 8 10] 이라는 데이터가 있다면

x의 첫번째 데이터와 y의 첫번째 데이터를 하나의 세트로 생각해서 (1,2)를 그래프에 나타내줍니다.
마찬가지로
x의 두번째 데이터와 y의 두번째 데이터를 하나의 세트로 생각해서 (2,4)를 그래프에 나타내줍니다.
역시나 마찬가지로 (3,6),(4,8),(5,10)을 그래프에 찍어주는 형태입니다.

즉, x데이터와 y의 데이터를 순서대로 1:1 대응을 시켜서 그래프를 그려주는거죠.

따라서 x 데이터와 y의 데이터는 벡터의 형태 (1,m 크기의 행렬)로 표시되어야 하며, 두개의 크기가 같아야 합니다.

물론 위의 경우는 점으로 표시되지만, plot명령어를 쓰게되면 그 사이를 선으로 연결시켜 줍니다.

직접 매트랩 명령어와 그래프를 보여 드릴게요.
x와 y를 벡터로 나타낸 다음, plot이란 명령어를 썼습니다.

>> x=[1 2 3 4 5];
>> y=[2 4 6 8 10];
>> plot(x,y)

기본적으로 plot명령어는 파란색 선으로 그려주기 때문에 위와 같이 나타나지만 다르게도 표현할 수 있습니다.

자, 여튼 데이터를 나타내기 위해서 벡터 형식으로 나타내야 한다는 것은 아시겠죠?

그런데, -3~3 까지 그리기 위해서 벡터형식으로 나타내려면 숫자를 일일이 쳐줘야 한다는 단점이 있습니다.

x=[-3 -2.99 -2.98 ..... 2.99 3]

요런식으로 둬야 하는데 말이죠.

하지만 현실적으로 일일이 칠 수가 없기 때문에!! 바로 입력하는 방법이 있습니다. 바로 요렇게 말이죠.

x=[시작 값 : 데이터 하나당 크기 : 끝값]

예를 들어 볼게요.

>> x=[-3: 1: 3]

x =
-3 -2 -1 0 1 2 3

쉽죠? -3에서 3까지 1의 단위로 벡터를(혹은 행렬을) 만들어 줘라는 의미가 됩니다.

위에서 x데이터와 y의 데이터를 1:1대응을 해서 나타낸다고 했으므로, 데이터가 촘촘할수록 더 정확한 그래프가 그려지겠죠?

y=3*x를 나타내기 위해 여기선 x의 범위를 -3에서 3까지 0.01씩 지정할게요.

>> x=[-3:0.01:3];

2) y값을 x 값을 이용하여 나타내기

y=3*x의 그래프를 그리고 싶습니다. x는 벡터로 지정되었기 때문에, 이제는 y를 벡터로 지정해줄 차례입니다.

단순히
>> y=3*x;

요렇게 쳐도 괜찮습니다만, 요전 앞 강의에서 행렬의 성분마다 계산!!! 을 하기 위해서는 점!! '.' 을 찍어야 한다는 것. 잊지 않으셨죠?

위의 경우는 숫자 곱하기 벡터라는 단순한 상황이기 때문에 위의 명령어도 먹혀 들어가지만,

2차 그래프나 3차그래프, 분수 등의 다른 형태가 나오게 되면 안되는 경우가 태반이기 때문에,
항상 점 '.'을 찍어주시는 것을 습관화합시다.

즉 요렇게 저는 칠께요.

>> y=3.*x;

이렇게 되면, y는 x라는 벡터에 3을 곱한 결과를 가지는 벡터가 되는 것입니다.

3) plot명령어를 사용하여 그리기

앞에서 이미 설명을 해버렸지만, plot(x,y) 이라는 명령어를 쓰면 x 데이터와 y 데이터를 1:1 대응을 시켜서 그래프를 매트랩이 알아서 그려주게 됩니다. 요렇게 입력해주면 되겠죠?

>>plot(x,y)

여기까지 하면 이런 그래프가 나오게 됩니다.
>> x=[-3:0.01:3];
>> y=3.*x;
>> plot(x,y)

[축하드립니다!! 그래프 그리기 기본 스킬을 습득하셨습니다.]

여기까지 하면 그래프 그리기는 사실상 99% 정도는 끝난거지요.

이제 여기서 그래프를 스리슬쩍 꾸미면 2차원 그래프는 완성되게 됩니다.

4) 추가적인 옵션(그래프 색, grid, x,y이름표 붙이기, 그래프 이름, 범례 표시 등등)

살짜쿵 위의 그래프를 꾸며볼까요? 일단 색깔과 형태를 바꿔 볼게요.
명령어는 다음과 같습니다.
plot(x,y,'색깔')
색깔 부분에는 빨간색이면 'r' 초록색은 'g' 노란색을 'y'등으로 나타낼 수 있어요. 한번 빨간색으로 해볼께요.

>> plot(x,y,'r')

쉽죠? 형태도 바꿀 수 있습니다. 점이나 +, 사각형, 원 등으로 표현할 수도 있어요. 색깔 치는 부분에 형태에 관한 명령어나, '색깔,형태'의 형식으로 나타내주면 됩니다. 한번 보여 드릴게요.
(형태에 관한 명령어 점 -> . 사각형 ->s 원->o 등등. help plot을 치면 쉽게 알 수 있습니다.)

>> plot(x,y,'ro')

데이터 개수가 많아서 원이 겹쳐 굵은 선으로 보이는 군요. 데이터 개수가 적으면 원으로 보입니다 하핫

유니티 그래프 그리기 - yuniti geulaepeu geuligi

다음은 다른 옵션들을 적용해볼게요. 순서대로 적용하겠습니다.

x축 이름 표시 (xlabel('이름'))
y축 이름 표시 (ylabel('이름'))
그래프 제목 표시 (title('이름'))
경계 조절(그래프 나타낼 범위 조절) (axis([x최소 x최대 y최소 y최대])
그리드 표시 (grid on)

>> xlabel('x axis')
>> ylabel('y axis')
>> title('graph')
>> axis([-2 2 -8 8])
>> grid on

여러가지 옵션들이 적용된 것을 볼 수 있죠?