[Houdini+ShaderGraph] 전송 장치 효과
10982 단어 UnityHoudiniShader Graphtech
도구 사용
Unity2021.2.0b13
Houdini
Photoshop
Substance Designer
샘플 데이터(GiitHub)
이번 컨베이어 효과는 GiitHub에서 공개 중입니다.
(Houdini 항목 제외)
효과 확장
효과의 구성은 다음과 같다.
![](https://s1.md5.ltd/image/945d79be5202e3d6e95a0948aba6f780.png)
육각형 표현식
육각형이 상승하는 표현은 후디니를 활용한 3D 모델이다.
![](https://s1.md5.ltd/image/a7daafdbd36487dfb5cad81695434424.png)
육각형 표현식
3D 모델(Houdini)
원통에 육각형을 깐 3D 모델입니다.
애니메이션에 필요한 정보를 정점 색상으로 올립니다.
통로.
디테일
용도
R
육각형 점차적 변화
육각형 패턴 생성하기
G
Y 방향 그래디언트
Y 방향 애니메이션 시간 지연
![](https://s1.md5.ltd/image/20ee319731f51ceb67d5cc2a40439e2b.png)
다음 노드에서 3D 모델을 만듭니다.
![](https://s1.md5.ltd/image/e31e28f6c5d2aebe61d40b8e78688e7d.png)
단계 1: 육각형 생성
Circle 노드를 사용하여 다음과 같은 육각형을 생성합니다.
![](https://s1.md5.ltd/image/1a132d9c59477a9cf939edfa4f13353c.png)
![](https://s1.md5.ltd/image/8d94046270c36c2278141974e2df3b96.png)
2단계: 교점 색상 설정
중심점에 색상 0(검정)을 지정하고 바깥쪽 점에 색상 1(흰색)을 지정하여 안쪽에서 바깥쪽으로 그래디언트를 생성합니다.
중심 점의 번호는 0이므로 포인트 0에 색상 0을 지정합니다.
![](https://s1.md5.ltd/image/d0a76b99267389c97cba412e88a0349f.png)
![](https://s1.md5.ltd/image/52d1c8091528ec5d679017d42cfd4eb3.png)
신중을 기하기 위해 번호 0 이외의 점에 색상 1을 할당합니다.(Circle 제작 후 얼마 되지 않은 형상에 정점 색상 1이 설정되어 있어 결과는 변경되지 않습니다.)
![](https://s1.md5.ltd/image/1f0690c0d7f491d0cd3bc1471b2bfcff.png)
3단계: 육각형 정렬
평면에 육각형을 간격 없이 배열하다.
![](https://s1.md5.ltd/image/241362fc9066a87f4453d8ebe98c63ac.png)
인접한 육각형 생성하기
육각형을 X방향 1.5, Y방향 0.5\sqrt3으로 오프셋하여 인접한 육각형을 구한다.
![](https://s1.md5.ltd/image/6774824c68b61f3804a11d70874171df.png)
Copyand Transform 노드에서 육각형을 X 방향으로 1.5, Y 방향으로 0.5\sqrt 3으로 오프셋합니다.
Total Number는 2로 설정됩니다.
![](https://s1.md5.ltd/image/3793d59962bda30015b2584cdb0ff5b3.png)
![](https://s1.md5.ltd/image/71110c19d607502cf0279b0f72169d3b.png)
여러 개의 육각형을 수평으로 배열하다
육각형의 위치를 X 방향으로 3으로 이동하면 인접한 육각형을 구한다.
![](https://s1.md5.ltd/image/c059e19d53a03d5cc2839cd0a4dc75a0.png)
Copyand Transform 노드에서 3회씩 오프셋된 데이터를 복제합니다.
Total Number는 원하는 값입니다.
![](https://s1.md5.ltd/image/eb5939c07ff3fe10277a30c738517e0b.png)
![](https://s1.md5.ltd/image/d7f052b33c85ab7b6467ac4ccc75a778.png)
육각형을 세로로 배열하다
양의 육각형을 Y 방향으로 옮기면 세로와 인접한 육각형을 구한다.
![](https://s1.md5.ltd/image/3061a79f0100b5207f905aa1b8890ea6.png)
Copyand Transform 노드에서 Y 방향으로 육각형을 차례로 틀린 sqrt(3)를 복사합니다.
Total Number는 원하는 값입니다.
![](https://s1.md5.ltd/image/070e3a1ac4c56a1507e737cdc7b265c1.png)
![](https://s1.md5.ltd/image/c9aa45af99dea89305c5e85bc892803e.png)
Copy 및 Transform 노드의 Total Number 수를 조정하여 육각형의 밀도를 높입니다.
![](https://s1.md5.ltd/image/241362fc9066a87f4453d8ebe98c63ac.png)
4단계: 평면에서 원통으로 좌표 변환
3단계에서 생성한 평면의 육각형 기와 조각(이미지 왼쪽)에 좌표 변환을 적용한 다음 원통형(이미지 오른쪽)으로 변환합니다.
![](https://s1.md5.ltd/image/24d56c5648db3276e9865fa3c4914755.png)
좌표 변환 정보(수학)
좌표 변환 정보(수학)
원래 교점의 X 좌표를 호도로 계산하고 Y 좌표를 원통의 Y 좌표로 계산합니다.
이렇게 하면 평면을 원통으로 변환할 수 있습니다.
N개의 정육각형을 배열한 가로 길이 1.5N은 원통의 2\pi에 해당한다.
![](https://s1.md5.ltd/image/fb2740a5bc700e1618707754574d00be.png)
1.5N 길이 내보내기
N개의 양의 육각형을 가로로 배열할 때 원통을 한 바퀴 도는 전체 길이를 다음과 같이 구할 수 있다.
![](https://s1.md5.ltd/image/4d702dbe868d169eb304854579fedc66.png)
VEX를 통한 구현
AttributeWrangle 노드를 사용하여 좌표 변환을 수행합니다.
![](https://s1.md5.ltd/image/b3fa80ec557a67ad27c7300fbc520269.png)
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 방향의 동작 편차를 만드는 데 사용됩니다.
![](https://s1.md5.ltd/image/0e9f4eeeeadec3155daaed96dded04d4.png)
![](https://s1.md5.ltd/image/5931c7fdbd8ac0b9058aefd2d127d10d.png)
그리고 이 모형을 FBX로 출력하면 완성됩니다.
FBX 출력에는 Houdini Indie 라이센스가 필요합니다.
육각형 애니메이션용 면도기
육각형을 나타내는 섀도우를 생성합니다.
시간 매개 변수인 Animation Time을 사용하여 애니메이션을 제어할 수 있습니다.
음영도는 다음과 같이 실시되었다.
Step 추출 선을 6각형 그래디언트(교점색 R 채널)에 적용합니다.
Step 임계값의 경우 시간 및 Y 방향 그래디언트(정점 색상 G 채널)를 뺀 애니메이션을 육각형으로 이동합니다.
![](https://s1.md5.ltd/image/6462d6fdcf12898467ba1735f80fe8b5.png)
카리스마 표현
각도에 따라 농도가 다른 아우라를 만들어 보았다.
정면으로 볼 때는 카리스마 컬러가 진하고 위에서 볼 때는 카리스마 컬러가 옅어진다.
![](https://s1.md5.ltd/image/5bc0c58ef1d4638debb37081ad5c5a3f.png)
각도에 따라 농도를 바꾸다
각도 농도에 따라 다르게 표현하기 위해서는 시선 벡터와 Y축 위 방향 벡터의 내적을 이용하십시오.
다음 그림의 u는 Y 방향 벡터(0, 1, 0)를 나타내고 v는 카메라 방향 벡터를 나타냅니다.
v 벡터는 ShaderGraph의 View Direction 노드에서 사용할 수 있습니다.
u·v는 u와 v의 내적을 나타낸다.
![](https://s1.md5.ltd/image/cdb95376a2741458d6f7b7ddcddc78c0.png)
내적(u·v)은 카메라의 위치가 높아질 때 큰 값을 취하고, 카메라의 높이가 내려가면 작은 값을 취한다.
이것을 알파로 이용하면 각도에 따라 농도가 다른 카리스마를 표현할 수 있다.
이번에는 카메라 위치가 높아지면 얇아진다는 것을 보여주고 싶어 1.0에서 내적 결과를 빼고 0-1로 반전했다.
![](https://s1.md5.ltd/image/aabd35c89946781b0f80ec712cb6d528.png)
ShaderGraph로 이루어진다면 다음과 같다.
![](https://s1.md5.ltd/image/414664c0d4e1a48db96c7012242d8f5b.png)
샤넬 효과
샤넬 효과는 육각형과 다른 원통에 붙어 있다.
![](https://s1.md5.ltd/image/c6034a46edf01d8bbf12adec9ba950ee.png)
ShaderGraph 구현은 다음과 같습니다.
![](https://s1.md5.ltd/image/1fa1c28654f52b2fe39c0b6a2f1c24ac.png)
![](https://s1.md5.ltd/image/e6a27d2dda0ae8c5c995f0eabe8eafda.png)
Reference
이 문제에 관하여([Houdini+ShaderGraph] 전송 장치 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/r_ngtm/articles/shadergraph-teleport-vfx텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)