[Houdini+ShaderGraph] 전송 장치 효과

10982 단어 Unity Houdini Shader Graph tech

Tales of ARISE의 이동 장치를 참고해 다음과 같은 효과를 만들어 봤다.

도구 사용

Unity2021.2.0b13
Houdini
Photoshop
Substance Designer

샘플 데이터(GiitHub)

이번 컨베이어 효과는 GiitHub에서 공개 중입니다.
(Houdini 항목 제외)

효과 확장

효과의 구성은 다음과 같다.

육각형 표현식

육각형이 상승하는 표현은 후디니를 활용한 3D 모델이다.

육각형 표현식

3D 모델(Houdini)

원통에 육각형을 깐 3D 모델입니다.
애니메이션에 필요한 정보를 정점 색상으로 올립니다.
통로.
디테일
용도
R
육각형 점차적 변화
육각형 패턴 생성하기
G
Y 방향 그래디언트
Y 방향 애니메이션 시간 지연

다음 노드에서 3D 모델을 만듭니다.

단계 1: 육각형 생성

Circle 노드를 사용하여 다음과 같은 육각형을 생성합니다.

2단계: 교점 색상 설정

중심점에 색상 0(검정)을 지정하고 바깥쪽 점에 색상 1(흰색)을 지정하여 안쪽에서 바깥쪽으로 그래디언트를 생성합니다.
중심 점의 번호는 0이므로 포인트 0에 색상 0을 지정합니다.

신중을 기하기 위해 번호 0 이외의 점에 색상 1을 할당합니다.(Circle 제작 후 얼마 되지 않은 형상에 정점 색상 1이 설정되어 있어 결과는 변경되지 않습니다.)

3단계: 육각형 정렬

평면에 육각형을 간격 없이 배열하다.

인접한 육각형 생성하기

육각형을 X방향 1.5, Y방향 0.5\sqrt3으로 오프셋하여 인접한 육각형을 구한다.

Copyand Transform 노드에서 육각형을 X 방향으로 1.5, Y 방향으로 0.5\sqrt 3으로 오프셋합니다.
Total Number는 2로 설정됩니다.

여러 개의 육각형을 수평으로 배열하다

육각형의 위치를 X 방향으로 3으로 이동하면 인접한 육각형을 구한다.

Copyand Transform 노드에서 3회씩 오프셋된 데이터를 복제합니다.
Total Number는 원하는 값입니다.

육각형을 세로로 배열하다

양의 육각형을 Y 방향으로 옮기면 세로와 인접한 육각형을 구한다.

Copyand Transform 노드에서 Y 방향으로 육각형을 차례로 틀린 sqrt(3)를 복사합니다.
Total Number는 원하는 값입니다.

Copy 및 Transform 노드의 Total Number 수를 조정하여 육각형의 밀도를 높입니다.

4단계: 평면에서 원통으로 좌표 변환

3단계에서 생성한 평면의 육각형 기와 조각(이미지 왼쪽)에 좌표 변환을 적용한 다음 원통형(이미지 오른쪽)으로 변환합니다.

좌표 변환 정보(수학)

원래 교점의 X 좌표를 호도로 계산하고 Y 좌표를 원통의 Y 좌표로 계산합니다.
이렇게 하면 평면을 원통으로 변환할 수 있습니다.
N개의 정육각형을 배열한 가로 길이 1.5N은 원통의 2\pi에 해당한다.

1.5N 길이 내보내기
N개의 양의 육각형을 가로로 배열할 때 원통을 한 바퀴 도는 전체 길이를 다음과 같이 구할 수 있다.

VEX를 통한 구현

AttributeWrangle 노드를 사용하여 좌표 변환을 수행합니다.

convert_to_tube

int num_x = chi("num_x"); // 六角形の数
float radius = chf("radius"); // 円柱の半径
float hexSize = chf("hex_height"); // 六角形の高さ

// バウンディングボックスの最小・最大を求める
vector min, max;
getbbox(geoself(), min, max);

// X座標を範囲 0~1.5Nから 0~2πへ変換したものをラジアンΘとして扱う
float x = @P.x;
float size_x = 1.5 * num_x;
float radian = efit(x, min.x, min.x + size_x, 0, 2.0 * $PI);

// Y座標
float y = @P.y * hexSize;

// 円柱座標の計算
@P = set(cos(radian) * radius, y, sin(radian) * radius);

단계 5: 교점 색상 G 설정

정점 Y 좌표가 0~1 범위에 위치하도록 범위를 변환하고 정점 색상 G 채널에 저장합니다.
이 정보는 육각형 애니메이션 Y 방향의 동작 편차를 만드는 데 사용됩니다.

그리고 이 모형을 FBX로 출력하면 완성됩니다.
FBX 출력에는 Houdini Indie 라이센스가 필요합니다.

육각형 애니메이션용 면도기

육각형을 나타내는 섀도우를 생성합니다.
시간 매개 변수인 Animation Time을 사용하여 애니메이션을 제어할 수 있습니다.
음영도는 다음과 같이 실시되었다.
Step 추출 선을 6각형 그래디언트(교점색 R 채널)에 적용합니다.
Step 임계값의 경우 시간 및 Y 방향 그래디언트(정점 색상 G 채널)를 뺀 애니메이션을 육각형으로 이동합니다.

카리스마 표현

각도에 따라 농도가 다른 아우라를 만들어 보았다.
정면으로 볼 때는 카리스마 컬러가 진하고 위에서 볼 때는 카리스마 컬러가 옅어진다.

각도에 따라 농도를 바꾸다

각도 농도에 따라 다르게 표현하기 위해서는 시선 벡터와 Y축 위 방향 벡터의 내적을 이용하십시오.
다음 그림의 u는 Y 방향 벡터(0, 1, 0)를 나타내고 v는 카메라 방향 벡터를 나타냅니다.
v 벡터는 ShaderGraph의 View Direction 노드에서 사용할 수 있습니다.
u·v는 u와 v의 내적을 나타낸다.

내적(u·v)은 카메라의 위치가 높아질 때 큰 값을 취하고, 카메라의 높이가 내려가면 작은 값을 취한다.
이것을 알파로 이용하면 각도에 따라 농도가 다른 카리스마를 표현할 수 있다.
이번에는 카메라 위치가 높아지면 얇아진다는 것을 보여주고 싶어 1.0에서 내적 결과를 빼고 0-1로 반전했다.