{"id":"chrome-material","version":"1.1.0","title":"Chrome Material & Studio Light","summary":"Mirror-bright liquid chrome with a soft photo-studio lighting rig. Works on any 3D shape.","kind":"material","target":"three","collections":["chrome-glass","product-reveals","satisfying"],"tags":["chrome","metal","metallic","mirror","reflective","shiny","studio lighting","material","3d","liquid chrome","gold","steel"],"loopable":true,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/chrome-material/1.1.0/poster.webp","preview":"https://aipixelwizard.com/media/chrome-material/1.1.0/preview.mp4","sample":"https://aipixelwizard.com/media/chrome-material/1.1.0/sample.mp4","sampleBytes":264009,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/chrome-material","manifest":"https://aipixelwizard.com/api/v1/visuals/chrome-material/versions/1.1.0","agentMd":"https://aipixelwizard.com/registry/chrome-material/1.1.0/agent.md","files":"https://aipixelwizard.com/registry/chrome-material/1.1.0/","demo":"https://aipixelwizard.com/registry/chrome-material/1.1.0/index.html"},"description":"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.","role":"Surface material and image-based studio lighting for any Three.js mesh.","useCases":["Make any object look like polished chrome or gold","Product hero shots","Shiny balls and abstract sculptures","Chrome text or logos (with your own geometry)"],"synonyms":["shiny","glossy","silver","polished","liquid metal","reflection","reflections","mirror ball","metal ball","shiny ball","gold ball","studio light"],"digest":"ecb41776bfc1ee88997604f916a5ffe833f971d7edcc97c855697a5792d6f1dd","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/chrome-material.js","exports":[{"name":"createStudioEnvironment","signature":"createStudioEnvironment(renderer, { intensity?, warmth? }) => { texture, dispose }","description":"Procedural studio baked to a PMREM environment map. Assign texture to scene.environment."},{"name":"createChromeMaterial","signature":"createChromeMaterial({ color?, roughness?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial","description":"Metalness 1 physical material with clear coat."},{"name":"applyMaterial","signature":"applyMaterial(object, material) => object","description":"Assigns a material to every mesh inside an object or group."},{"name":"configureRenderer","signature":"configureRenderer(renderer, { exposure? }) => renderer","description":"sRGB output + ACES filmic tone mapping, as tuned."},{"name":"createContactShadow","signature":"createContactShadow({ size?, opacity? }) => THREE.Mesh","description":"Soft fake contact shadow plane for grounding objects."},{"name":"createCove","signature":"createCove(background, { lift?, radius?, glow? }) => { mesh, dark, dispose() }","description":"A cove backdrop with a horizon and an optional backlight spot, baked into vertex colours (opaque, so it shows through glass)."},{"name":"createStudioFloor","signature":"createStudioFloor(background, { size?, pool? }) => { mesh, dispose() }","description":"An opaque studio floor with a pool of light baked into its vertex colours."}],"reusable":["src/chrome-material.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"WebGL rendering. In a bundler project install three@0.185.1 from npm; the bare import 'three' resolves to it."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo only: frame/time harness and loop helpers."}],"uses":[],"usedBy":[{"id":"chrome-orbit","version":"1.1.0"},{"id":"chrome-orbit","version":"1.2.0"}],"params":[{"key":"shape","label":"Shape","help":"The material works on any geometry; try another shape.","type":"select","default":"sphere","options":[{"value":"sphere","label":"Sphere"},{"value":"knot","label":"Knot"},{"value":"capsule","label":"Capsule"}]},{"key":"tint","label":"Metal colour","help":"White is chrome. Warm yellow reads as gold.","type":"color","default":"#ffffff"},{"key":"roughness","label":"Shine","help":"Lower is a sharper mirror; higher looks brushed.","type":"number","min":0,"max":0.5,"step":0.01,"default":0.08},{"key":"lightWarmth","label":"Light warmth","help":"Cool blue light to warm amber light.","type":"number","min":-1,"max":1,"step":0.05,"default":0.15},{"key":"lightSpin","label":"Light turns","help":"How many times the studio lights circle the object during the clip. 0 keeps them still.","type":"integer","min":0,"max":3,"step":1,"default":1},{"key":"background","label":"Background","type":"color","default":"#0b0b10"}],"presets":[{"id":"mirror","label":"Mirror chrome","params":{}},{"id":"gold","label":"Gold","params":{"tint":"#ffcf73","roughness":0.12,"lightWarmth":0.45}},{"id":"brushed","label":"Brushed steel knot","params":{"shape":"knot","tint":"#d8dee8","roughness":0.32,"lightWarmth":-0.3}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":8,"posterSeconds":1.5,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":8,"method":"The light rig and object complete whole turns over the clip, so frame N equals frame 0."},"seed":null},"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.","compatibleWith":["glass-container","bouncing-balls","orbit-camera","iridescent-blob"],"notes":["Metallic materials look black without an environment map.","Use renderer tone mapping (configureRenderer) for the tuned look."]},"reuse":["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.","Add createCove and createStudioFloor to any scene for a visible studio: a horizon behind the subject and a lit floor under it."],"integration":{"newProject":"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.","existingProject":"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."},"performance":{"notes":"The environment is baked once at startup (a few milliseconds). Per-frame cost is a standard physical material.","limits":"Re-create the environment only when warmth/intensity change, not every frame."},"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":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[{"name":"three.js","version":"0.185.1","license":"MIT","url":"https://github.com/mrdoob/three.js"}]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026. No external images, models or textures; every visual is generated by the code. Demo polished in October 2026 to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.1.0","date":"2026-10-03","notes":"Adds a studio set to the ingredient: createCove (horizon backdrop with a backlight spot) and createStudioFloor (floor with a pool of light), both opaque vertex-coloured geometry. The demo uses them so the chrome reflects a room with a floor line. Material and environment code unchanged."},{"version":"1.0.0","date":"2026-10-02","notes":"Initial release."}],"verification":{"testedOn":"2026-10-03","inputs":{"chrome-material@1.1.0":"ecb41776bfc1ee88997604f916a5ffe833f971d7edcc97c855697a5792d6f1dd","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":240,"renderSeconds":73.7,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/chrome-material/1.1.0/poster.webp","preview":"/media/chrome-material/1.1.0/preview.mp4","sample":"/media/chrome-material/1.1.0/sample.mp4","sampleBytes":264009}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/chrome-material/1.1.0/LICENSE"},{"path":"asset.json","size":9720,"sha256":"3afadbcdb680b3fa96eea29fac5b5a0b12cf8e707e05c64b99f960fa71fd0a7e","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/chrome-material/1.1.0/asset.json"},{"path":"demo.js","size":2664,"sha256":"bcfe6812fdc26fe30e31bafe00b69b2804521818f860315fe6fe79900b420b15","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/chrome-material/1.1.0/demo.js"},{"path":"index.html","size":548,"sha256":"88a0afe3d058eac1ca5a4e425c1dd57206d214f8e7c7b94103896acbf8c3b1db","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/chrome-material/1.1.0/index.html"},{"path":"src/chrome-material.js","size":9155,"sha256":"4081c6377d403f72bdc65ec309c3af5ec9f4f1e36c921566555214e76079fe94","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/chrome-material/1.1.0/src/chrome-material.js"}],"warnings":[]}