[Blender] glb/gltf 3D 포맷에서 글래스모피즘(GlassMorphism) 효과 만들기

 

 

 

---

 

 

개요

글래스모피즘(GlassMorphism)이란?

- 유리처럼 반투명하고 흐릿한 시각 효과를 주는 디자인 트렌드. 배경 효과로 Gaussian Blur를 주로 사용한다.

 

 

이런 효과를 3D 모델에서도 볼 수 있는 방법에 대해서 연구해보고 적용해보았다.

 

 

---

 

 

적용 방법

예전에 작성했던 글에서 비슷한 기능을 사용했던 적이 있다.

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

 

 

Three.js의 예시도 참고했다.

three.js examples

 

 

투명과 굴절 효과를 glb/gltf 포맷에 주기 위해서는 블렌더 툴에서 [Volume Absorption], [glTF Material Output] 노드가 중요한 역할을 한다. IOR 값과 Transmission 값도 중요하다.

 

 

기본적인 구조는 아래와 같다. 각각의 값을 변경했을 때 어떻게 변화하는 지를 살펴보자.

([glTF Material Output] 노드를 사용하기 위해서는 Add-ons의 glTF 2.0 format에서 [Shader Editor Add-ons] 체크가 활성화 되어있어야 한다. 구체적인 설명은 해당 노드 부분에서.)

 

 

---

 

 

[BaseColor]

말 그대로 반투명 개체 자체의 색을 바꾸는 값이다. 조금만 진한 색을 설정해도 3D 뷰에서 많이 진해지기 때문에 연한 색을 사용하기를 추천한다.

#ECE7FF

#CDBAFF

 

 

[Metallic]

반투명 개체의 환경맵 반사에 관여한다. 값이 높을수록 뒤의 개체가 안보이고 금속성 재질을 갖는다.

Metallic 0 / 0.5 / 1

 

 

[Roughness]

반투명 개체의 노이즈를 결정한다. 값이 낮을수록 투명한 유리처럼 투과되어 보이고 값이 높을수록 뒤의 개체가 잘 보이지 않게 된다.

Roughness 0 / 0.5 / 1

 

 

[IOR]

Index of Refraction의 줄임말로, 굴절률에 영향을 준다. Default 값은 1.450이다.

IOR 1 / 1.45 / 2

 

 

[Alpha]

반투명 개체 자체의 투명도를 조절한다.

Alpha 0 / 0.5 / 1

 

 

[Transmission]

Alpha와 비슷한 투명도 조절 값이지만 Alpha는 물체 자체의 단순 투명이라면 Transmission은 유리 재질에 관련된 굴절 및 반사를 반영하는 투명을 적용할 수 있다.

Transmission 0.5 / 0.7 / 1

 

 

[Volume Absorption]

Volume Absorption 값은 개체의 볼륨이 빛을 흡수하는 정도를 조절한다.

테스트 결과, 뒤에 설명할 [gltf Material Output] 노드의 [Thickness] 값을 살짝 주면 이 기능이 적용되는 것을 알 수 있었다.

[gltf Material Output] - [Thickness] - [0.01] 적용, [Color]는 많이 어둡게 적용

Density 0 / 10 / 50

 

 

[glTF Material Output]

해당 노드를 사용하기 위해서는 Add-ons의 glTF 2.0 format에서 [Shader Editor Add-ons] 체크가 활성화 되어있어야 한다.

 

 

활성화 되었다면 블렌더 Shader Editor에서 [glTF Mateiral Output] 노드를 검색해서 사용할 수 있게 된다.

 

 

[Occlusion] 값은 딱히 영향 주는 부분에 대해 발견하지 못했고, [Thickness] 값은 반투명 개체 두께에 따른 굴절률이 적용되는 것을 볼 수 있었다.

Thickness 0 / 0.5 / 1

 

 

 

---

 

 

Three.js 환경 적용 예시