3D Metal Material

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:

   card	size, position	linear radiance
   window, 4 x 3 panes	1.08 x 1.20 panes on 1.30 x 1.47 pitch, at (-5, 4.2, 4.8)	3.8, 3.55, 3.05
   cool side card	3.0 x 5.4 at (6, 1.6, 2)	0.52, 0.68, 0.90
   warm back card	2.0 x 4.6 at (2.5, 2.2, -5.5)	1.50, 1.22, 0.88
   top card	7.5 x 2.2 at (0, 6, 0)	0.52, 0.55, 0.60
   floor bounce	9 x 9 at (0, -4, 0)	0.18, 0.12, 0.07
   background		0.045, 0.050, 0.060

3. Aim a card at the object. The eye sees the reflection of whatever lies along the mirror direction. The hero plate is turned to the bisector of eye and window (yaw -0.38, pitch -0.36 rad). Left face-on to a dark region, the same polished steel reads black.

4. Vary the roughness. Roughness is the finish, not the constant. Layer low-frequency smears (fingerprints), two angles of micro-scratches, and a fine grain into roughnessFactor, and fade each below its pixel footprint with fw = max(length(dFdx(p)), length(dFdy(p))). Uniform roughness is what makes metal look rendered.

5. Give it a bevel. Use a chamfered box (round the arrises 1 to 3 mm at object scale, 3 to 5 segments). A sharp 90 degree edge has no normals between faces, so it catches no highlight. Above 6 to 19 percent of the smallest side it reads as soap.

6. Ground it in darkness. Contact shadow blobs and a shadow-casting key light on a dark bench. Metal on a bright ground reflects the ground and loses contrast.

7. Tone map last. Render into a HalfFloat target, add the bloom, then ACES and the sRGB encode by hand. Keep renderer.toneMapping = NoToneMapping while rendering to the target.

Constants

F0 goes in color as linear values (Color.setRGB(r,g,b, LinearSRGBColorSpace)), so you do not lose the tint to an sRGB round trip.

Intensities fall as roughness rises because a rough finish spreads the same window over more of the surface and clips it. Kibori's own steel is envMapIntensity 0.94, roughness 0.16 to 0.5, F0 0xc9ced2; its baked floor room for a polished blade uses 3.0 (the map is dim, so the gain is high).

Bloom: threshold 5.0 in linear, clamp 1.0, gain 0.22, quarter resolution. Lower thresholds turn one hot lamp glint into an orange halo above the object.