three.js materials 종류

Three.js에서 사용할 수 있는 material의 종류들과 그 특성에 대해 간단히 정리한다.

 

1. MeshBasicMaterial : 단순 음영(Shader)로 그림 (평면, 와이어프레임)

- 조명 영향 X

<https://threejs.org/docs/#api/en/materials/MeshBasicMaterial>

 

 

2. MeshDepthMaterial : 음영으로 깊이를 표현 재질

-카메라의 원근을 이용한 깊이 표현, 뒤에 있을 수록 어두움.

<https://threejs.org/docs/api/en/materials/MeshDepthMaterial.html>

 

 

3. MeshLambertMaterial : 반사광, 하이라이트가 없는 재질

-정점 Shader 음영 계산하여 면에 보간,

-비물리적 기반의 Lambertian 모델 사용

-Gouraud 쉐이딩 모델, 반짝이는 표면을 시뮬레이션 할 수 X

<https://threejs.org/docs/api/en/materials/MeshLambertMaterial.html>

 

 

4. MeshNormalMaterial : 백터를 RGB 색상으로 매핑하는 재질

<https://threejs.org/docs/api/en/materials/MeshNormalMaterial.html>

 

 

5. MeshPhongMaterial : 반사 하이라이트가 있는 광택있는 표면 재질

-재질은 반사율 계산을 위해 비 물리적인 Blinn-Phong 모델 사용

-반사광과 광택을 시뮬레이션 가능

-Shading은 Phong shading 모델로 계산 ( 픽셀마다 쉐이딩 Gouraud 쉐이딩 모델보다 더 정확함 )

<https://threejs.org/docs/#api/en/materials/MeshPhongMaterial>

 

 

6. MeshStandardMaterial : Physically based rendering (PBR), Metallic-Roughness workflow.

-Shading은 Phong음영 모델을 사용 MeshPhongMaterial과 동일 ( 픽셀마다 음영 계산 )

-환경 맵을 지정

* glTF에서 기본으로 표현하는 방식과 같다!

<https://threejs.org/docs/api/en/materials/MeshStandardMaterial.html>

 

 

7. MeshPhysicalMaterial : 반사성을 더 조절할 수 있는 MeshStandardMaterial의 확장,

-물리모델

-최상의 결과를 얻으려면 이 자료를 사용할 때 항상 환경 맵을 지정

<https://threejs.org/docs/api/en/materials/MeshPhysicalMaterial.html>