[React / Three] Material

Three.js에서 사용되는 가장 일반적인 Material은 아래와 같다.

1. MeshBasicMaterial 

  - 간단한 음영(플랫 또는 와이어 프레임) 방식으로 형상을 그리기 위한 Material이며 조명의 영향을 받지 않는다.

  - 링크 : https://threejs.org/docs/#api/en/materials/MeshBasicMaterial

2. MeshNoramlMaterial

  - Normal Vector를 RGB 색상에 매핑하는 Material이며, 조명의 영향을 받지 않는다.  

  - 링크 : https://threejs.org/docs/#api/en/materials/MeshNormalMaterial

3. MeshPhongMaterial

  - 반사 하이라이트가 있는 반짝이는 표면의 Material로 반사율을 계산하기 위해 Blinn-Phong 모델을 사용한다. 이 모델은 광택이 있는 목재와 같은 반사 하이라이트가 있는 반짝이는 표면을 시뮬레이션 할 수 있다.

  - 성능은 일반적으로 MeshStandardMaterial 또는 MeshPhysicalMaterial을 사용할 때보다 약간의 그래픽 정확도를 희생시키면서 더 높아진다.

  - 링크 : https://threejs.org/docs/#api/en/materials/MeshPhongMaterial

4. MeshStandardMaterial

  - Metallic-Roughness workflow를 사용하는 표준 물리적 기반 Material로 물리 기반 렌더링(PBR)은 최근 Unity, Unreal 및 3D Studio Max와 같은 많은 3D 애플리케이션의 표준이 되었다.

  - 이 접근 방식은 빛이 표면과 상호 작용하는 방식에 대한 근사치를 사용하는 대신 물리적으로 올바른 모델이 사용된다는 점에서 이전 접근 방식과 다르다. 특정 조명 아래에서 잘 보이도록 재료를 조정하는 대신 모든 조명 시나리오에서 올바르게 반응하는 재료를 만들수 있다. MeshLambertMaterial 또는 MeshPhongMaterial보다 계산이 필요하다.

  - 최상의 결과를 얻으려면 항상 envMap을 사용해야 한다.

  - 링크 : https://threejs.org/docs/#api/en/materials/MeshStandardMaterial