[Web] glb 파일 포맷 -NodeToy 팁(Fresnel 효과, Object Scale 사용하기)

---

 

 

Three.js 기반에 사용될 glb포맷 모델링과 이펙트 만들어야 하는 입장에서, Blender와 NodeToy는 아주 중요한 역할을 하고 있다.

 

 

웬만한 이펙트 작업은 Blender에서 Govie Tool을 이용한 파티클 애니메이션으로 이루어지지만 블렌더에서 glb 포맷으로 지원되지 않는 제한 사항이 많이 있다.

 

 

블렌더에서 glb로 넘어가지 않는 효과는 Fresnel 효과가 있다.

프레넬 효과는 여러모로 가끔씩 쓰이는데 View Direction에 따라 다른 효과를 낼 수 있다. 이전 글에서는 유니티에서 만든적이 있다.

[Unity] URP 셰이더 프레넬 셰이더(Fresnel Shader)

 

 

어쨌든 프레넬 효과는 블렌더에서도 지원하는데 IOR 또는 Alpha에 연결하여 사용할 수 있다.

문제는 이렇게 설정을 해도 glb로 export 되지 않는다는 것!

이 때 NodeToy를 이용하여 셰이더 스크립트를 만들면 glb에서도 사용할 수 있다.

 

 

---

 

 

간단하게, NodeToy에서 Opacity 부분에 Fresnel 효과만 연결하고 적당한 Power 값을 적용하면 쓸 수 있다!

 

 

Self hosted - ThreeJS - Shader Data를 다운로드 받아서 프론트엔드 엔지니어에게 전달하면 웹에서 적용된 것을 잘 볼 수 있다.

 

 

---

 

 

이 효과를 응용해보면,

Blender에서는 구(Sphere) 모델링에 Scale 애니메이션을 부여하여 작은 구에서 큰 구로 커지게 한다.
NodeToy에서는 Scale이 작았을 때 Fresnel Power가 낮아서 진했다가 Scale이 커지면서 Fresnel Power가 같이 커져서 연해지는 효과를 준다.

 

 

처음에는 이 두 툴 사이를 어떻게 연결시켜서 생각해야 하는지 고민했다.

왜냐하면 NodeToy에서는 Fresnel Power를 바꿀 수는 있지만 블렌더의 스케일 애니메이션을 받아올 수 없었고,

블렌더에서 점점 연해지는 효과를 주자니 이미 NodeToy의 셰이더 스크립트를 사용해야 하고 Alpha와 같은 메테리얼에 대한 애니메이션이 glb로 넘어가지지 않는다.

 

 

그러던 중 NodeToy에 스케일 관련 노드가 없는지 살펴보다가 Object Scale 노드가 있어서 사용해보았다.

 

 

Object Scale을 받아와서 If 구문에 의해서 스케일이 1과 같거나 작으면 Fresnel Power를 2로 설정하고, 스케일이 1보다 크다면 Fresnel Power를 5로 설정하였다. 즉, 스케일이 작으면 Power가 낮아져서 진한 프레넬 효과를 내고, 스케일이 일정 크기 이상 커진다면 Power가 높아져서 프레넬 효과가 연해질 것이다.

 

 

해당 노드로 이루어진 셰이더 스크립트와 블렌더의 애니메이션을 합치면 이런 느낌이 난다.

애니메이션에 들어있는 스케일 값을 가져와서 적용이 된 것이다!

 

 

아쉽게도 뭔가 자연스럽게 투명해지지 않는다.

하나의 조건문을 통과했기 때문에 그 스케일 일 때 기준이 되기 때문이다.

자연스럽게 되기 위해서는 여러 조건문을 통과시키거나 다른 방법을 찾아봐야겠다.

Else If 노드가 없어서 어떻게 해야하는 지는 고민 중...