git:20261028.62f2e2f to git:20261031.845cf45

---

name: material-composition

description: Combine realistic TSL materials into coherent multi-material objects in Three.js WebGPU scenes. Use when an object (vehicle, building, machine) is made of several physically distinct surfaces.

---

# Material Composition

Complex objects should be composed from physically distinct surfaces rather than forced into one universal shader.

## Typical object composition

A train might contain:

- painted aluminium/steel body

- glass windows

- rubber seals

- polished or brushed metal components

- dark underbody metal

- plastic interior components

- lights/emissive elements

A building might contain:

- concrete

- painted steel

- aluminium

- glass

- rubber seals

- weathered surfaces

- interior materials

## Separation rule

If two parts have different physical construction, give them separate material treatment where useful.

Do not create dozens of materials for negligible differences.

## Shared material vocabulary

Prefer reusable material constructors and parameter sets.

For example:

createPaintMaterial({ color, roughness, wear })

createGlassMaterial({ tint, roughness, thickness })

createMetalMaterial({ type, roughness, wear })

createRustMaterial({ severity, moisture })

## Consistency

Materials should agree with the geometry. A recessed panel should have believable roughness and dirt behaviour; a rubber seal should not behave like painted metal; glass should not be treated as opaque plastic.

## Performance

Reuse material graphs and textures where possible. Use the expensive effects on hero objects and simplified variants for distant repeated assets.