Material

Material

Material의 역할은 지오메트리의 각 픽셀에 색상을 추가하는 것

색상을 추가하는 과정은 조명과 메테리얼의 물리적 특성에 따라 특정한 알고리즘을 거쳐 표시할 색상을 결정짓게 되는데 이에 해당되는 알고리즘은 Shader 를 통해 작성된다.

Property

인스턴스를 생성하는 시점 또는, 생성 후 프로퍼티 값을 직접 변경하는 식으로 적용할 수 있다.

• color: Material에 적용될 색상을 설정

• transparent: Material을 투명하게 처리할지 결정(Bool), 이 속성이 설정되어 있어야 물체의 불투명도(opacity, alphaMap)를 조절하는 속성들을 사용할 수 있게 된다.

• visible: Mesh(오브젝트)가 화면에 보이는지 여부를 결정(Bool)

• wireframe: Material의 뼈대를 확인하기 용도로 사용된다(Bool)

• side: Material의 양면 중 어느쪽을 렌더링할지 결정(FrontSide, BackSide, DoubleSide)

  • FrontSide → 기본값으로, 앞면만 렌더링 된다.

  • BackSide → 앞면이 제외되고, 뒷면만 렌더링 된다 .

  • DoubleSide → 앞뒷면 모두 렌더링 된다. (앞뒷면 모두 렌더링되기에 그만큼 리소스 비용이 많이 든다.)

• roughness: 표면의 거칠기, 값이 낮아질수록 거울처럼 빛을 반사하는 정도가 커진다.

• metalness: 값이 커질수록 금속성 재질처럼 표현된다.

• opacity: 머터리얼의 투명도를 조절

• alphaTest: 알파값을 설정, opacity값이 alphaTest값 보다 낮아지면 머터리얼이 렌더링되지 않는다.

• depthTest: 거리 계산을 통해 뒤에 있는 메쉬의 머티리얼은 가려지게 되는데, 해당 속성을 true로 설정하면 이러한 계산이 무시된다.

const material = new THREE.MashStandardMaterial({
  color: '#0066ff'// 0x0066ff, blue
  // new THREE.Color('#0066ff'), THREE.js에서 제공되는 컬러 인스턴스를 통해 색상 지정 가능
  transparent: true,
  opacity: 0.5, 
  visible: true, 
  wireframe: false,
  side: THREE.FrontSide, 
});

material.color = new THREE.Color('#0066ff'); // 직접 변경  가능

Built In Material

Three.js에서 제공하는 다양한 Material를 알아보자 .

• LineBasicMaterial → 선 형태의 오브젝트를 표현하고 싶을 때 사용

• MeshBasicMaterial → 이름처럼 가장 기본적인 메테리얼, 조명에 영향을 받지 않는 특징이 있다(음영 표현X)

• MeshDepthMaterial → 오브젝트에서 카메라까지의 거리에 따라 지오메트리를 흑백으로 채색하는 메테리얼, 물체의 뒷부분은 더 어둡게 채색된다. (조명에 영향을 받지 않음)

• MeshLambertMaterial → 조명에 영향을 받는 메테리얼 (반사광 X)

• MeshPhongMaterial → MeshLambertMaterial는 물체가 빛을 받았을 때 생기는 반사점을 표현하는데 한계가 있는데, 해당 메테리얼은 이부분을 잘 표현할 수 있다.(마찬가지로 조명에 영향을 받음)

• MeshStandardMaterial → PBR(Physical Based Rendering) 물리 기반 렌더링을 사용, 이 방식은 대부분의 많은 3d 엔진에서 사용되는 표준 방식이므로 Standard라는 이름이 붙혀짐,

  • 마찬가지로 조명에 영향을 받음

  • 재질의 금속성과 거칠기를 표현할 수 있다.

  • 표현해야 하는 영역이 많은 만큼 비교적 성능이 떨어질 수 있다.

• MeshPhysicalMaterial → MeshStandardMaterial의 향상된 버전으로 사실적인 투명한 효과와 더 나은 반사효과를 표현할 수 있다.

• MeshToonMaterial → 만화 형태의 재질을 표현할 수 있다.

• MeshMatcapMaterial -> 미리 정의된 텍스처 맵을 사용하여 물체의 표면을 렌더링, 복잡한 빛 계산을 건너뛰기 때문에 렌더링 시간 단축 및 성능 향상 이점이 있다. (Light에 영향을 받지 않는다.)

  • matcaps -> 미리 정의된 텍스처 맵(Material Capture), 빛이 없어도 자체적으로 명암을 표현 가능

• MeshNormalMaterial → 법선 벡터(Normal Vector) 정보를 시각화하는 데 사용되며, 색은 카메라를 기준으로 한 법선의 방향만 표시한다. (즉, 구를 중심으로 회전하면 색이 항상 동일)

  • 법선 벡터의 x,y,z 값을 rgb로 바꾼것

  • normal(법선)이란 면의 방향을 나타내는 평면에 항상 수직인 선으로 각 vertex에는 normal 정보가 포함됨

    • 법선은 vertex의 방향을 나타낸다.

    • 법선 벡터란 front side 방향에 있는 머터리얼을 의미한다.

조명에 영향을 받는다는 것은 그림자, 반사(Reflection) , 굴절(Refraction) 효과 등을 표현할 수 있다.

Properties

MeshPhongMaterial

• specular: Mesh에 반사된 빛(반사광)의 색상

• shieness: 반사광의 크기, 값이 작을수록 뚜렷해진다.

MeshPhysicalMaterial

• roughness: 표면의 거칠기

• metalness: 표면의 금속성 정도

• clearcoat: 표면의 코팅 효과

• clearcoatRoughness: 코팅 표현의 거칠기, 반사광 표현 가능

• transmission: 투명한 머터리얼 표현, 머터리얼의 transparent 속성이 true여야 한다.

• thickness: 유리 재질의 두께를 표현

• ior(Index Of Refraction): 유리 재질의 굴절율 표현

MeshDepthMaterial