VRChat 마이너 갤러리 저장소

1편에서 이어지는 글 입니다.

Le1rp는 E.RP가 금지어라 중간에 1을 넣었습니다.

1 빼고 봐주세요.

SDF 블렌딩:

또 다른 재미있는 방법은 두 SDF를 Linear Inte1rpolate 노드(줄여서 Le1rp)를 사용하여 블렌딩하는 것입니다.

이 노드는 각 SDF의 혼합 비율을 조정할 수 있게 해줍니다.

이를 통해 다음과 같은 결과를 얻을 수 있습니다.

원이 떨어지는 애니메이션이 정적인 원에 다양한 영향을 미치며, 0(정적인 원)과 1(떨어지는 원) 사이의 중간 값에서 조정하면 아름다운 눈물 방울 애니메이션을 만들 수 있습니다.

Le1rp 방식 외에도 SDF를 블렌딩하는 방법은 여러 가지가 있으며, 아마도 가장 수학적으로 유용한 방법은 아닐 것입니다.

IQ는 SDF를 혼합하기 위해 커스텀 부드러운 최소값(custom smooth minimum)을 사용합니다.

이 블렌드 기법을 구현하기 위해 커스텀 HLSL 노드를 만들었으며, 그 방법에 대해서는 나중에 설명할 것입니다.

여기서는 IQ가 사용한 수식을 보여주고 있습니다.

그는 비디오 게임 Dreams에서 영감을 받아 원래 코드를 개선하였으며, 그 게임에서 도형을 블렌딩하는 방식 중 하나였습니다.

이 글에서 나중에 커스텀 노드에 대해 좀 더 설명할 예정이니, 그 부분에 대해서는 걱정하지 마세요.

커스텀 SmoothMinimum의 결과는 Le1rp 블렌딩과는 상당히 다르지만, 블렌드는 정말 놀랍습니다.

IQ의 블렌드는 수학적으로 생성된 SDF 도형의 힘을 텍스처와 비교하여 보여줍니다.

이 두 거리 필드를 결합했을 때 생기는 고운 중간 영역은 텍스처만으로는 구현하기 매우 어렵습니다.

이 블렌드는 두 원이 서로 가까이 있을 때 거의 하나의 원으로 합쳐지며, 거리가 멀어질수록 다시 각각의 원으로 분리됩니다.

Le1rp와는 달리, Le1rp는 두 도형 중 어느 것이 더 지배적인지를 시각적으로 보여주는 가중치를 사용하는 반면,

이 블렌드는 실제로 두 도형이 가까울 때 합쳐지고 멀어질 때 분리됩니다.

블렌드의 양을 조절할 수도 있습니다.

위의 GIF에서 볼 수 있듯이, 조금만 블렌드를 사용하면 각 원이 뚜렷한 형태를 유지하고,

더 많은 블렌드를 사용하면 두 원이 하나의 큰 덩어리로 합쳐집니다.

큐빅 및 쿼드라틱 블렌드를 위한 다양한 공식도 있습니다.

제가 생각하기에 이 블렌드는 가장 간단하고 일반적인 결과를 비교적 저렴한 비용으로 얻을 수 있으므로, 여기서 데모를 보여주기로 했습니다.

하지만 다른 블렌드 방식도 살펴보고 시도해 보시면 좋겠습니다.

이제 원래의 스트로크를 다시 추가하고,

이 블렌드/결합/차집합/교집합을 사용하여 스트로크를 시간이 지남에 따라 성장시키면,

이러한 노드 몇 개의 조합만으로도 놀랍고 재미있는 애니메이션을 얻을 수 있습니다.

다시 말하지만, 이 애니메이션은 단 두 개의 원을 다양한 방식으로 블렌딩, 결합, 마스킹하여 만든 것입니다.

도형과 애니메이션의 조합은 거의 무한하며, 이는 단 두 개의 원에 불과합니다...

더 많은 도형을 추가하면 어떻게 될까요?

그럼 시작해봅시다!

SDF 도형 만들기

GLSL을 HLSL로 변환하기 - 커스텀 노드 사용

이제 커스텀 HLSL 노드를 훨씬 더 많이 사용할 때입니다.

제가 무슨 뜻인지 보여드리겠습니다.

원의 경우, 수학이 매우 간단했습니다:

하지만 더 많은 2D SDF 도형으로 들어가면 length(p) - r의 간단한 수식이 좀 더 복잡한 프로그래밍으로 바뀝니다.

예를 들어, 삼각형 모양을 만들고 싶다고 가정해 보겠습니다:

노드를 사용하여 모든 것을 재현할 수 있지만, 그렇게 하는 것은 추천하지 않습니다!

대신, 이 코드를 복사하여 Unity와 Unreal의 커스텀 HLSL 노드에 약간의 변환을 거쳐 붙여넣으면 복잡한 수학을 없앨 수 있습니다.

커스텀 SDF를 그래프에 가져오는 과정을 보여드리겠습니다.

첫 번째 단계는 텍스트를 어떤 종류의 메모장 편집기에 복사하는 것입니다:

