[SHADER] 재미있는 UV의 세계 // Vector2((x+(y*a)), y) / 하트

[SHADER] 재미있는 UV의 세계

 - Vector2((x+(y*a)), y)

 - UV 하트 만들기

 

 

 히히 오늘도 재미있는 것을 해보았다.

---

Vector2((x+(y*a)), y)

 

 만약 3D에서 UV의 변경 없이 버텍스 위치만 이동한다면, 자연스럽지 못하고 하단에 포함한 이미지같이 맵핑이 생각한 것과 다르게 찌그러질 때가 대부분이다.  특히나 폴리곤 형태에서 삼각형의 모습으로 찌그러지는 부분이 많은데 이것을 해결하는 것은 사실상 불가능하다.

 

 VFX에서 자주 쓰이는 UV 왜곡이 방식이 있는데, 하단에 첨부한 gif의 결과물을 얻을 수 있는 공식이 있다.

 

 

 바로 벡터 ((x+(y*a)), y) 이다.

 

 하단에 첨부한 그래프에서 볼 수 있듯이, a 값이 증가함에 따라 그래프의 기울기가 증가하게 된다.  즉, 벡터의 위치가 더 가파르게 이동하게 된다.

 

 a 값이 0인 경우, 그래프는 y 축에 수직인 직선, a 값이 1인 경우, 그래프는 x 축에 기울어진 직선이 된다.

 

 Shader graph에서는 이렇게 짤 수 있다.

 

 이런 것들은 알고 보면 아무것도 아니지만, 필요할 때 아이디어가 떠오르지 않을 때가 있어 미리 만들어 놓고 사용하면 좋을 것 같다.

---

UV 하트 만들기

 

 시작은 Polar Coordinates 노드에서 시작한다.

 

 Polar coordinates 는 평면상의 한 점을 나타내기 위해 사용되는 좌표 시스템이다.  이것은 점을 거리와 방향으로부터의 각도로 표현한다.

 

 Shader graph 노드를 보면 점을 Center 값으로, 거리를 Radial Scale, 방향(각도)을 Length Scale로 나타내기 때문에 조금 헷갈릴 수 있는 것 같다.

 

 Polar coordinates의 코드는...

void Unity_PolarCoordinates_float(float2 UV, float2 Center, float RadialScale, float LengthScale, out float2 Out)
{
    float2 delta = UV - Center;
    float radius = length(delta) * 2 * RadialScale;
    float angle = atan2(delta.x, delta.y) * 1.0/6.28 * LengthScale;
    Out = float2(radius, angle);
}

 

 하트의 크기를 변경하기 위해서는 이렇게 변경하면 된다.  하지만 수치를 너무 키워 버리면 하트의 형태가 뭉개지는 안타까움을 볼 수 있다...

---

그래프 생성 사이트 : https://www.desmos.com/calculator?lang=ko