{"id":"glass-container","version":"1.0.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.0.0/poster.webp","preview":"https://aipixelwizard.com/media/glass-container/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/glass-container/1.0.0/sample.mp4","sampleBytes":666931,"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.0.0","agentMd":"https://aipixelwizard.com/registry/glass-container/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/glass-container/1.0.0/","demo":"https://aipixelwizard.com/registry/glass-container/1.0.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":"e49102f806f213e2ffa80b4e18ccee9c571770362db2e5cd52cd2ec41f100d73","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.0.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":1,"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.","changelog":[{"version":"1.0.0","date":"2026-10-02","notes":"Initial release."}],"verification":{"testedOn":"2026-10-02","inputs":{"glass-container@1.0.0":"e49102f806f213e2ffa80b4e18ccee9c571770362db2e5cd52cd2ec41f100d73","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","chrome-material@1.0.0":"cd8524db875223bd8ffc7b17ba8ac3e622590e4b2a6eac967a17cf60b927d9cb","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":240,"renderSeconds":537.9,"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.0.0/poster.webp","preview":"/media/glass-container/1.0.0/preview.mp4","sample":"/media/glass-container/1.0.0/sample.mp4","sampleBytes":666931}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.0.0/LICENSE"},{"path":"asset.json","size":7435,"sha256":"dbcaf4384659d230edaf98267d934e4b5a81bcbec1b7d92c804235a6237dfa18","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.0.0/asset.json"},{"path":"demo.js","size":3690,"sha256":"bb9e391d9667f24197021707cdea1206efcf07e8ed33788df333c5b2a6dc47d6","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.0.0/demo.js"},{"path":"index.html","size":529,"sha256":"583a938123f0d3493f7e2de48f08c585f47d094392de857534e9b54c9c18a9a3","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/glass-container/1.0.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.0.0/src/glass-container.js"}],"warnings":[]}