2026-06-06
회색 플라스틱을 벗기는 토온 셰이딩
토끼와 터널을 처음 MeshStandardMaterial 기본값으로 띄웠을 때 인상은 한마디로 "회색 플라스틱"이었다.
PBR 머티리얼은 사실적인 빛 반응을 주지만, 사실적인 게 곧 귀여운 건 아니다.
동화책 톤에는 명암이 매끄럽게 굴러떨어지는 게 오히려 방해였다.
그래서 토온 셰이딩으로 갈아탔다.
핵심은 명암을 연속이 아니라 몇 단계로 끊는 것이다.
3단 그라데이션 램프를 DataTexture로 만들고, 모든 머티리얼이 이 한 장을 gradientMap으로 공유하게 했다. MeshToonMaterial은 이 램프를 보고 빛을 세 칸으로 양자화한다.
// components/game/materials.ts
cached = new THREE.DataTexture(
new Uint8Array([110, 190, 255]), // 3단 명암 — 어두움/중간/밝음
3, 1, THREE.RedFormat,
);
cached.minFilter = THREE.NearestFilter;
cached.magFilter = THREE.NearestFilter;
NearestFilter가 중요하다.
보간을 끄지 않으면 세 값이 부드럽게 섞여 다시 그라데이션으로 돌아가버린다.
칸을 또렷이 끊어야 토온 특유의 만화 같은 면이 나온다.
머티리얼만으로는 부족했다.
그라데이션 안개로 터널 끝을 앰버빛으로 녹이고, 블룸을 얹어 앰버 크리스탈이 은은히 빛나게 했다.
셋이 합쳐지자 비로소 "아늑한 황혼 굴" 무드가 완성됐다.
같은 형상이라도 칠하는 방식이 무드를 통째로 바꾼다.
회색 플라스틱과 황혼 굴의 차이는 폴리곤이 아니라 셰이딩이었다.
다음 편은 비주얼이 다 잡힌 줄 알았는데 화면이 통째로 죽어버린 React 19 삽질이다.