three.js Material - MeshToonMaterial

// texture load
const textureLoader = new THREE.TextureLoader();
const gradientTex = textureLoader.load('/textures/gradient.png');
// gradientTex.magFilter = THREE.NearestFilter;

...

// Mesh
const geometry = new THREE.ConeGeometry(1, 2, 128);
const material = new THREE.MeshToonMaterial({
    color: 'plum',
    gradientMap: gradientTex,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

MeshToonMaterial로 material객체를 생성하는 경우 plum이나 skyblue, purple등 특정 색상으로 설정하면

 

이렇게 light로 인해서 특정부분의 색상이 경계가 생긴다.

 

gradientMap으로 gradientTex를 설정하면, 위 그림과 같이 light로 인한 gradient가 자연스럽게 적용된다.

 

// texture load
const textureLoader = new THREE.TextureLoader();
const gradientTex = textureLoader.load('/textures/gradient.png');
gradientTex.magFilter = THREE.NearestFilter;

...

// Mesh
const geometry = new THREE.ConeGeometry(1, 2, 128);
const material = new THREE.MeshToonMaterial({
    color: 'plum',
    gradientMap: gradientTex,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

 주석처리되어있던 NearesFilter 설정을 활성화하면, 

 

이렇게 부분부분 나누어진다. gradient를 적용하기 전과도 사뭇 다른 색 경계를 확인할 수 있다.

아마 NearestFilter처리된 위 그림의 본래 색상의 형태이고, filter를 다르게 처리하면서 빛에 따른 색의 변화가 자연스럽게 그라데이션 처리가 되는 모양이다.