Frontend/Three.js

재질, MeshStandardMaterial (MeshPhongMaterial과 비교)

wam 2024. 9. 30. 03:13

 

MeshPhongMaterial와 MeshStandardMaterial 차이점

 

속성

MeshPhongMaterial

MeshStandardMaterial 

렌더링 모델 Blinn-Phong 쉐이딩 (전통적인 렌더링 방식) 물리 기반 렌더링 (PBR, Physically Based Rendering)
주요 속성 - specular: 반사광 색상 및 강도 - shininess: 광택 정도 - roughness: 표면 거칠기 - metalness: 금속성
광택 표현 shininess 속성으로 조정 가능 roughness 속성으로 자연스러운 거칠기 표현
금속성 표현 지원하지 않음 metalness 속성으로 금속성 표현 가능
텍스처 맵 지원 - map: 기본 컬러 맵 - bumpMap: 표면 굴곡 표현 - map: 기본 컬러 맵 - roughnessMap, metalnessMap 지원
반사 효과 단순한 반사 계산 envMap을 통해 더 사실적인 환경 반사 효과 지원
렌더링 품질 상대적으로 덜 사실적 고품질의 사실적인 렌더링
퍼포먼스 계산이 간단해 성능이 더 좋음 더 복잡한 계산으로 인해 성능이 다소 떨어질 수 있음
사용 용도 단순한 표면 표현 및 빠른 렌더링에 적합 고품질의 사실적인 재질 표현이 필요할 때 적합

 

 

 

MeshPhongMaterial과 MeshStandardMaterial은 모두 Three.js에서 사용되는 재질(Material) 클래스지만, 렌더링 방식과 특성에서 차이가 있다.

 

 

렌더링 모델

 

MeshPhongMaterial

  • Blinn-Phong 쉐이딩 모델을 기반으로 한 전통적인 렌더링 방식을 사용한다.
  • 물체의 반사율과 빛의 상호작용을 간단하게 표현하며, 표면의 광택과 반사를 계산한다.

 

 

MeshStandardMaterial

  • 물리 기반 렌더링(PBR, Physically Based Rendering)을 지원하는 재질이다.
  • 빛의 실제 물리적인 특성을 시뮬레이션하여 사실적인 조명과 재질 표현을 제공한다.

 

 

렌더링 품질

 

MeshPhongMaterial:

  • 상대적으로 단순하고 계산이 빠르지만, 사실감이 떨어진다.
  • 금속성 물체나 복잡한 표면 특성을 잘 표현하지 못한다.

 

 

MeshStandardMaterial

  • 더 복잡한 계산을 통해 사실적인 빛과 재질 상호작용을 표현한다.
  • 특히 금속성 물체나 거친 표면 같은 물리적 특성들을 자연스럽게 재현할 수 있다.

 

 

 

퍼포먼스

 

MeshPhongMaterial

  • 더 간단한 계산으로 인해 성능이 좋다.
  • 실시간 렌더링에서 빠르게 사용할 수 있다.

 

 

MeshStandardMaterial

  • PBR 모델은 계산이 더 복잡하기 때문에 성능이 다소 떨어질 수 있다.
  • 하지만 사실적인 표현을 필요로 하는 상황에서는 더 적합하다.

 

 

요약

  • MeshPhongMaterial은 단순하고 빠르며, 덜 사실적인 렌더링에 적합하다.
  • MeshStandardMaterial은 사실적인 표현과 PBR 기반의 렌더링을 지원하며, 고품질 시각 효과를 위해 사용된다.