9. 그래픽 요소 만들기 (1) 그라디언트와 IF로 도형 그리기

---

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다.

내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다.

---

이번 포스팅에서는 그라디언트 제작과, 제작 후에 다른 연산을 통해서 그라디언트를 변형하고

색상을 입혀보는 시간을 가져 보도록 하겠습니다.

 

1. 선형 그라디언트 Linear gradient

선형 그라디언트를 만드는 방법은 간단합니다. 

텍스쳐 좌표계(TexCoordinate) 노드에서 선형 그라디언트 (Linear gradient) 노드를 연결하고,

U방향과 V방향을 추출하면 그라디언트가 완성이 됩니다.

 

여기에 선형 보간(Linear Interploate)노드로 색상을 합성하면 그라디언트에 색도 부어 넣을 수 있어요.

2번 이상 설정하면 3가지 이상의 색도 합성할 수 있습니다.

 

2. 원형 그라디언트 Radial Gradient

원형 그라디언트는 입력 값이 다수 존재합니다. 

 

위치 이동을 맞춰 줄 수 있는 UV(V2), 중심 위치 값을 조정하는 Center position(V2),

크기를 정하는 반지름 Radius(S), 밀도를 결정하는 Density(S),

밀도를 반전시켜 외곽부터 흐려지게 하는 Invert Density(B) 가 입력 값으로 올 수 있습니다.

 

각 입력 값의 옆에 있는 괄호 안의 내용은 입력받아야 할 자료형을 나타냅니다.

자료형에 맞춰 노드를 연결합시다.

 

(V2)는 Vector2로 상수2벡터(Constant2Vector)를,

(S)는 스칼라(Scala)로, 상수(Constant) 노드를,

(B)는 불리언(Boolean)으로 StaticBool노드를 추가하여 연결하면 사용하실 수 있습니다.

 

※ 마우스 오른쪽 버튼으로 검색하여 찾을 수 있습니다.

 

 

각 노드의 값을 변동하면 값이 어떻게 변하는지 영상으로 살펴봅시다.

주의깊게 봐야 할 점은, 반지름(Radius)와 밀도(Density)로,

원을 그릴 때는 원형 그래디언트(Radial Gradient)로 표현해줄 수 있습니다.

 

3. 다이아몬드형 그라디언트 Diamond Gradient 와 IF

다이아몬트형 그라디언트는 아주 심플합니다. 

스칼라(Scala)로, 상수를 입력하면 자동으로 다이아몬드 그라디언트를 생성해 줍니다.

 

원형 그라디언트(Radial Gradient)와는 다르게, 다른 옵션이 없어서

도형으로 곧바로 바꾸지는 못 합니다만, 

그리고 이렇게 생성된 그라디언트를 가지고, if문을 사용하면

외곽선이 날카로운 도형으로도 바꿔 줄 수 있습니다.

 

원리는 간단합니다. A는 현재 출력되고 있는 Diamond Gradient일 것이고, 

if문은 A입력값과 B입력값을 비교해서, A>B인 경우 위 노드대로라면 1을,

A==B, A<B 인경우 , 그러니까 0.1보다 낮거나 같은 값 전체를 0으로 출력하는 기능입니다.

 

이 기능을 이용하면 손쉽게 그라디언트에서, 도형으로 바꿔 줄 수 있어요.

참고하셔서 앞으로 많은 요소들에서 응용해보시길 바랍니다 ㅎㅎ

 

---

이번 포스팅에서는 간단히 그라디언트를 생성해 보고, 이를 도형으로 바꿔 보았습니다.

하지만 이번 포스팅에는 한 가지 비밀이 숨겨져 있었는데요..!

 

다음 포스팅에 이 비밀들을 파헤쳐보는 시간을 가져보도록 하겠습니다.
다음 포스팅도 꼭 기대해 주세요!

 

읽어주셔서 감사합니다!