Material?
Material은 단어의 의미 그대로, ‘소재, 재질’을 의미한다. 딱 들어맞는 비유는 아니지만 Geometry가 뼈대라면 Material은 살로 비유할 수 있다.
Material의 종류에 따라 재질이 달라지고, 재질은 얼마나 빛을 반사하는지, 빛에 반응하여 어떤 느낌을 내는 지를 주로 결정한다.
빛과의 상호작용 외에도, Texture를 입히지 않은 상태에서는 Material을 통해 물체의 색상을 결정할 수 있다.
기본문법
//material 인스턴스 생성
const material = new THREE.MeshPhongMaterial({
color: 0xFF0000, // 빨강 (CSS처럼 문자열로 넘겨줄 수도 있음. "#ff0000")
});
//또는
const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0, 1, .5); // 빨강
material.flatShading = true;//색상설정의 다양한 방법들
material.color.set(0x00FFFF); // CSS의 #RRGGBB 형식
material.color.set(cssString); /* CSS 색상 문자열, 예를 들어 'purple', '#F32',
* 'rgb(255, 127, 64)',
* 'hsl(180, 50%, 25%)' 등
*/
material.color.set(someColor) // THREE.Color에 정의된 static 색상
material.color.setHSL(h, s, l) // hsl 색상, 0부터 1까지
material.color.setRGB(r, g, b) // rgb 색상, 0부터 1까지Material의 종류
1. 기본재질
MeshBasicMaterial : 광원의 영향을 받지 않음
MeshLambertMaterial : 정점에서만 광원을 계산함
MeshPhongMaterial : 픽셀 하나하나에 전부 광원을 계산함, 반사점 지원
- shininess 속성으로 반사점의 밝기를 조절할 수 있음(기본값 :30)
MeshToonMaterial : 부드럽게 쉐이딩(shading)하는 대신, MeshToonMaterial은 그라디언트 맵(gradient map)을 사용함 → 카툰느낌을 줌
2. 물리 기반 렌더링을 위한 재질
- PBR : 물리 기반 렌더링(Physically Based Rendering)
- 실제 세계처럼 물체를 구현하기 위해 복잡한 수학 사용
MeshStandardMaterial : Phong과 비슷하나 사용 속성이 다름
- roughness : shininess의 반대, 0에서 1까지
- metalness : 금속성, 0에서 1까지
MeshPhysicalMaterial : Standard와 같지만 추가옵션이 있음
- clearcoat : 표면 코팅 세기
- clearcoatRoughness : 코팅의 거침 정도
3. 속도가 빠른 순
basic → lambert → phong → standart → physical
- 성능부담이 클 수록 더 현실적인 결과물을 얻을 수 있으나 사양이 좋아야 하고, 저사양 지원을 위해서는 코드 최적화가 필요함
4. 특수재질
ShadowMaterial : 그림자로부터 데이터를 가져오는 데 사용
MeshDepthMaterial : 각 픽셀의 깊이를 렌더링함
- 카메라의 마이너스 near에 위치한 픽셀은 0으로, 마이너스 far에 위치한 픽셀은 1로 렌더링
MeshNormalMateria : 카메라를 기반으로 geometry의 법선을 렌더링함
- x축은 빨강, y축은 초록, z축은 파랑
ShaderMaterial : Three.js의 쉐이더 시스템을 이용해 재질을 커스텀함
RawShaderMaterial : Three.js의 도움을 받지 않고 재질을 커스텀 함
5. 자주사용하는 속성
- flatShading : 물체를 각지게(faceted) 표현할지의 여부. 기본값은 false
- side : 어떤 면을 렌더링할지의 여부
THREE.FrontSide(앞면)(기본값),THREE.BackSide(뒷면),THREE.DoubleSide(양면)
