# Glass Container — `glass-container@1.0.0`

A clear glass box with real wall thickness, set up so objects inside it look right.

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.

- Kind: object; status: published; digest sha256:e49102f806f213e2ffa80b4e18ccee9c571770362db2e5cd52cd2ec41f100d73
- Role: Container object: a transparent box whose inner volume matches physics boxes.
- Implementation: three; entry `src/glass-container.js`
- Files: https://aipixelwizard.com/registry/glass-container/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/glass-container.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/glass-container/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/glass-container/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — WebGL rendering (MeshPhysicalMaterial transmission).; `chrome-material@1.0.0` (demo) — Demo uses createStudioEnvironment for reflections and a chrome ball. Any environment map works with the glass.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createGlassMaterial({ tint?, roughness?, thickness?, ior?, attenuationDistance? }) => THREE.MeshPhysicalMaterial` — Transmission-based clear glass.
- `createGlassBox({ width?, height?, depth?, wall?, open?, material? }) => THREE.Group` — Box of slab walls. Inner size = width × height × depth, floor top at y = 0.
- `disposeGlassBox(group) => void` — Frees geometries and material.

## Parameters
- `tint` (color, default "#e8fbff") — Glass tint: Colour the glass picks up through its thickness.
- `frost` (number 0–0.4, default 0.03) — Frosting: 0 is crystal clear; higher is frosted.
- `ior` (number 1.1–2.4, default 1.5) — Bend of light (IOR): 1.5 is window glass, 1.33 water, 2.4 diamond.
- `wall` (number 0.03–0.2, default 0.07) — Wall thickness
- `turns` (integer 0–2, default 1) — Turns per clip
- `accent` (color, default "#7c6cff") — Accent colour
- `background` (color, default "#0b0b10") — Background

## 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.
- Works with: chrome-material, bouncing-balls, orbit-camera
- 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.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — Whole turntable turns over the clip (seamless when Turns per clip is a whole number, which it always is).
- 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 renderer with tone mapping, set scene.environment, add createGlassBox({ width, height, depth }) and put opaque objects inside.

Existing project: 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.

Reuse ideas:
- 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.

## 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
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 textures or models.