Frontend/Three.js

재질, flatShading - 각지게 표현

wam 2024. 10. 16. 03:28

 

flatShading 속성

 

  // MeshPhongMaterial, 상대적으로 덜 사실적
  const material1 = new THREE.MeshPhongMaterial({
    color: "orangered",
    shininess: 800,
    flatShading: true
  });

  // MeshStandardMaterial, 고품질의 사실적인 렌더링
  const material2 = new THREE.MeshStandardMaterial({
    color: "orangered",
    roughness: 0.2,
    metalness: 0.3,
    flatShading: true
  });

 

  • flatShading 속성은 평면 셰이딩(Flat Shading)을 활성화할지 여부를 결정하는 Boolean 값이다.

 

  • 이 값이 true로 설정되면, 각 면(Face)에 대해 개별적으로 정규 벡터가 계산되어 면이 평평하게 보이게 된다.
    • 이때 각 삼각형의 면이 뚜렷하게 드러나기 때문에 물체가 더 각지게 보이게 된다.

 

  • flatShading이 false일 경우(기본값), 모든 면에 대해 부드러운 셰이딩(Smooth Shading)이 적용되어 정점 간의 노멀 벡터를 보간해 부드러운 표면을 표현하게 된다.