3D Metal Material

Mechanism: a conductor has no colour of its own, so it looks like metal only when a dark environment holds a few very bright, hard-edged things to reflect, and the surface then bends those reflections with roughness that varies across it. Remove the bright cards and the same steel goes flat grey; remove the roughness variation and it goes CG-clean.

Boundary. This skill is the material and the environment it reads. Reach for 3d-specular-rim-glow when the job is one bright edge catch and halo on a product, 3d-high-resolution-textures when you ship authored PBR texture sets and need texel density and mip budgets, 3d-ultra-realistic-water for water. Siblings 3d-wood-material, 3d-cloth-material and 3d-paper-material cover the non-metal surfaces that usually sit next to metal; use them for the bench, handle or wrapping. The demo has a bench and a chisel handle only as staging.

Verified stack of the demo: Three.js r169 (three@0.169.0), WebGL 2, GLSL patched into MeshStandardMaterial/MeshPhysicalMaterial with onBeforeCompile, PMREMGenerator, a HalfFloat MSAA target and a hand-written ACES pass. No post-processing library.

Build order

Do these in order; each one fixes a named failure the previous step cannot.

1. Conductor, not painted. metalness: 1, color = the metal's F0 (linear reflectance at normal incidence), nothing else in color. A bright base colour turns lit faces into white paint, and metalness < 1 lets a diffuse term leak in as plastic.
2. A dark room with bright cards. Build the environment as a real Scene of MeshBasicMaterial planes with toneMapped:false and HDR radiance above 1, on a near-black background, then PMREMGenerator.fromScene. A bright uniform sky makes every reflection the same mean tone, and raising envMapIntensity only lifts that mean. A canvas equirect capped at display white cannot make a window brighter than the paper. Cards used in the demo: