three.js Material - MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial

// Mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 'seagreen'
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

MeshBasicMaterial은 light가 적용되지 않는 기본적인 material이다.

 

// Light
const ambientLight = new THREE.AmbientLight('white', 0.5);
const directionalLight = new THREE.DirectionalLight('white', 1);
directionalLight.position.set(1, 0, 2);
scene.add(ambientLight, directionalLight);

...

// Mesh
const geometry = new THREE.SphereGeometry(1, 16, 16);
const material1 = new THREE.MeshLambertMaterial({
    color: 'orange'
});
const material2 = new THREE.MeshPhongMaterial({
    color: 'orange'
});
const mesh1 = new THREE.Mesh(geometry, material1);
const mesh2 = new THREE.Mesh(geometry, material2);
mesh1.position.x = -1.5;
mesh2.position.x = 1.5;
scene.add(mesh1, mesh2);

이번에는 MeshLambertMaterial과 MeshPhongMaterial을 scene에 추가한 코드이다.

MeshLambertMaterial은 하이라이트나 반사광이 없는 material이며,

MeshPhongMaterial은 하이라이트와 반사광을 표현할 수 있는 material이다.

 

 

그래픽스 수업에서 phong shading을 들어본 적이 있다. 그때의  셰이딩 기법은 flat shading에서 여러 면의 shading처리를 각 면들을 보간한 값으로 구하여 적용한 것이 phong shading이었다.

 

사실 그것만 알고 Lambert와 Phong의 차리를 몰라 검색해보았다.

https://stackoverflow.com/questions/15801971/three-js-what-is-the-exact-difference-between-lambert-and-phong

Three.js: What Is The Exact Difference Between Lambert and Phong?

 

PhongMaterial은 light에 대해서 ambient + diffuse + specular가 적용되어 주변광과 분산광, 반사광을 적용할 수 있는 형태인 듯 하다.

 

const material2 = new THREE.MeshPhongMaterial({
    color: 'orange',
    shininess: 100,
});

MeshPhongMaterial의 경우 shininess로 반짝이는 정도를 조절할 수 있다.