Three.js 재료 완전 정복! 현실감부터 카툰 스타일까지 한눈에 보기

안녕하세요, 코드아키텍트입니다.

오늘은 Three.js에서 재료(Material)에 대해 공부한 내용을 정리해보려고 합니다.

---

 

5가지 재료 + 1

Material을 한국어로 ‘재료’라고 번역할 수 있지만, 한국어로 쓰면 조금 어색한 느낌이 들긴 하죠. 어쨌든, Three.js에는 5가지 주요 재료 + 1가지가 존재합니다. 왜 굳이 +1이라고 표현했는지는 글을 읽어보시면 자연스럽게 알게 되실 거예요.

먼저 다섯 가지 기본 재료는 다음과 같습니다:

• MeshBasicMaterial
• MeshLambertMaterial
• MeshPhongMaterial
• MeshStandardMaterial
• MeshPhysicalMaterial

이 재료들은 모두 3D 지오메트리를 얼마나 사실적으로 표현할지에 따라 선택하게 됩니다. 다시 말해, 프로젝트의 목표가 현실의 물체를 얼마나 리얼하게 묘사할지에 달려 있다면, 위 재료들 중에서 고르면 됩니다.

 

---

 

+1의 정체: MeshToonMaterial

혹시 게임을 많이 해보셨다면 카툰 렌더링이라는 말을 들어보셨을 겁니다. 만화처럼 보이는 셰이딩 방식이죠. 이에 대응되는 재료가 바로 MeshToonMaterial입니다.

아래 예시 그림처럼 명암이 뚜렷하게 나뉘는 셰이딩을 확인할 수 있습니다.

이런 스타일이 필요한 경우라면 MeshToonMaterial이 제격입니다. 프로젝트의 성격에 따라 적절한 재료를 선택하는 게 중요하겠죠?

---

 

그럼, 어떤 재료를 선택해야 할까?

저 역시 예전에는 재료의 종류도 잘 몰랐고, 실제로 다양하게 사용해본 경험도 많지 않았습니다. 결국 중요한 건 프로젝트의 목적입니다.

아래 그림을 보면 각 재료가 얼마나 사실적으로 표현되는지를 비교할 수 있습니다.

(MeshPhongMaterial부터 점점 더 사실적인 느낌이 나기 시작하는 걸 확인할 수 있어요.)

실제로 앞서 나열한 재료의 순서인

MeshBasic → MeshLambert → MeshPhong → MeshStandard → MeshPhysical

은 사실감의 정도를 나타낸다고도 볼 수 있습니다.

 

간단히 정리하면:

 

• MeshBasicMaterial: 가장 가볍고 단순한 셰이딩 (빛의 영향을 받지 않음)
• MeshLambertMaterial: 간단한 조명 효과 (퍼포먼스 중시)
• MeshPhongMaterial: 반사광과 하이라이트 포함, 현실감과 성능의 균형
• MeshStandardMaterial: 물리 기반 렌더링(PBR)의 기본
• MeshPhysicalMaterial: PBR + 고급 속성 (예: 굴절률, 투명도 등), 가장 현실적

 

만약 사용자의 환경에서 적절한 성능을 유지하면서도 꽤 사실적인 표현을 원한다면 MeshPhongMaterial이 좋은 선택일 수 있습니다.

반대로, 최상의 장비로 최상의 그래픽을 보여주는 게 목표라면 MeshPhysicalMaterial이 더 적합하겠죠.

 

---

 

건축 프로젝트에서의 응용

 

건축 프로젝트에 적용해본다면,

가장 중요한 주 건물에는 MeshPhysicalMaterial이나 MeshPhongMaterial을 쓰고,

배경이나 보조 요소들에는 그보다 가벼운 재료를 활용하는 식으로 렌더링 리소스를 배분하는 전략도 가능할 것 같습니다.

* 위 글은 제가 초안을 작성하고 chatGPT를 이용해 다듬었습니다