{"id":"glass-container","version":"1.1.0","title":"Glass Container","summary":"A clear glass box with real wall thickness, set up so objects inside it look right.","kind":"object","target":"three","collections":["chrome-glass","product-reveals","bouncing-falling"],"tags":["glass","transparent","refraction","container","box","jar","tank","clear","3d","material"],"loopable":true,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/glass-container/1.1.0/poster.webp","preview":"https://aipixelwizard.com/media/glass-container/1.1.0/preview.mp4","sample":"https://aipixelwizard.com/media/glass-container/1.1.0/sample.mp4","sampleBytes":750266,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/glass-container","manifest":"https://aipixelwizard.com/api/v1/visuals/glass-container/versions/1.1.0","agentMd":"https://aipixelwizard.com/registry/glass-container/1.1.0/agent.md","files":"https://aipixelwizard.com/registry/glass-container/1.1.0/","demo":"https://aipixelwizard.com/registry/glass-container/1.1.0/index.html"},"description":"A see-through glass box (open top by default) made of solid panes with real thickness, and a physically based glass material that bends the light behind it. Glass is easy to get wrong in 3D: this one is configured the way the renderer needs it, so you can drop things inside, pour balls into it, or turn it on a turntable. Its inside measurements line up with the Bouncing Balls simulation by default.","role":"Container object: a transparent box whose inner volume matches physics boxes.","useCases":["Balls or objects falling into a glass box","Product in a display case","Terrarium or specimen-jar looks"],"synonyms":["see-through","glass box","glass container","fish tank","terrarium","jar","crystal","clear box","aquarium"],"digest":"973b74f1a14e01629f3ab77cec617fc211fb419f3e580b45284583aafaafecf4","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/glass-container.js","exports":[{"name":"createGlassMaterial","signature":"createGlassMaterial({ tint?, roughness?, thickness?, ior?, attenuationDistance? }) => THREE.MeshPhysicalMaterial","description":"Transmission-based clear glass."},{"name":"createGlassBox","signature":"createGlassBox({ width?, height?, depth?, wall?, open?, material? }) => THREE.Group","description":"Box of slab walls. Inner size = width × height × depth, floor top at y = 0."},{"name":"disposeGlassBox","signature":"disposeGlassBox(group) => void","description":"Frees geometries and material."}],"reusable":["src/glass-container.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"WebGL rendering (MeshPhysicalMaterial transmission)."},{"id":"chrome-material","version":"1.0.0","scope":"demo","reason":"Demo uses createStudioEnvironment for reflections and a chrome ball. Any environment map works with the glass."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[{"id":"bouncing-marbles-box","version":"1.1.0"}],"params":[{"key":"tint","label":"Glass tint","help":"Colour the glass picks up through its thickness.","type":"color","default":"#e8fbff"},{"key":"frost","label":"Frosting","help":"0 is crystal clear; higher is frosted.","type":"number","min":0,"max":0.4,"step":0.01,"default":0.03},{"key":"ior","label":"Bend of light (IOR)","help":"1.5 is window glass, 1.33 water, 2.4 diamond.","type":"number","min":1.1,"max":2.4,"step":0.01,"default":1.5},{"key":"wall","label":"Wall thickness","type":"number","min":0.03,"max":0.2,"step":0.01,"default":0.07},{"key":"turns","label":"Turns per clip","type":"integer","min":0,"max":2,"step":1,"default":1},{"key":"accent","label":"Accent colour","type":"color","default":"#7c6cff"},{"key":"background","label":"Background","type":"color","default":"#0b0b10"}],"presets":[{"id":"clear","label":"Crystal clear","params":{}},{"id":"frosted","label":"Frosted","params":{"frost":0.28,"tint":"#ffffff"}},{"id":"emerald","label":"Thick green glass","params":{"tint":"#5fe3a8","wall":0.16,"ior":1.7,"accent":"#ffcf73"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":8,"posterSeconds":2,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":8,"method":"Whole turntable turns over the clip (seamless when Turns per clip is a whole number, which it always is)."},"seed":null},"composition":{"inputs":"Inner size and wall thickness. Needs scene.environment for highlights.","outputs":"A THREE.Group named GlassBox; inner volume x ∈ [−w/2, w/2], y ∈ [0, h], z ∈ [−d/2, d/2].","coordinates":"Y-up. Floor top at y = 0, centred on the origin. Matches Bouncing Balls' default box when width 4, height 3, depth 4.","lighting":"Image-based: set scene.environment (e.g. createStudioEnvironment from Chrome Material). Tone mapping recommended.","timing":"Static object. The demo rotates a turntable group.","compatibleWith":["chrome-material","bouncing-balls","orbit-camera"],"notes":["Glass seen through glass is not rendered (Three.js transmission samples opaque objects only). Keep contents opaque.","Transmission is a WebGL2 feature; it costs one extra render pass."]},"reuse":["Pour Bouncing Balls into it — the default inner size is the same 4 × 3 × 4 box (see Bouncing Marbles in a Box).","Use createGlassMaterial alone on a sphere or a bottle shape.","Close the lid (open: false) for a display case around a product."],"integration":{"newProject":"Create a renderer with tone mapping, set scene.environment, add createGlassBox({ width, height, depth }) and put opaque objects inside.","existingProject":"Copy src/glass-container.js. Add the group to your existing scene at the position you want; make sure your scene has an environment map. Do not switch your other materials to transmission."},"performance":{"notes":"One extra render pass for transmission. Fine on laptops; heavy on low-end phones at 4K.","limits":"Avoid many separate transmissive objects; each one still shares the single transmission pass but overdraw adds up."},"limitations":["No glass-behind-glass: the back pane is not visible through the front pane.","No caustics (light focused through glass onto the floor)."],"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 textures or models. Demo scene rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.1.0","date":"2026-10-03","notes":"New demo: a glass vitrine on a matte studio floor with a cove horizon behind it, so the panes refract and reflect something real; contents re-arranged; the light bars that read as poles are gone. The glass material and box builder are unchanged."},{"version":"1.0.0","date":"2026-10-02","notes":"Initial release."}],"verification":{"testedOn":"2026-10-03","inputs":{"glass-container@1.1.0":"973b74f1a14e01629f3ab77cec617fc211fb419f3e580b45284583aafaafecf4","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","chrome-material@1.0.0":"cd8524db875223bd8ffc7b17ba8ac3e622590e4b2a6eac967a17cf60b927d9cb","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":334.3,"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/glass-container/1.1.0/poster.webp","preview":"/media/glass-container/1.1.0/preview.mp4","sample":"/media/glass-container/1.1.0/sample.mp4","sampleBytes":750266}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.1.0/LICENSE"},{"path":"asset.json","size":7845,"sha256":"db769740d9f0ac315a7a149974d22fef7dec0927832c33fcbe60d8af470ac867","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.1.0/asset.json"},{"path":"demo.js","size":6974,"sha256":"0ff0d2a304dc2db1f93dec9c8ac5d9d5d39a762a010b6153169b81ade22a64fa","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.1.0/demo.js"},{"path":"index.html","size":529,"sha256":"583a938123f0d3493f7e2de48f08c585f47d094392de857534e9b54c9c18a9a3","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.1.0/index.html"},{"path":"src/glass-container.js","size":3248,"sha256":"3ee68b0e525461c37744572786a120e6409fe70c008ff76a2f57b67a836ae73b","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.1.0/src/glass-container.js"}],"warnings":[]}