Subdivision surface — Design Atlas

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.6, 6.4); const cageGeo = new THREE.IcosahedronGeometry(1.05, 1); const cage = new THREE.Mesh(cageGeo, new THREE.MeshStandardMaterial({ color: 0x8ecbff, flatShading: true, roughness: 0.55, metalness: 0.05 })); cage.add(new THREE.LineSegments(new THREE.EdgesGeometry(cageGeo), new THREE.LineBasicMaterial({ color: 0x0b0b14, transparent: true, opacity: 0.5 }))); cage.position.x = -1.7; const smoothGeo = new THREE.IcosahedronGeometry(1.05, 4); const smooth = new THREE.Mesh(smoothGeo, new THREE.MeshStandardMaterial({ color: 0xffb648, roughness: 0.45, metalness: 0.05 })); smooth.position.x = 1.7; scene.add(cage, smooth); const key = new THREE.DirectionalLight(0xffffff, 1.7); 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; cage.rotation.set(r * 0.5, r, 0); smooth.rotation.copy(cage.rotation); camera.lookAt(0, 0, 0); renderer.render(scene, camera); });

A sculptor blocks in only a coarse frame — the “cage” — and a subdivision algorithm (Catmull-Clark is the common one) repeatedly splits every face into four and nudges each new vertex toward a weighted average of nearby faces and edges, converging on a smooth curved surface. The original low-res mesh survives as the cage, still light to edit; the smooth result is a preview layered on top.

The power move is separating editing from density: you edit a lightweight cage of a few dozen faces, while the render output can resolve to tens of thousands. But if the cage’s topology (previous entry) is bad — stray triangles, too many poles — subdivision bakes those flaws straight into the smooth surface as visible dents. That’s why subdivision-targeted modeling is almost always quad-first.

Blender calls it the “Subdivision Surface” modifier, Maya has “Smooth Mesh Preview,” and Cinema 4D has a “Subdivision Surface” generator — all variants of the same algorithm family. Adding a crease weight on a cage edge keeps that specific line sharp instead of smoothing it away.

When to use

When you need to edit an organic shape — a character, a car body — cheaply while still getting a smooth final surface.