[Blender] Volumetric Fluid (유체 볼륨) glb/gltf에서 사용하기

이전에 glb/glft 파일로 웹에서 물결을 표현하기 위해서 nodetoy 사이트의 셰이더를 이용한 적이 있다.

아쉬운 부분은 하나의 평면 메쉬에 대해서 물결치는 느낌을 줄 수밖에 없었다는 점이다. 원형 평면의 테두리를 조금 말아서 볼륨있게 만들기는 했다.

NodeToy

 

 

---

 

 

블렌더 자체에서 [Wave] Modifier를 이용해 유체 볼륨을 표현한 유튜브를 참고하여 응용해보았다.

 

 

먼저, UV Sphere를 새로 하나 만들고, 메쉬를 더 높게 설정하였다. 이후 위에 반을 날리고 Fill로 채운다.

 

 

"I" 단축키를 눌러 Inset으로 윗 면을 나눈 후 마지막에는 "M" 단축키를 눌러 [At Center] 설정을 한다.

 

 

유체의 움직임이 들어갈 윗면을 선택한 후 "Ctrl + G" 키로 새로운 그룹으로 지정한다.

 

 

[Wave] Modifier를 추가하고 세팅하면 스페이스바를 눌렀을 때 애니메이션으로 윗 면이 파동치는 것을 볼 수 있다.

 

 

이 웨이브를 블렌더 바깥에서도 사용하기 위해서는 export 할 때 [Apply Modifiers]를 체크하는 방법을 떠올릴 수 있지만 결국 Apply 하게 되면 해당 프레임에 고정이 되어버린다.

이 부분을 극복하기 위해 새로운 Addon을 설치한다. "mdd"를 입력하여 나오는 Addon을 설치하면 된다.

 

 

[Export] - [Lightwave Point Cache (.mdd)] 옵션으로 export 한다. 그리고 Modifier의 [Wave]를 삭제한다.

 

 

이제 다시 [Import] - [Lightwave Point Cache (.mdd)]를 통해서 .mdd 파일을 불러오면, Modifier는 비어있지만 애니메이션 Key가 생성되어있는 것을 볼 수 있고 애니메이션을 실행하면 잘 움직이는 것을 볼 수 있다.

 

 

이제 그대로 glb/gltf export를 하면 웹에서도 사용할 수 있게 된다.

웹에 띄우기 전에 액체 표현을 위해서 조금 응용해본다.

 

 

---

 

 

이전 글인 glb/gltf export 매뉴얼을 참고하면 이해하는 데에 도움이 된다.

[Blender] Unity용 glb/gltf export 매뉴얼

투명 표현은 Khronos Group의 텍스쳐와 셰이딩 세팅을 참고했다.

 

glTF-Sample-Models/2.0/IridescentDishWithOlives at main · KhronosGroup/glTF-Sample-Models

 

Texture 1: Metalllic/Roughness

 

Texture 2: Volume Thickness로 사용될 텍스쳐

 

 

위의 텍스쳐를 이용해서 셰이더를 구성했다.

- BaseColor Texture의 Green 채널은 Roughness로, Blue 채널은 Metallic으로 연결

- IOR 1.5, Alpha 1.0 설정

- Transmission Weight 1.0 설정

- [Volume Absorption] 노드 생성하여 [Material output] 노드의 "Volume" 부분에 연결

- gltf Addon 설치 후 [Shader Editor Add-ons] 체크하여 [glTF Material Output] 노드 생성

- [glTF Material Output] 노드 앞에 [Math] 노드의 [Multiply] 세팅으로 Volume 텍스쳐의 Green과 곱셈 계산

 

 

---

 

우측 메테리얼 설정에서는,

- [Backface Culling] 체크

- [Blend Mode] - [Opaque] 설정

- [Screen Space Refraction] 체크

- [Viewport Display] - [Roughness]를 0.4로 설정

 

 

---

 

 

결과를 보면 투명함에 반사까지 있으며 뒷편의 배경이 물에 굴절되어 왜곡 현상까지 표현되는 것을 볼 수 있다.