디자인 아틀라스
EN
⬢ 3D 모델링·렌더링

스무스 vs 플랫 셰이딩

Smooth vs. flat shading

같은 지오메트리를 두고, 법선을 정점마다 부드럽게 섞을지(스무스) 면마다 그대로 둘지(플랫)를 정하는 셰이딩 방식.

다른 이름: Vertex normal smoothingFace-normal shading
···
html
<div class="sub-caps"><span>flat shading</span><span>smooth shading</span></div>
css
.sub-caps{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:space-around;font-size:clamp(8px,2.4vmin,12px);color:#dfe3ffcc;text-align:center;padding:0 3%}
js
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0b14);
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
camera.position.set(0, 0.5, 6.2);

const flat = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1.05, 1),
  new THREE.MeshStandardMaterial({ color: 0xffb648, flatShading: true, roughness: 0.5 })
);
flat.position.x = -1.7;
const smoothGeo = new THREE.IcosahedronGeometry(1.05, 1);
smoothGeo.computeVertexNormals();
const smooth = new THREE.Mesh(smoothGeo, new THREE.MeshStandardMaterial({ color: 0x8ecbff, flatShading: false, roughness: 0.5 }));
smooth.position.x = 1.7;
scene.add(flat, smooth);
const key = new THREE.DirectionalLight(0xffffff, 1.8); key.position.set(3, 4, 5); scene.add(key);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const r = t * 0.00025;
  flat.rotation.set(r * 0.5, r, 0);
  smooth.rotation.copy(flat.rotation);
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

면은 각자의 법선(그 면이 향하는 방향)을 갖고 있습니다. 플랫 셰이딩은 이 값을 그대로 써서 면 하나를 통째로 한 밝기로 칠합니다 — 그래서 폴리곤 경계가 뚜렷한 각진 결과가 나옵니다. 스무스 셰이딩은 각 정점에서 그 정점을 공유하는 모든 면의 법선을 평균 내어, 면 경계를 가로질러 밝기가 서서히 바뀌도록 보간합니다. 그 결과 폴리곤 수는 똑같은데도 표면이 매끈하게 이어진 것처럼 보입니다.

중요한 건 정점·면의 개수는 전혀 바뀌지 않는다는 점입니다 — 셰이딩은 순전히 "같은 형태를 어떻게 칠하는가"의 문제입니다. 그래서 저폴리곤 구를 스무스 셰이딩하면 매끈해 보이지만 실루엣의 각진 다각형 윤곽은 그대로 남고, 가까이서 보면 여전히 "가짜로 둥근" 느낌이 듭니다.

Blender는 오브젝트 우클릭 메뉴의 Shade Smooth/Shade Flat, Maya는 폴리곤 메뉴의 Soften/Harden Edge, C4D는 Phong 태그로 이걸 전환합니다. 셋 다 에지 단위로 부분 적용(특정 모서리만 각지게 유지)도 가능해서, 서브디비전 없이도 둥근 몸체에 각진 디테일을 함께 표현할 수 있습니다.

언제 쓰나

저폴리곤 형태가 매끈해 보여야 하면 스무스, 하드서페이스나 로우폴리 스타일을 의도했다면 플랫을 쓰세요.