안녕하세요, 코드아키텍트입니다.
오늘은 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를 이용해 다듬었습니다
'테크일기' 카테고리의 다른 글
AI는 설계와 시공을 바꿀 수 있을까 (2) | 2025.06.23 |
---|---|
맥킨지 컨설팅 제안서, 이렇게 만든다: 7단계 구조 완전 분석 (2) | 2025.06.21 |
웹 3D, 어디까지 해봤니?Autodesk Tandem + Three.js 실험기 (0) | 2025.06.20 |
THREEJS 다시 배우기 #2 (0) | 2025.06.08 |
THREEJS 다시 배우기 #1 (1) | 2025.06.06 |