# Chrome Material & Studio Light — `chrome-material@1.0.0`

Mirror-bright liquid chrome with a soft photo-studio lighting rig. Works on any 3D shape.

A fully metallic physical material plus the thing chrome actually needs to look like chrome: something to reflect. The studio is built from code (a dark room with glowing softboxes) and baked into an environment map, so there are no image files to license or load. Change the tint for gold or steel, raise the roughness for a brushed finish, and slowly turn the lights for that rolling-highlight look.

- Kind: material; status: published; digest sha256:cd8524db875223bd8ffc7b17ba8ac3e622590e4b2a6eac967a17cf60b927d9cb
- Role: Surface material and image-based studio lighting for any Three.js mesh.
- Implementation: three; entry `src/chrome-material.js`
- Files: https://aipixelwizard.com/registry/chrome-material/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/chrome-material.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/chrome-material/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/chrome-material/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — WebGL rendering. In a bundler project install three@0.185.1 from npm; the bare import 'three' resolves to it.; `apw-runtime@1.0.0` (demo) — Demo only: frame/time harness and loop helpers.

## Exports
- `createStudioEnvironment(renderer, { intensity?, warmth? }) => { texture, dispose }` — Procedural studio baked to a PMREM environment map. Assign texture to scene.environment.
- `createChromeMaterial({ color?, roughness?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial` — Metalness 1 physical material with clear coat.
- `applyMaterial(object, material) => object` — Assigns a material to every mesh inside an object or group.
- `configureRenderer(renderer, { exposure? }) => renderer` — sRGB output + ACES filmic tone mapping, as tuned.
- `createContactShadow({ size?, opacity? }) => THREE.Mesh` — Soft fake contact shadow plane for grounding objects.

## Parameters
- `shape` (select one of sphere | knot | capsule, default "sphere") — Shape: The material works on any geometry; try another shape.
- `tint` (color, default "#ffffff") — Metal colour: White is chrome. Warm yellow reads as gold.
- `roughness` (number 0–0.5, default 0.08) — Shine: Lower is a sharper mirror; higher looks brushed.
- `lightWarmth` (number -1–1, default 0.15) — Light warmth: Cool blue light to warm amber light.
- `lightSpin` (integer 0–3, default 1) — Light turns: How many times the studio lights circle the object during the clip. 0 keeps them still.
- `background` (color, default "#0b0b10") — Background

## Composition
- Inputs: A THREE.WebGLRenderer (for the environment) and any meshes you want to be metallic.
- Outputs: A MeshPhysicalMaterial and an environment texture for scene.environment.
- Coordinates: Y-up, metres-ish. The studio is centred on the origin with a radius of 20 units; it is only used as a reflection map, so scene scale does not matter.
- Lighting: Lighting comes from scene.environment (image-based). No THREE lights are required. If your scene already has an environment, you can use only createChromeMaterial.
- Timing: Static material. The demo rotates scene.environmentRotation by whole turns over the clip for a seamless loop.
- Works with: glass-container, bouncing-balls, orbit-camera, iridescent-blob
- Metallic materials look black without an environment map.
- Use renderer tone mapping (configureRenderer) for the tuned look.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — The light rig and object complete whole turns over the clip, so frame N equals frame 0.
- Verified 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Create a Three.js scene, call configureRenderer(renderer), set scene.environment = createStudioEnvironment(renderer).texture, then give meshes createChromeMaterial(). demo.js is a complete minimal scene.

Existing project: Copy src/chrome-material.js into your project. Keep your renderer and camera. Set scene.environment once (or keep your own environment) and swap the material on the meshes that should be chrome. Do not replace your scene setup.

Reuse ideas:
- Apply createChromeMaterial to the balls from Bouncing Balls to get chrome marbles (see the Bouncing Marbles in a Box example).
- Use it on text or logo geometry (TextGeometry or an imported model) for a chrome title.
- Use only createStudioEnvironment to light a glass or plastic scene with soft studio reflections.

## Limitations
- Reflections come from the studio map, not from other objects in your scene (no ray tracing or reflection probes).
- Shadows are not included; the demo uses a soft fake contact shadow.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder).
- three.js 0.185.1: MIT (https://github.com/mrdoob/three.js)

Provenance: Original code written for AI Pixel Wizard in October 2026. No external images, models or textures; every visual is generated by the code.