그 다음에는 GLSL로 작성된 모든 코드를 HLSL로 변환해야 합니다.

GLSL과 HLSL은 둘 다 셰이더 코딩 언어로 매우 유사합니다.

게임 엔진은 주로 HLSL을 사용하고, Shadertoy 및 일부 웹 애플리케이션은 GLSL을 사용합니다.

IQ의 도형은 GLSL로 작성되어 있으므로, Unity나 Unreal에서 사용하기 위해 HLSL로 변환해야 합니다.

GLSL을 HLSL로 변환하는 데 도움이 되는 유용한 사이트가 있는데, 변환 방법을 모르는 경우 여기서 확인할 수 있습니다.

예를 들어, vec2를 float2로 변경해야 하는 것을 볼 수 있습니다.

GLSL 코드를 HLSL로 변환한 내용을 메모장에서 작성하여, 이를 게임 엔진에 쉽게 복사하고 붙여넣을 수 있도록 합니다.

Unity를 사용할 경우, Return을 Out =로 변경하는 추가 작업을 수행합니다.

이제 Unity에서 커스텀 함수 노드를 만들거나 Unreal에서 커스텀 노드를 만들 수 있습니다.

그런 다음 해당 코드를 적절한 섹션에 복사합니다.

언리얼의 경우:

그런 다음 SDF 함수의 입력과 출력을 노드의 입력 및 출력에 맞춰야 합니다.

출력은 항상 float이어야 하며, 입력은 SDF마다 다를 수 있습니다.

그런 다음 p에 UV 좌표를 연결해야 하며, 앞서 보여준 Constant Bias Scale을 사용해 올바른 좌표 공간에서 UV를 확인해야 합니다.

SDF를 만든 후에는 마지막에 Smoothstep 노드를 통과시켜 선명하게 하고, One Minus 노드를 사용해 색상을 반전시킵니다.

그러면 완벽한 삼각형 SDF가 생성됩니다!

Unity의 Y 좌표가 Unreal과 반대로 뒤집혀 있기 때문에 삼각형의 방향이 다릅니다.

하지만 UV를 반전하거나 미러링하는 것은 쉽기 때문에 삼각형의 올바른 방향을 맞출 수 있습니다.

또한, 삼각형이 약간 크기 때문에 UV를 조정하여 SDF의 크기를 변경할 수 있습니다.

이 SDF 삼각형 코드는 크기 매개변수가 없기 때문입니다.

Multiply 또는 Divide를 사용하면 UV 좌표의 크기를 조정할 수 있으며, 이는 SDF의 크기를 키우거나 줄이는 데 영향을 줍니다.

예를 들어, 0.5로 곱하면 삼각형이 더 커지고, GIF 예제에서처럼 2로 곱하면 삼각형이 절반으로 줄어듭니다.

저는 0으로 나누는 오류를 피하기 위해 Divide보다 Multiply를 선호합니다.

컴퓨터는 0으로 나누는 것을 매우 싫어하기 때문입니다.

그래서 대부분의 UV 크기 조정 작업에서는 Multiply를 사용합니다.

Unity에서 삼각형을 반전시키려면, 벡터의 어떤 부분을 곱할지 더 쉽게 지정할 수 있습니다.

이 경우 Y를 -2로 곱하여 삼각형을 아래로 향하도록 반전시키고 크기를 반으로 줄였으며, X를 2로 곱하여 삼각형을 절반으로 줄였습니다.

마지막으로, 몇 가지 다른 도형을 만드는 몇 가지 커스텀 HLSL 노드 예시를 보여드리겠습니다.

이를 통해 다른 SDF를 변환하는 예를 확인할 수 있습니다:

이제 여러 SDF를 결합하고, 스트로크를 추가하며, 모서리를 둥글게 만들고, 애니메이션을 적용하여 다양한 효과를 만들 수 있습니다.

SDF를 탐색하기 시작했을 때, 다양한 방법으로 애니메이션하고 결합함으로써 정말 멋진 결과를 얻을 수 있다는 사실에 놀랐습니다.

여기 제가 시간과 크기를 조정하여 실험해본 몇 가지 랜덤 Le1rp 애니메이션이 있습니다:

SDF의 무한한 옵션을 즐기세요!

다음에는 의사 랜덤으로 SDF 패턴, 시간, 및 파티클 시스템과 같은 애니메이션을 생성하는 방법에 대해 알아보겠습니다.

이것은 그다지 좋은 예시는 아니지만, 다른 생각이 떠오르지 않았습니다.

이렇게 끝이 났습니다.

사실 이번 글은 노드를 사용하는게 대부분이라 실 적용은 어렵지만, 이해하는데는 많은 도움이 될 것이라고 생각합니다.

저자는 다음에 의사 랜덤에 관한 글을 쓴다고 했는데, 다음글은 보이지 않네요.

여기서 마무리하고, 실험을 해본 뒤에 포이요미에서 적용하는 방법을 알아보겠습니다.

감사합니다.