※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다.
내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다.
0. 사용 텍스쳐
이번 포스팅에서 사용될 텍스쳐 이미지입니다.
1. 회전공식
회전의 경우는, 수학 수식으로 계산해야 할 필요가 있습니다.
이 경우, 사용되는 것이 바로, "회전변환 행렬"입니다.
수학 수식으로 정리하면 아래와 같습니다.
x' = x × cos × θ - y × sin × θ
y' = x × sin × θ + y × cos × θ
이 수식의 유도와 설명은 유튜브에 많이 되어 있고,
제가 수포자이기 때문에 아쉽지만 길게 설명드리는 것은
아무래도 어려울 것 같습니다. 😅😅😅
대신 제가 참고한 유튜브 영상을 공유 드리겠습니다.
1. OZTV님 [수포자를 위한 게임수학] : https://www.youtube.com/watch?v=DkRd2OtctRU&list=PL-xqYJ8bjgMC-p94R7iXjFCs-znRg93PJ&index=21
2. 파깨비TV [이공계 게임수학] : https://www.youtube.com/watch?v=OVPyMijFiEQ
이 외에도 유튜브에 수학 수식을 설명하는 영상이 많으므로,
관련 내용을 같이 참조하시는 것이 좋을 듯 합니다.
2. UV 세팅( 스케일 및 오프셋 정리)
먼저 시작하기 전에 좌표계를 정리하겠습니다.
좌표계는 (-1 ~ 1)로 설정해야 회전 반경을 설정하는 것이 조금 더 용이합니다.
그래서 사전 설정에서 그림과 같은 좌표로 옮겨 주는 작업 부터 시작하겠습니다.
기본적인 구조는 아래와 같습니다.
2-1. 각 채널별로 -0.5씩 뺀다.
R(-0.5 ~ 0.5), G(-0.5 ~ 0.5)로 만들어서 좌표계의 중심을 가운데로 이전시킨다.
2-2. 곱하기 2로 -1 ~ 1 값의 범위로 만들어준다.
배율을 조정해서 -1 ~ 1 의 범위로 표현되도록 만든다.
2-3. 연산 진행 후, 더하기 0.5로 텍스쳐의 중심으로 보정값을 더해 준다.
마지막으로 이미지는 0,0으로 배치되기 때문에, 0.5만큼을 다시 더해줘서
이미지의 중심과 표현 될 머티리얼 영역의 중심을 맞춰 준다.
이제 텍스쳐 노드 링크의 연결을 끊고 이제 '회전'을 연산을 추가하겠습니다.
3. 회전 연산 만들기 + 파라미터 적용하기
이제 수식을 노드로 구현해보겠습니다.
아래 단계별로 차근차근 진행해 보겠습니다.
3-1) x' = x × cos × θ - y × sin × θ 만들기
먼저 이전에 연산한 UV 값에서, 채널만 떼어 내겠습니다.
omponentMask를 사용하면 R채널이든, G채널이든 떼어 낼 수 있습니다.
떼어낸 채널과 Sine, Cosine을 배치하여 위 이미지와 같이 배치하고 연결합시다.
*마우스 오른쪽 버튼으로 sine과 Cosine 노드를 배치할 수 있습니다.
덧붙여서 추후 다른 챕터에서 설명하겠지만, θ는 숫자로 만들면 오히려 이해하기 힘드므로,
'파라미터'라는 것을 만들어서 θ를 관리해 줄 것입니다.
상수 노드를 마우스 오른쪽 클릭하면 '파라미터'로 만들어 줄 수 있는데,
θ 파라미터를 만들어서 값을 입력할 수 있도록 설정하겠습니다.
파라미터는 같은 값을 보유하기 때문에,
그 어떤 노드에서 값을 변경하더라도,
모두 값이 변하는 특성을 지니고 있습니다.
θ값을 한번에 변경이 가능하니 참고하셔서
머티리얼 제작 시에 종종 활용하시길 바랍니다.
y' = x × sin × θ + y × cos × θ 만들기
1번의 과정을 똑같이 반복하시면 됩니다.
먼저 이전에 연산한 UV 값에서, 채널만 떼어 내겠습니다.
ComponentMask를 사용하면 R채널이든, G채널이든 떼어 낼 수 있습니다.
그리고 X sine θ에 Y cos θ 를 연산하신 뒤에 add로 더하시면 준비가 완료됩니다.
3-3) append로 UV 형태로 다시 맞춰주기
Append 노드로 UV 형태로 다시 합쳐 준 뒤,
보정치 add를 다시 연결해 주고, 텍스쳐를 연결하면 완성됩니다.
그러면 이제 θ값만을 조절하면, 회전이 적용된 것을 확인하실 수 있습니다.
이 부분 설명을 최대한 쉽게 한다고 했는데..
수학 수식에 맞춰 머티리얼을 적용하는 것을 글로
설명하려다 보니 분량과 난이도가 좀 갑자기 수직상승하는 느낌이라 송구스럽습니다 ㅠㅠ
다음 포스팅부터는 이렇게 복잡하진 않고,
머티리얼에서 다루는 기능에 대해서만 간략히 다뤄 볼 것 같습니다.
그럼 다음 포스팅에서 뵙겠습니다.
'Unreal5로 UI만들어보기 > 0) Material 다루기' 카테고리의 다른 글
| 10-1. 머티리얼 함수 (1) : UVMasking 함수 제작과 순서 (0) | 2023.03.06 |
|---|---|
| 9. 그래픽 요소 만들기 (1) 그라디언트와 IF로 도형 그리기 (0) | 2023.03.03 |
| 7. 텍스쳐 다루기 (1) 이동(Translate), 배율(Scale) 기능 만들기 (3) | 2023.02.28 |
| 6.이미지 합성과 Linear interpolate (2) | 2023.02.27 |
| 5. 머티리얼 적용 (1) 텍스쳐, UV와 워크플로우 (2) | 2023.02.24 |
