도형에 재질 추가하는 방법(Material) – Three.js 강좌

저번 시간에 만들어본 Geometry에 Material을 추가하는 방법을 알려드릴게요. 여러 종류의 재질이 있는데 각 재질마다 특성이 있기 때문에 천천히 살펴보시는 걸 추천드립니다. 그리고 재질은 빛에 영향을 받기 때문에 빛을 추가하는 법도 빠르게 배워볼게요. 참고로 빛은 나중에 자세히 다뤄볼 예정입니다 🙂

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

재질 Material

Three.js에서 다양한 재질을 제공합니다. 그 중 5가지를 배워볼게요.

MeshBasicMaterial

단순한 음영 방식으로 지오메트리를 표현하는 재질입니다. 해당 재질의 특성은 조명이나 음영효과가 적용되지 않습니다.

MeshStandardMaterial 

3D에서 표준 물리적 기반의 재질입니다. 유니티, 언리얼 엔진, 3D Max 이런 툴에도 MeshStandardMaterial을 기준으로 제공합니다.

MeshPhysicalMaterial

MeshStandardMaterial와 거의 동일한데 고급 물리 기반 렌더링 속성을 제공합니다. 클리어코드, 물리적 기반의 투명도, 고급 반사율 등을 활용해서 섬유나 젖은 표면, 페인트 등의 불규칙하거나 거친 표면을 표현할 수 있습니다.

MeshLambertMaterial

반사 하이라이트가 없는 광택이 없는 표면용 재료입니다. 빛을 계산해서 도형에 표현하는 방식에 대해서 물리적 기반이 아닌 Lambertian 모델을 사용합니다. MeshPhongMaterial과 비교했을 때 표현력이 조금 떨어집니다.

MeshPhongMaterial

빛을 계산해서 도형에 표현하는 방식에 대해서 Blinn-Phong 모델을 사용합니다.
Phong같은 경우는 반사 하이라이트가 있는 반짝이는 금속같은 재질을 표현는데 유리합니다. Shininess 값을 조절할 수 있는데, 클수록 표면이 더 반짝거립니다. Specular 옵션으로 반사되는 색상도 조절할 수 있어요.